DESIGN CONCEPT 01
정돈되고 안정적인 인상
중요한 상태와 다음 행동을 또렷하게 보여주고, 장식보다 이해와 실수 방지를 우선하는 디자인 방향입니다.
잘 맞는 서비스의료·금융·공공 서비스
예약 현황
9월 4일 목요일
오후 2:30 · 30분 상담
컨셉 구성 요소 상세
색상만 정하는 것이 아니라 텍스트 위계, 정보 묶음, 행동의 강도와 화면 순서를 함께 설계합니다. 확대 예시에서 형태와 이유를 함께 확인해 보세요.
핵심 원칙
정확한 상태를 먼저 보여주고, 가장 안전한 다음 행동 하나로 연결합니다.
예약 현황
상담 30분 전에 알림을 보내드립니다. 일정 변경은 예약 상세에서 확인할 수 있습니다.
ELEMENT 01
중요한 정보일수록 더 크고 굵게 보여주고, 본문은 정확하고 짧게 작성합니다.
구성 기준
이렇게 구성하는 이유
사용자가 장문의 설명을 읽지 않아도 상태, 일정과 주의사항을 순서대로 구분할 수 있습니다.
피해야 할 방식 · 작은 글자, 지나치게 가벼운 굵기, 감정적인 수식어와 여러 종류의 글꼴을 섞지 않습니다.
확정된 상담
다음 예약 일정
9월 9일 화요일
오후 3:30 · 첫 상담
ELEMENT 02
서로 관련된 정보만 하나의 카드에 묶고 경계와 내부 간격을 규칙적으로 유지합니다.
구성 기준
이렇게 구성하는 이유
카드의 모양보다 정보의 묶음이 먼저 보이면 사용자는 어디까지 함께 읽어야 하는지 바로 이해합니다.
피해야 할 방식 · 모든 내용을 카드로 감싸거나, 카드 안에 카드를 반복해 정보 경계를 복잡하게 만들지 않습니다.
STATUS BADGE
ACTION BUTTON
ELEMENT 03
가장 안전한 다음 행동 하나를 강조하고, 상태는 색상에만 의존하지 않고 명확한 문구로 표시합니다.
구성 기준
이렇게 구성하는 이유
버튼의 우선순위와 상태의 의미가 분명하면 중요한 서비스에서 망설임과 오조작을 줄일 수 있습니다.
피해야 할 방식 · 같은 강도의 버튼을 여러 개 나열하거나 성공·주의 상태를 색상만으로 구분하지 않습니다.
01 · 현재 상태
03 · 세부 내용
ELEMENT 04
사용자가 확인하는 순서와 화면의 위아래 배치 순서를 일치시킨 단일 흐름을 사용합니다.
구성 기준
이렇게 구성하는 이유
화면을 처음 보는 사용자도 위에서 아래로 읽기만 하면 현재 상황을 이해하고 다음 행동까지 완료할 수 있습니다.
피해야 할 방식 · 핵심 상태를 화면 중간에 숨기거나 여러 방향의 그리드와 장식 요소로 시선을 분산하지 않습니다.
구성 비교
GOOD
9월 9일 화요일 · 오후 3:30
상태, 일정과 다음 행동이 한 방향으로 읽히고 강조색이 한 가지 목적에만 사용됩니다.
AVOID
일정이 생겼습니다. 자세히 보고 변경하고 공유해보세요.
여러 색상과 행동이 동시에 경쟁하고, 중요한 일정과 상태보다 장식이 먼저 보입니다.
모바일 화면 예시
대표 색상만 바꾼 화면이 아닙니다. 신뢰 중심의 정보 순서, 컴포넌트와 행동 방식을 세 가지 실제 화면으로 비교해 보세요.
예시 화면 3개
예약 현황
안녕하세요, 김고객님
예약
완료
문의
9월 9일 화요일
오후 3:30 · 첫 상담
SCREEN 01 · 화면 해설
확정 상태와 다음 일정을 첫 화면에서 바로 확인합니다.
이 화면의 역할
사용자가 로그인 직후 예약 상태와 다음 일정을 안심하고 확인하는 시작 화면입니다.
위에서 아래로 읽는 순서
핵심 요소와 구성 방법
상태를 먼저 보여주는 제목
인사보다 예약 현황을 먼저 적어 화면의 목적을 즉시 알립니다.
규칙적인 요약 카드
예약·완료·문의 수치를 같은 크기로 배치해 빠르게 비교하게 합니다.
확정 배지와 단일 버튼
색과 문구를 함께 사용하고, 가장 안전한 다음 행동 하나만 강조합니다.
왜 이렇게 구성하나요?
의료·금융처럼 실수가 부담스러운 서비스는 탐색보다 확인이 우선입니다. 시선이 위에서 아래로 한 방향으로 흐르게 해 “무슨 상태인지, 언제인지, 무엇을 누를지”를 순서대로 답합니다.
상담 전 준비
준비 사항을
확인해 주세요
2 / 3 완료
완료한 내용은 상담 담당자에게 안전하게 전달됩니다.
SCREEN 02 · 화면 해설
중요한 준비 항목을 완료 여부와 함께 단계적으로 안내합니다.
이 화면의 역할
상담 전에 필요한 준비물을 빠뜨리지 않도록 완료 과정을 안내하는 화면입니다.
위에서 아래로 읽는 순서
핵심 요소와 구성 방법
단계가 보이는 진행률
남은 양을 숫자와 막대로 함께 표현해 불확실성을 줄입니다.
독립된 체크 항목
항목마다 충분한 터치 영역과 완료 아이콘을 두어 오조작을 예방합니다.
개인정보 안내
민감한 자료가 어디로 전달되는지 행동 직전에 짧게 알립니다.
왜 이렇게 구성하나요?
완료한 것과 남은 것을 한눈에 구분하면 기억에 의존하지 않아도 됩니다. 체크 항목의 위치와 모양을 통일해 사용자가 내용만 확인하도록 설계합니다.
상담 신청이
완료됐습니다
입력한 연락처로 확정 안내를 보내드렸어요.
SCREEN 03 · 화면 해설
처리 결과와 다음 행동을 명확하게 분리해 불안을 줄입니다.
이 화면의 역할
신청이 정상적으로 접수되었음을 확인시키고 이후 행동으로 연결하는 결과 화면입니다.
위에서 아래로 읽는 순서
핵심 요소와 구성 방법
크고 분명한 완료 신호
아이콘과 완료 문구를 함께 사용해 색을 구분하기 어려워도 이해할 수 있습니다.
접수 번호와 처리 상태
문의할 때 필요한 정보와 현재 진행 상황을 하나의 요약 카드에 묶습니다.
예측 가능한 후속 행동
처음 화면으로 보내지 않고 방금 만든 예약을 확인하도록 연결합니다.
왜 이렇게 구성하나요?
완료 화면은 축하보다 증빙과 다음 단계가 중요합니다. 결과, 근거, 후속 행동을 분리해 사용자가 같은 신청을 다시 제출하지 않도록 돕습니다.
선택 기준
정보의 정확성과 안정감을 먼저 전달합니다. 업종 이름보다 사용자가 화면에서 느껴야 하는 감정과 완료해야 하는 행동을 기준으로 판단합니다.
화면 전체 규칙
확정 상태와 일정을 가장 먼저 표시
또렷한 글자와 규칙적인 간격
규칙적인 카드와 분명한 상태 배지
장식보다 정보 이해를 돕는 아이콘 중심
LAYOUT RULES
화면 템플릿 연결
템플릿은 화면 구성의 출발점입니다. 같은 템플릿이라도 이 콘셉트의 글자, 여백과 컴포넌트 규칙을 적용해 프로젝트에 맞게 조정합니다.
함께 검토할 템플릿 유형
PROJECT QUESTIONS
사용자가 가장 불안해하는 순간은 어디인가요?
반드시 정확하게 확인해야 하는 상태와 숫자는 무엇인가요?
실수했을 때 되돌리거나 문의할 방법이 준비되어 있나요?
다른 방향 비교
서비스 유형과 주요 사용자, 필요한 화면을 알려주시면 적용 범위와 다른 비교 방향을 함께 정리합니다.
