호텔 리뉴얼 프로젝트 수행 후기
※ 본 글은 소속 회사의 내부 게시판에 본인이 작성한 내용을 기록 목적으로 재작성하였습니다.기업 식별을 최소화하기 위해 관련 명칭은 마스킹 처리하였으며, 문제가 있을 경우 댓글로 알려
wellness-dani.tistory.com
화면설계의 일관성을 시스템으로 만드는 과정
피그마 기반 UI/UX 공통가이드 제작 경험
대규모 온라인 플랫폼 리뉴얼을 진행할 때 가장 중요했던 건 ‘일관된 사용자 경험’이었습니다.
디바이스가 달라지고, 언어가 달라지고, 담당자가 바뀌어도
같은 기준으로 일할 수 있도록 만드는 시스템 — 그게 이번 프로젝트의 핵심 목표였습니다.
이 글에서는 피그마(Figma)를 활용해 UI/UX 공통가이드를 제작하고 운영한 실제 경험을 정리했습니다.
반응형웹 환경에서 PC와 모바일의 사용성 차이를 세밀하게 정의한 과정, 그리고 이를 기반으로 구축된 일관된 디자인 시스템에 대해 공유합니다.
1. 프로젝트 배경과 목적
이 프로젝트의 핵심 목표는 단 하나였습니다.
모든 화면과 서비스가 하나의 원칙 아래 움직이는 시스템을 만드는 것.
- 브랜드 경험의 통합: 지역·언어별 사이트의 디자인과 인터랙션을 표준화
- 작업 효율 향상: 공통 컴포넌트를 활용해 동일한 구조로 화면 설계
- 확장성 확보: 새로운 국가나 기능이 추가돼도 같은 기준으로 빠르게 적용
이를 위해 초반부터 기획, 디자인, 개발이 함께 참여해 UI/UX 공통가이드 시스템을 설계했습니다.
2. 공통가이드 제작 과정
공통가이드는 단순한 작업을 위한 가이드문서가 아닌,
팀 전체가 같은 언어로 일할 수 있도록 만드는 최초의 기준 문서였습니다.
- 화면정의서의 구조·개정이력·프로세스 정리
- 설명(Description) 포맷 통일 및 예외 케이스 정의
- 컬러·폰트·버튼 등 주요 UI 자산의 글로벌 표준 확립
- 기능정의 시 상태(State), 조건(Condition), 결과(Result)를 구조화
이 과정을 통해 ‘Definition Guide’라는 체계가 만들어졌고,
이후 모든 화면 설계는 이 문서를 기준으로 진행되었습니다.
3. 반응형웹 기반의 디바이스별 사용성 가이드
이번 플랫폼은 반응형 웹으로 구축되었지만,
단순히 비율만 조정하는 형태가 아닌 디바이스 맥락에 따른 사용자 경험 설계가 핵심이었습니다.
| 구분 | PC | Mobile |
| 기본 해상도 | 1400px 기준 균등 콘텐츠 정렬 | 360~480px 가변폭 대응 |
| 메뉴 구조 | 상단 고정형 다단 메뉴 | 햄버거 메뉴 + Bottom Sheet 전환 |
| 버튼(CTA) | 넓은 여백, 텍스트 중심 | 터치영역 44px 이상 확보 |
| Toast/Tooltip | 우측 상단 정렬 | 화면 중앙 또는 하단 이동 |
| 이미지 비율 | 16:9 고정형 | 1:1.2 가변형 대응 |
각 디바이스별 인터랙션 규칙을 분리하면서,
어떤 환경에서도 동일한 사용 흐름을 유지할 수 있었습니다.
4. 주요 공통 컴포넌트 정의
공통가이드는 설계의 재료집이자,
디자인과 개발을 이어주는 기준선 역할을 했습니다.
1️⃣ Input / Validation
Label, 입력영역, Validation 메시지, Tooltip까지 하나의 세트로 정의했습니다.
입력 전·후 상태, 오류 메시지, Tooltip 문구 길이 등 세부 조건을 표준화했습니다.
2️⃣ 조건검색 필터 / Date Picker
희망하는 상품을 탐색하기 위한 필터영역 배치, 속성을 나타내는 태그형태와 날짜선택을 구분하여 원하는 시점에, 원하는 상품을 찾을 수 있도록 제공하고자 했습니다.
단일 날짜 선택과 기간 선택을 분리하고, 시작일·종료일 간 유효성 검증, 초기화 버튼, Disabled 상태를 구분하여 세부 설계했으며, 모바일에서는 Bottom Sheet 구조로 전환하였습니다.
3️⃣ Select Box & Dropdown
PC에서는 Hover 기반의 드롭다운,
Mobile에서는 Bottom Sheet 전환 구조로 분리했습니다.
옵션이 많을 경우 스크롤 가이드라인을 함께 제시했습니다.
5️⃣ 공통가이드의 관리와 확산
공통가이드는 피그마의 라이브러리 기능을 통해 팀 전체가 공유했습니다.
이 후 서비스의 정책을 포함하는 다양한 정의가 업데이트됨에 따라 단순 UI 컴포넌트의 역할에서 서비스 정책을 다루는 정의서의 역할로 확장하게 됩니다.
- 컴포넌트 네이밍: BTN/Primary/Large, Input/Error/Tooltip 등 규칙화
- 수정 시 ‘Publish’ 기능으로 전체 프로젝트 자동 반영
- 프레임 구조를 Flow와 화면명세서, 또는 IA Depth와 통일화하여 네이밍 부여
- 피그마 페이지명 명료화, 불필요한 관리 최소화
6. 결과와 인사이트
공통가이드 구축 이후,
실제 작업 방식과 결과물 모두 눈에 띄게 변화했습니다.
- 팀 간 커뮤니케이션 속도 향상 – 용어와 기준이 통일
- UI 일관성 강화 – 화면별 편차 최소화
- 화면설계 속도 약 40% 단축 – 컴포넌트 재사용성 증가
무엇보다도 이 가이드는 프로젝트가 끝난 후에도
브랜드 경험 품질을 유지하는 지속 가능한 자산으로 남았습니다.
7. 마무리
공통가이드는 한 번 완성하고 끝나는 문서가 아닙니다.
서비스가 진화할수록 계속 보완되고 확장되는, 살아 있는 시스템입니다.
이번 경험을 통해 가장 크게 느낀 건 'UI/UX의 일관성은 결국 시스템으로 만들어진다'는 점이었습니다.
사람의 감각보다 더 정확한 기준을 세워두면, 누가 작업하더라도 같은 결과물을 만들어낼 수 있습니다.
피그마(Figma)를 활용한 UI/UX 공통가이드 구축 경험
반응형웹 기반 플랫폼 리뉴얼에서 PC·모바일 사용성 정의, 컴포넌트 표준화, 디자인 시스템 관리 방법을 정리한 사례
2025.09.02 - [Insight/Tip · Study] - 피그마로 화면설계 공통템플릿 만들기
피그마로 화면설계 공통템플릿 만들기
처음 기획 일을 시작했을 때만 해도 화면설계서는 늘 PPT로 작성했습니다. 체크박스 하나, 버튼 하나를 매번 그려 넣고, 수정 사항이 생기면 전체 문서를 열심히 찾아 바꿔야 했죠. 파일을 주고받
wellness-dani.tistory.com
'Insight > AAR (After action review)' 카테고리의 다른 글
| 2025 웹어워드 호텔·리조트부문 대상 수상 🏆 (1) | 2025.12.29 |
|---|---|
| Figma 컴포넌트 재사용률 지표관리 · 추적표 기준 (0) | 2025.11.27 |
| UI/UX 공통가이드 및 Figma 표준 운영 프로세스 (0) | 2025.11.27 |
| 피그마로 화면설계 공통템플릿 만들기 (5) | 2025.09.02 |
| 글로벌 호텔체인 리뉴얼 프로젝트 수행 후기 (12) | 2025.08.27 |