화면설계 (3) 레이아웃 작성 Tip

레이아웃

레이아웃 작성 Step 1. 거시적 관점에서 미시적 관점으로 접근하라

 

레이아웃과 디스크립션을 구분하여 화면 설계서를 작성해야 한다.

• 레이아웃: UI 요소를 배치하는 영역
• 디스크립션: UI 요소의 역할과 기능을 설명하는 영역

레이아웃 설계 시 고려할 점

거시적인 관점에서 접근 후, 미시적인 디테일을 정리해야 한다.

- 상품 상세 페이지를 설계할 때, 먼저 사용자의 이동 흐름을 고려해야 함.

- 예) 사용자가 메인 > 상품 목록 > 상세 페이지로 이동한다면, 그 흐름.

>> 상세 페이지에서는 메인과 목록에서 이미 확인한 정보는 강조할 필요 없음.

>> 정말 상세에서 중요한 것은? 장바구니 추가, 주문 버튼 등의 핵심 기능을 부각해야 함.

 

예시

ex 1. 여행 상품 상세 페이지 설계

예를 들어, 여행 상품 상세 페이지에서 가장 중요한 요소는?

✅ 가격 정보

✅ 일정 정보 (예: 1일 차 일정, 2일 차 일정 등)

목록 페이지에서는 대략적인 가격과 목적지만 표시되지만, 상세 페이지에서는 옵션 선택에 따른 가격 변동이 명확하게 보여야 한다. 상세에서는 첫날은 뭐 하고 둘째는 뭐 하고 이런 게 중요하니까.

• 이를 위해서는 사용자의 흐름을 이해하고, 주요 정보를 직관적으로 설계하는 과정이 필요하다.

⇒ 즉, 바로 화면 설계를 시작하는 것이 아니라, 먼저 사용자 경험을 고려한 구상 단계가 필요 하다는 뜻.

“그 단계에서 가장 중요한 것이 무엇이냐”

 

ex 2. 주문서 페이지 설계

주문서 페이지에서 가장 중요한 요소는?

✅ 사용자가 정보를 쉽게 입력할 수 있어야 함

✅ 장바구니 정보를 한 번 더 확인할 수 있어야 함

✅ 할인 혜택 정보가 명확하게 표시되어야 함

 

💡 설계 방법

- 화면을 설계하기 전에 사용자가 이동하는 흐름 을 먼저 파악해야 한다.

- 단순히 화면을 나열하는 것이 아니라, 사용자의 관점에서 논리적으로 연결된 화면을 설계하는 것이 중요하다.

 

---

레이아웃 작성 Step 2. UX 세부 설계는 흐름이다.

 > 단계를 나눠서 한 화면이지만 여러 개의 세부적인 단계가 발생할 수 있다.

 

예시

✅ 검색 창 설계

• 검색 창을 클릭하면 즉시 검색 창이 열리고(화면 달라짐), 자동 추천 검색어가 나타남
• 검색어 입력 후, 결과 화면으로 자연스럽게 전환(화면 달라짐)

=> 마이크로적인 설계가 안 되어 있으면 되게 딱딱하게 되어 있다. 예측이 아니라 딱딱하게 나온다.

 

✅ 장바구니 설계 사례

- 장바구니에 담을 때도 우리가 일반적으로는 그냥 담는 걸로 생각하지만 사실 담기 위한 그런 어떤 디테일은 다를 수 있다.

• 마켓컬리는 상품을 장바구니에 추가할 때 "슉"하고 당겨지는 인터랙션 효과 적용
• 일부 쇼핑몰은 장바구니로 자동 이동되도록 설계
• 또 어떤 서비스는 "장바구니에 추가하시겠습니까?"라는 팝업 메시지를 제공

⇒ 같은 기능이지만 어떻게 설계하느냐에 따라 사용자 경험이 크게 달라질 수 있다.

⇒ 디테일한 설계가 사용자 경험의 질을 결정한다.

 

---

레이아웃 작성 Step 3. 나만의 컴포넌트 라이브러리를 만들자.

컴포넌트(Component)란?

- UI 요소(버튼, 입력창, 체크박스 등)를 의미하며, 이를 체계적으로 정의해야 화면 설계의 일관성을 유지할 수 있다.

 

컴포넌트 설계 시 고려할 점

- 자주 쓰이는 UI 요소는 표준화하여 속도를 높이고, 일관성을 유지해야 함 남의 것을 하면 늦는다.

- 리더(PL)가 컴포넌트 라이브러리를 제공하는 것이 이상적이다.

- 설계 작업자가 각자 다른 UI를 사용하면 화면 간 일관성이 떨어짐

 

컴포넌트 라이브러리 관리

- 컴포넌트는 일관성을 유지하기 위해 표준화해야 한다.

- 리더(PL)가 표준 라이브러리를 제공하면 가장 이상적이다.

- 팀원들이 각자 다른 방식으로 설계하면 UI 일관성이 깨진다.

---

 

주요 컴포넌트 예시

1. 라디오 버튼 (단일 선택)

• "예/아니오" 형태의 선택 버튼
• 컴포넌트가 색이 칠해진 것과 그렇지 않은 것을 쓰는 경우도 있다. 도형을 찾기가 빠르니까.

 

2. 체크박스 (다중 선택)

• 사용자가 여러 개를 선택할 수 있도록 함

 

3. 아이콘 버튼

• 플러스/마이너스, 위/아래 이동 버튼

 

4. 입력 필드 (Input Box)

• 회원가입 시 이름 입력란
• 입력 필드 안에 힌트 텍스트-안내 메시지(Placeholder) 제공

 

5. 탭 가이드 (Tab Guide)

• 1단, 또는 2단 구조 (예시: "주문 내역" > "진행 중" > "취소 처리 완료")
• 하나의 세트로 관리되면 일관성 있게 보일 수 있다.

 

6. 텍스트 노출영역(Text Area)

• 다중의 글을 쓸 수 있는 표현 방식

 

7. 날짜 선택 (Calendar Picker)

• 달력 선택할 때 날짜 입력 란과 선택했을 때 캘린더 나오는 부분들은 OS별/모바일/PC에서 다르게 적용될 수 있음

⇒ 이 부분에서 디테일하게 적용할 수 있도록 설계한다.

 

8. 파일 업로드

• 사용자가 파일을 선택하여 첨부하는 기능

 

9. 드롭다운 리스트 (Dropdown)

• 여러 개의 옵션 중 하나를 선택할 수 있도록 하는 기능

 

10. 페이지네이션

• 보통 PC 버전에서 페이지 목록을 자르기 위해서 제공할 때 상하단에 배치되는 형태

 

11. 검색 조건(날짜선택 버튼 UI)

• 프리셋 값들이 있어서 선택을 했을 때 바로 그 값으로 적용될 수 있도록 하는 게 일반적

 

12. 툴팁 또는 가이드 버튼

• 마우스 오버 시 툴팁으로 노출 또는
• 마우스 클릭 시 레이어팝업 노출

---

버튼

상황에 따라서 다른 형태를 띠다 보니까 최대한 구분해 주면 좋다.

 

1. 먼저, 버튼의 규칙이 필요하다

ex. 긍정을 우측에 할 거냐 아니면 긍정을 좌측에 할 거냐 정하기.

 

2. 주요 액션 버튼(Call To Action)

- 액션 버튼 중에서도 가장 도드라지게 해야 되는 것은 가장 힘이 있어야 한다.

- 콜 투 액션 버튼은 가장 크고 좀 명도가 진하게 가는 거고 그렇지 않은 것들은 약간의 차이점을 둔다.

 

결론

- 가장 기획적인 의도가 잘 드러나는 게 무엇인가가 좀 눈에 띄어져야 한다.

• 장바구니 상품 상세에서는 상품에 대한 결정에 대한 부분이 가장 두드러져야 되고,
• 장바구니나 주문서에서는 이제 어떤 주문자가 어떠한 것에 가장 관심이 있는지를 기획 입장에서 좀 레벨을 나눠서 제공해줘야 한다.

 

---

테이블

1) 일반 숫자 표시와 금액이 표시되는 게 다르다.

• 금액은 우측 정렬로 해서 콤마가 찍혀야 되는 상황이고 그렇지 않은 숫자는 중앙 정렬
• 문장으로 읽히는 것은 좌측 정렬
• 그냥 간단한 텍스트는 중앙 정렬

 

2) 테이블이 이어지는 경우에는 화살표를 이용해서 이어지게끔 작성한다.

 

3) 링크 텍스트 어떻게 표시할 것인지

• 보통은 하나를 찍어가지고 언더바를 표시한다.
  > 왜냐하면 링크가 다른 경우도 있을 수 있으니까. 사용자로 가는 거 하고 계좌로 가는 게 다를 수 있으니까.

 

4) 반복되는 테이블에 대한 표시 방법

 

 

5) 변경 히스토리 관리 예시

---

피드백 창

종류

=> 이것도 컨펌창, 얼럿창, 시스템 팝업, 레이어 팝업 이런 식으로 구분

 

---

참고

UI/UX 디자인 도구 활용

PPT 기반 설계가 일반적이지만, 피그마(Figma)나 파워목업(PowerMockup) 같은 도구를 활용하면 효율성을 높일 수 있다.

 

PowerMockup의 장점

• 파워포인트에서 직접 UI 컴포넌트를 사용할 수 있도록 지원
• 탭, 드롭다운 리스트, 버튼 등의 UI 요소를 쉽게 배치할 수 있음
• PPT를 기반으로 화면 설계를 진행하는 경우 유용함

대안: 피그마(Figma)

• 피그마는 다양한 무료 컴포넌트를 제공하므로 UI 재사용성이 뛰어남
• 디자인 팀과 협업할 때 특히 효과적