상담 화면
예약하기
디자인 · 더 알아보기 · 직접 체험형
버튼·입력창·카드를 디자인 시스템으로 관리하는 이유
디자인 시스템은 화면을 똑같이 만드는 자료가 아닙니다. 같은 역할의 버튼과 입력창, 카드가 어느 화면에서도 익숙하게 보이고 상태가 달라져도 같은 의미를 전달하도록 정한 공통 약속입니다.
약 12분쉽게 보는 핵심 기준
SHARED UI SYSTEM하나의 규칙 · 여러 화면
BUTTON주요 행동
INPUT입력·오류
CARD정보·선택
9:41
상담 예약
연락받을 휴대전화
9월 16일 · 오후 2:00
전화 상담 · 예약 가능
이 시간으로 예약하기
기본눌림·초점비활성오류
먼저 이해할 내용
같은 역할의 요소는 어느 화면에서도 같은 모습과 반응을 가져야 합니다
버튼·입력창·카드마다 색상과 모양만 저장하는 것이 아니라 기본·눌림·선택·비활성·오류처럼 사용 중 생기는 상태와 안내 문구를 함께 정합니다. 공통 규칙을 실제 화면과 코드가 같이 사용하면 새 기능을 추가해도 익숙한 사용법과 품질을 유지할 수 있습니다.
- 01
역할과 이름 정하기
- 02
상태별 반응 만들기
- 03
공통 시각 규칙 연결
- 04
화면·코드 함께 검수
공통 구성요소 직접 보기
같은 버튼·입력창·카드가 상태마다 어떻게 반응하는지 재생합니다
서비스 상황과 구성요소를 고른 뒤 재생해보세요. 기본 모습부터 눌림·초점, 비활성, 오류까지 화면과 공통 규칙표가 같이 바뀝니다.
하나의 구성요소 · 네 가지 상태
먼저 살펴볼 구성요소를 선택하세요
애니메이션 재생
1 / 4
지금 재생 중인 장면
주요 버튼 · 기본 상태
상태 직접 선택
1 / 4 · 기본
사용자는 무엇을 알게 되나요?
무엇을 입력하거나 선택하고 눌러야 하는지 역할이 한눈에 보여야 합니다.
실제 검수에서는 무엇을 보나요?
이름·위치·크기만 보고도 용도와 우선순위를 이해할 수 있는지 확인합니다.
화면마다 따로 만들면 생기는 차이
공통 규칙 하나가 여러 화면의 익숙함을 지킵니다
버튼 이름은 달라도 역할이 같다면 크기·색상 우선순위·반응은 같아야 합니다. 아래에서 따로 만든 화면과 공통 규칙을 적용한 화면을 비교해보세요.
주문 화면
결제하기
자료 화면
제출하기
사용법을 다시 배우지 않아도 됩니다
공통 값을 바꾸면 연결된 화면에 같은 기준으로 반영하고, 새 기능도 익숙한 규칙 안에서 확장할 수 있습니다.
01
역할과 이름
“보라색 버튼”이 아니라 “주요 행동 버튼”처럼 쓰임을 기준으로 이름을 정합니다.
02
상태 한 묶음
기본 모습만 만들지 않고 눌림·초점·비활성·오류까지 하나의 구성요소로 관리합니다.
03
공통 시각 규칙
색상·글자·간격·모서리를 공통 값으로 연결해 화면이 늘어나도 같은 인상을 유지합니다.
04
화면과 코드 검수
디자인 파일의 이름과 개발 화면의 상태가 같은지 실제 기기에서 함께 확인합니다.
고객과 함께 정하는 내용
- 브랜드가 주는 인상과 꼭 지켜야 할 색상·글자 기준
- 서비스에서 자주 반복되는 버튼·입력·카드의 역할
- 사용자가 가장 먼저 보거나 완료해야 하는 핵심 행동
- 기존 화면 중 유지할 규칙과 개선할 불편한 부분
데브크래프트가 설계·구현하는 내용
- 역할 중심의 구성요소 이름과 사용 기준
- 기본·상호작용·비활성·오류 상태와 안내 문구
- 색상·글자·간격·모서리를 연결하는 공통 값
- 디자인 파일·개발 화면·키보드·보조기술 상태 검수
공식 기준도 함께 확인합니다
눈에 보이는 일관성과 실제 사용 반응을 같이 설계합니다
Material Design은 여러 구성요소에서 일관된 상호작용 상태를 사용하도록 안내합니다. Apple은 버튼의 역할과 눌림 반응, 입력창의 명확한 라벨을 강조하고, W3C는 상태 변화가 보조기술에도 전달되어야 한다고 설명합니다.
디자인 시스템은 처음부터 거대한 문서일 필요가 없습니다
자주 쓰는 버튼·입력창·카드와 실제 상태부터 정리하고, 새 기능을 만들 때 검증된 규칙을 하나씩 추가하면 됩니다. 중요한 것은 문서의 양보다 디자인과 개발 화면이 같은 약속을 지키는 것입니다.
확인할 내용
이 내용을 보면 알 수 있습니다
- 버튼·입력창·카드의 역할과 기본·상호작용·비활성·오류 상태 구분하기
- 색상·글자·간격·모서리 규칙이 여러 화면에 같은 의미로 적용되는 과정 이해하기
- 디자인 파일과 개발 화면, 접근성 상태를 같은 기준으로 검수하는 방법 확인하기
판단 기준
실제 구현에서는 이렇게 확인합니다
- 01같은 역할의 요소가 화면마다 같은 이름·크기·색상 우선순위를 사용하는가
- 02눌림·초점·비활성·오류를 색상 하나가 아니라 문구·아이콘·동작으로도 구분하는가
- 03공통 규칙을 바꾸면 관련 화면에 일관되게 반영되고 예외 사용 이유를 확인할 수 있는가
우리 앱의 공통 화면 규칙을 함께 정리해보세요
반복해서 사용하는 버튼·입력창·카드와 주요 화면을 알려주세요. 색상·간격·상태·접근성 규칙을 30분 상담에서 함께 정리합니다.