잘 공유하는 방법 1편
디자인 공유하기 전 확인 해야 할 6가지 체크리스트
우리 모두 이런 경험 하나씩은 있잖아요. 기획서대로 디자인은 다 했고, 컨펌도 다 났고 끝났다 생각해서 사수에게 보고했는데
‘그럼 이제 화면이랑 가이드 정리해서 공유해 주세요' 이 한 마디에 물음표가 수 만개였던 디자이너 Y씨.
갑자기 가이드? 정리? 무슨 정리...? 일단 대답은 ‘네'라고 했지만 어디서부터 어떻게 해야 할지 모르겠는 Y씨와 같은 디자이너를 위해
개발자에게 디자인 ‘잘 공유하는 방법’에 대해 이야기해볼게요.
1. 피그마로 미러링 하기
디자인을 완료했다면, Figma Mirror나 다른 미러링 툴을 이용해 디바이스에서 화면을 확인해야 해요. 디자인이 된 화면으로만 판단할 경우, 길이가 긴 페이지에서 스크롤 시 동작하는 인터랙션을 쉽게 놓칠 수 있어요.
특히 다음 요소들이 디자이너의 의도대로 '고정'(Fixed)되거나 '따라다니는지'(Sticky/Floating) 확인해야 해요.
- 구성요소 확인
- Fixed, Sticky Interaction Area 테스트 및 가이드 제작
우리는 이런 요소들이 '당연히' 문제없이 나올 화면을 기대하지만 제대로 확인해주지 않으면 ‘당연히' 디자이너의 의도와는 다른 화면이 개발될 거예요.
❶ Header
❷ Tab
❸ Floating
❹ Navigation
2. 앞뒤 플로우 확인하기 (UI의 일관성을 확보)
사용자의 행동 흐름(User Flow)을 확인하는 것은 기획자뿐 아니라 디자이너에게도 필요해요. 디자이너가 현재 화면의 유형을 구분하지 않으면, 사용자가 다음 행동을 예측하기 어려운 사용성을 제공할 수도 있어요.
예를 들어, 팝업 상태에서 또 다른 팝업을 띄우거나, 첫 진입이 팝업 화면이었는데 ‘다음' 연결되는 화면에서는 갑자기 뒤로 가기 버튼이 생기는 등의 혼란스러운 UI가 만들어지게 돼요. 따라서 개발자에게 화면을 공유하기 전 아래 요소들을 확인해야 해야 해요.
- 본인이 작업한 화면이 '페이지'(Page)인지 '팝업'(Pop-up)인지 구분
- 연속되는 화면 간의 Header Rule(화면 이동 / 화면 덮기)이 일관성을 가지는지 확인
3. 최소·최대 해상도에서 깨지지 않는 UI 확인하기
작업 시 가장 기본이 되는 것은 기준 해상도에 맞춰 최적화된 UI를 만드는 일이에요. 하지만 사용자 모두가 동일한 해상도와 OS를 사용하는 것은 아니에요. 따라서 최소, 최대 해상도를 고려하지 않으면 기대하는 디자인과는 많이 다른 결과물이 나올 수 있어요. 프로젝트마다 기준 해상도에 차이가 있지만 대체적으로 AOS는 360, IOS는 375를 기본으로 하고 있어요. 최소 해상도는 320을, 최대 해상도는 따로 규정하고 있지 않아요. 만약 폴드까지 대응한다면 700~800까지는 확인을 해주어야 해요.
- 해상도에 대응할 수 있는 이미지 제작 (이미지 정렬 + 이미지 Crop)
이번에는 화면 높이(Height)를 기준으로 살펴볼게요.
다양한 디바이스 환경에서 너비(Width)는 물론, 높이 역시 유동적으로 달라져요. 이 때문에 메인 콘텐츠가 화면 상단이나 하단에 쏠려 보이거나, 특히 작은 디바이스에서는 콘텐츠 일부가 잘려 보이는 문제가 발생할 수 있어요.
그렇다면 콘텐츠가 어디 한 군데에 치우치지 않고, 어떤 환경에서든 화면 중앙에 정렬되어 안정적으로 보이려면 어떻게 해야 할까요?
이를 위해 가장 먼저, 다음과 같은 최소 기준을 명확하게 설정해야 해요. NoData Box를 예시로 그 기준을 설명드릴게요.
1. '최소 요소' 정의: 컨테이너 내에서 반드시 표시되어야 할 '최소한의 요소'를 선별하는 과정이 필요해요. 타이틀, 서브텍스트, 버튼 등 여러 구성요소 중 가장 필수적인 요소만 남겨 '최소 상태'를 정의하는 과정이 필요합니다.
2. 최소 높이 설정 (Case 1): 이 '최소 상태'를 기준으로 컴포넌트의 최소 높이(Min-height)를 설정합니다.
3. 가변적 여백 사용 (Case 2): 페이지에 남은 추가 여백은 NoData Box를 늘려서 사용합니다.
아래 이미지를 통해 이러한 해상도 대응 방법을 자세히 살펴볼게요.
- 화면 기준으로 중앙정렬을 유지하는 방법 (Vertical-align : middle)
디자인을 개발자에게 정확히 전달하기 위해서는 ‘보여지는 화면’만큼이나 실제 사용 맥락, 디바이스 환경, 화면 흐름을 깊이 있게 이해하는 과정이 필수적입니다.
여기까지 살펴본 3가지 체크포인트만 잘 지켜도 디자인과 실제 구현 사이의 오차를 상당 부분 줄일 수 있어요.
하지만 이 과정이 끝은 아니에요.
이제부터는 디자인을 어떤 방식으로 전달하고, 어떤 기준으로 가이드를 구성해야 하는지, 즉 “실제 구현 단계에서 부딪히는 문제들”을 살펴볼 차례입니다.
다음 편에서는
이미지 처리 vs 코드 구현, 데이터 시각화, Resizing 규칙 등
개발자와의 싱크를 결정짓는 보다 현실적인 가이드 구성법을 이야기해 볼게요.
- 라이트브레인 가치디자인그룹 유슬기
