좋은 UX 기획은 단순히 ‘예쁜 화면’을 그리는 것이 아닙니다. 서비스의 뼈대가되는 컨셉 스키마를 세우고, 사용자가 만나는 화면을 설계하며, 그 화면이 동작하는 규칙을 정의하는 일련의 과정입니다.
STEP 1. What ⇒ 컨셉 스키마
STEP 2. Where ⇒ List, Form, Detail
STEP 3. How ⇒ CRUD & Policy
이 3단계 프로세스는 아이디어를 제대로 작동 가능한 서비스로 발전시키는 가장 논리적이고 효율적인 방법이라 할 수 있습니다.
STEP 1
서비스가 무엇으로 되어 있는지 뼈대를 잡는 첫 단계 입니다. 서비스의 핵심 ‘개념(명사)’과 그들 간의 ‘관계’를 명확하게 정의해야하는 중요 과정입니다.
객체 안에 속성이 있고, 각 객체 간의 연결 관계를 표현합니다.
컨셉 스키마가 확정되었다면 용어 정리(Glossary)가 필요합니다. 기획, 디자인, 개발팀이 모두 동일한 용어를 사용하게 하여 커뮤니케이션 오류를 막는 일입니다. 예를 들면, ‘회원’, ‘유저’, ‘사용자’, ‘고객’이라는 말을 모두 ‘회원’으로 통일는 과정입니다.
💬 Tech Connection : 용어 정리는 단순 커뮤니케이션인가요?
용어 정리는 단순한 소통 규칙이 아닌, '시스템 네이밍 컨벤션(Naming Convention)'의 핵심입니다. 기획서에서 '회원'으로 통일했다면, 개발에서는 DB 테이블명 users, API 엔드포인트 /users, 코드 내 모델 UserModel 등으로 일관되게 사용되게 됩니다.
정의한 모든 객체와 주요 속성의 정의와 용어를 명확히 문서화해서 다같이 공유해야 합니다.
💬 Tech Connection : 컨셉스키마는 어떻게 사용되나요?
STEP 1에서 정의한 컨셉 스키마는 개발팀의 ERD(Entity-Relationship Diagram, 개체-관계 다이어그램)로 1:1 변환됩니다.
1. 객체(Entity) → DB 테이블(Table)
2. 속성(Attribute) → 테이블의 컬럼(Column)
3. 관계(Relationship) → 외래 키(Foreign Key) 및 조인 관계
STEP 2
1단계의 '개념'을 사용자가 만나는 '화면'으로 구체화합니다.
객체 안에 속성이 있고, 각 객체 간의 연결 관계를 표현합니다.
대부분의 웹/앱 서비스 화면은 이 세 가지 기본 패턴의 조합으로 이루어집니다.
STEP 1에서 정의한 ‘객체’ 하나당 기본적으로 List, Form, Detail 3종 세트가 나온다고 생각하면 쉽습니다.
예를 들어보겠습니다.
‘게시물’이라는 객체가 있습니다.
- List : 여러 ‘게시물’을 모아 보여주는 화면 (예: 게시판 목록)
- Detail : ‘게시물’ 1개의 내용을 자세히 보여주는 화면 (예: 게시물 본문 읽기)
- Form : ‘게시물’을 생성하거나 수정하는 화면 (예: 글쓰기, 글 수정)
기획자가 개발자는 아니지만, ‘데이터가 어떻게 화면에 표시되어야 하는지’는 꼭 알아야 합니다.
화면(와이어프레임) 설계 시,“이 영역은 정적인가?”(Hard Coding),
“이 영역은 어떤 객체의 어떤 속성 값이 들어와야 하는가?”(Data Binding)를 명시해야 합니다.
데이터가 화면에 표시되는 방식은 크게 두 가지로 구분할 수 있습니다.
하드 코딩은 인쇄된 포스터나 벽에 붙은 안내문과 같습니다. 내용이 고정되어 있고, 누가 언제 접속하든 항상 똑같은 내용이 보입니다. 만약 내용을 바꾸려면, 개발자가 코드를 직접 수정해서 새로 배포(업데이트)해야 합니다.
데이터 바인딩은 내용물이 수시로 바뀌는 '틀'이라고 생각하면 쉽습니다. 마치 구글 폼과 같습니다.
화면은 '틀'만 가지고 있고, 데이터는 DB에서 실시간으로 가져와 빈칸을 채웁니다(결합 = Binding). 보는 사람, 시간, 상황에 따라 다른 내용이 보입니다.
| 구분 | 하드코딩 | 데이터 바인딩 |
| 유연성 | 낮음 | 높음 |
| 코드형태 | text="고정값" | text="user.name" 또는 {{user.name}} |
| 값의 위치 | 소스 코드 내부 | 변수, DB, API 등 외부 소스 |
| 값 변경 방법 | 코드 수정 후 배포 | 데이터 소스(DB, 변수)만 변경 |
STEP 3
누가(Role), 무엇을(Concept), 어떻게(CRUD) 할 수 있는지 정의
화면설계가 끝났다면, 이제 그 화면이 ‘어떻게 동작해야 하는지’ 구체적인 규칙을 정할 차례입니다.
CRUD는 STEP 1의 ‘컨셉스키마’ 중 객체를 다루는 4가지 기본 행동이며, STEP 2의 와이어프레임과 직접 연결됩니다. 아래 4가지에 따라 전반적인 와이어프레임이 구성됩니다.
CRUD는 ‘기능’일 뿐, UX 기획의 핵심은 “누가 이 기능을 쓸 수 있는가?”를 정의하는 정책(Policy)입니다. 정의한 모든 기능(CRUD)에 대해, 어떤 Role이 어떤 조건에서 수행할 수 있는지 정책을 빠짐없이 상세 기획을 정의합니다. 예를 들면 다음과 같습니다.
서비스의 모든 ‘예외 사항’과 ‘조건’을 정의합니다. 예를 들면, ‘본인만 본인의 글을 수정(Update)하고 삭제(Delete)할 수 있다', ‘로그인한 회원만 글을 생성(Create)할 수 있다', ‘관리자는 모든 글을 수정(Update)하고 삭제(Delete)할 수 있다’ 등이 이에 해당합니다.
정책을 효율적으로 관리하기 위해 사용자를 ‘역할(Role)’로 묶는 방식입니다. 여기서 Role이란 게스트, 일반회원, 유료회원, 관리자 처럼 정책별 권한을 가지는 역할을 말합니다. 이런 역할 마다 권한을 부여하는 것이 RBAC입니다. 예시는 다음과 같습니다.
이렇듯 각각의 역할이 어떤 권한을 가지는지까지 정의하는 것이 상세기획의 핵심입니다.
응용하기
배표적인 배달플랫폼에서는 위에서 배운 항목들이 어떻게 응용되는지 알아보겠습니다.
| 플로우 | 역할 | 주요 CRUD | 주요 활동 |
| 사장님 플로우 | 데이터 관리자 | C, U, D | 가게 정보를 플랫폼에 등록 및 운영 |
| 사용자 플로우 | 데이터 소비자 | C, R, D | 앱을 통해 검색, 주문, 리뷰작성 |
| 라이더 플로우 | 데이터 운영자/공급자 | R, U | 플랫폼을 통해 주문 배정, 실시간 배달 과정 운영, 위치 데이터 플랫폼에 제공 |
위에서 STEP 1~3 까지 제시된 플로우 이외에도 더 많은 이해관계자들에 대한 정의도 필요합니다.
예를 들면, 직원과 알바생 별 권한에 따른 화면과 주요 활동이 달라지게 될텐데요, 가게 상세 정보를 수정하는 권한을 직원에게도 부여할 것인지, 주문 수락 권한을 알바생에게도 부여할 것인지 등 이해관계자들의 모든 케이스를 정의하는 것이 필요합니다.
깜짝퀴즈
서비스의 신뢰도를 결정하는 핵심요소이기 때문에 배달 플랫폼에서 가장 고도화된 영역 중 하나입니다. 단순한 조리시간+이동시간이 아닌, 복합적인 실시간 데이터를 기반으로 예측하는 방식으로 정의됩니다.
조리 시간 : 식당에서 음식을 만드는 데 걸리는 시간
| 구분 | 데이터 소스 | 예상 시간 산출 기여 |
| 기본 조리 시간 | 메뉴별 표준 조리 시간 (사장님이 설정하거나 플랫폼의 빅데이터 기반 표준값 사용) | 메뉴 조합에 따른 기본값 |
| 실시간 주방 부하 | 동적 데이터를 이용한 예측. 현재 식당의 주문 대기 수와 조리 난이도 반영. | 주문이 많을수록 조리시간 증가 |
| 사장님 설정값 | 사장님이 직접 설정한 ‘오늘 예상 조리 시간’ (예 : 주문 폭주로 인한 10분 추가) | 상황 반영의 즉시성 |
배달 시간 : 음식 포장 후, 라이더가 픽업하여 사용자에게 전달하는데 걸리는 시간
| 구분 | 데이터 소스 | 예상 시간 산출 기여 |
| 라이더 도착시간 (ETA) | 현재 식당으로 오고있는 라이더의 위치, 속도, 경로를 기반으로 계산된 예상 도착 시간 | 픽업까지 걸리는 시간 |
| 이동 시간 (Travel Time) | 최적의 교통 거리에 실시간 교통 상황 및 라이더 운행 데이터를 적용하여 계산 | 배달 거리가 멀 수록, 교통 체증이 높을 수록 시간 증가 |
| 묶음 배달 (Batching) | 라이더가 여러 주문을 동시에 배달하는 경우, 경로와 순서를 재계산 하여 추가되는 경유 시간을 반영 | 묶음 배달이 많을수록 시간 증가 |
시스템 및 기타 요인 : 시스템의 안정성 및 돌발상황을 대비하여 추가되는 시간 (버퍼 타임)
| 구분 | 데이터 소스 | 예상 시간 산출 기여 |
| 날씨/교통상황 | 악천후나 퇴근 시간대 교통 체증 시, 안전 운행을 위해 자동으로 추가되는 시간 | 악천후, 피크 타임에 시간 추가 |
| 배차 상태 | 현재 해당 지역에 대기 중인 라이더 수(공급)와 주문 수(수요)를 비교하여, 라이더를 배정받는 데 걸리는 예상 시간. | 라이더가 부족 시 배차 대기 시간 증가 |
결국, 최종 배달 예상 시간을 이렇게 산출됩니다.
최종 배달 예상 시간 = 조리 시간 + 배달 시간 + 상황 시스템 및 기타요인
이처럼 배달 예상 시간은 다수의 시스템이 실시간으로 통신하는 예측 모델의 결과물 입니다.
실무기획
기획자는 단순히 시간을 예측하는 알고리즘을 만드는 것이 아니라, 그 알고리즘이 사용자에게 어떻게 보이고, 서비스의 목표 달성에 어떻게 기여할지 정의합니다.
기획자는 신뢰성 또는 속도 중에서 현 서비스가 더 강조해야할 가치를 우선적으로 선택하여 최종 배달 예상 시간에서 어떤 버퍼타임을 얼마나 넣을지 결정해야합니다.
예상 시간 산출에 필요한 데이터 소스를 정의하고, 시스템 내에서 어떻게 CRUD 될지 설계해야 합니다.
| 데이터 요소 | 기획자 결정 사항 |
| 조리 시간 | 사장님 앱에 Form을 제공하여 메뉴별 기본 조리 시간을 Update하도록 할지, 아니면 과거 주문 기록을 Read하여 플랫폼이 평균값을 자동으로 산출할지 결정합니다. |
| 주방 부하 | 현재 List에 있는 대기 주문이 몇 개 이상일 때 조리 시간을 자동으로 N분 추가(Update)할지 그 기준을 설정합니다. |
| 이동 시간 | 지도 API의 단순 경로 시간이 아닌, 실제 라이더의 과거 운행 기록을 Read하여 실제 평균 이동 속도를 반영할지 결정합니다. |
| 배차 시간 | 실시간 라이더 공급/수요(Read)를 기반으로 배차 대기 시간이 몇 분 이상일 때 고객에게 '배달 지연 가능성' 메시지를 Form으로 보여줄지 결정합니다. |
개발자와 협력하여 예상 시간을 어떻게 계산할지 알고리즘을 정의해야 합니다.
예상 시간 로직은 정상 플로우(음식이 정시에 준비되고 라이더가 바로 배차되는 경우)보다 예외 플로우가 훨씬 더 빈도가 높기 때문에, 예외를 빠짐없이 정의해야 합니다.
‘실시간’의 정의를 명확히 해야합니다.
예측 시스템이 제대로 작동하지 않을 때의 대안을 정의해야합니다.
예상 시간을 정의하는 로직이 사장님/라이더 앱의 어떤 CRUD 기능과 연결되어야하는지 정의해야합니다.
요약정리
| 데이터의 생성과 Back-Office (3) | 2025.05.06 |
|---|---|
| 와이어프레임의 80%는 List, Detail, Form으로 정리된다. (0) | 2025.04.27 |
| 혁신이 아닌 모방으로 설계되는 UX (5) | 2024.12.31 |
| Figma로 정리하는 UXUI 협업 프로세스 (6) | 2024.10.28 |
| Figma로 시작하는 UI 디자인 실무 (2) | 2022.06.17 |
댓글 영역