본캠프 13일차_디자인 카타, 강의 정리, 숙제

[디자인 카타]

 

[A]

 

A는 화면에 총 6개의 카테고리와 하단에 '최근 이용 내역'을 확인할 수 있으며, 각 카테고리마다 항목명과 관련 그래픽이 있다. B는 5개의 카테고리가 있고, 각 카테고리마다 항목명과 짧은 설명, 작은 크기의 그래픽이 포함되어 있다. 처음에는 각 항목마다 짤막한 설명이 있는 B가 더 나아 보였다. 사용자가 항목명만 안다면 각 카테고리가 무슨 역할을 하는지 헷갈릴 수 있다고 생각했기 때문이다. 그러나 낯설고 새로운 분야의 앱이 아닌 금융 앱이고, '다른 은행 자산까지 싹-다 모아봐요!'와 같은 설명을 보여주는 화면이라면 짤막한 설명이 없어도 처음 앱을 접속한 사용자가 불편함을 느끼지 않을 것이라고 예상했다. 또 A와 달리 B는 '전체보기' 항목이 없어서 내가 찾으려는 항목이 카테고리에 없다면 바로 접근할 수 있는 방법이 없는 것 같아 불편해 보인다. 최근 이용 내역을 바로 확인할 수 있는 하단의 영역도 매력적으로 느껴졌다. 그렇기 때문에 A를 선택했고, 처음 앱을 접속했을 때 온보딩에서 가이드를 해주면 어떨까라는 생각도 들었다.

 

다른 금융 앱의 UI를 살펴봤다. 각각 A를 사용하는 곳도 있고, B를 사용하는 곳도 있다. 금융앱이 익숙한 나는 짤막한 설명이 없는 대신 활성화된 버튼이 좀 더 많은 A나 짤막한 설명과 함께 핵심적인 버튼이 있는 B도 사용하기 좋았다. 그러나 실제 화면을 보니 이미 알고 있는 기능이더라도 옆에 작은 부가 설명이 달려있는 것이 좀 더 안정감이 느껴졌다. 객관적인 자료도 찾아봤다. 

 

https://www.rightbrain.co.kr/wp-content/uploads/2024/05/UX-Discovery-16th_Rightbrain_2024.pdf

자료에서는 기존 IA의 메뉴명 / 기능명을 중심으로 표기된 전체 메뉴 레이블에서 벗어나 사용자가 수행할 행동을 예측하거나 받게 될 혜택을 명시하고, 설명을 위한 보조 레이블을 제공해 서비스에 대한 이해를 높이고, 행동을 유도함. 즉 구체적인 행동을 유도하는 텍스트와 보조 정보를 제공하며 시각적 단순함을 유지해야한다고 전하고 있다. 또 사용자의 앱 사용 행태와 입력 정보와 같은 정보를 분석해 홈 화면의 퀵 메뉴 구성과 전체 메뉴를 각각 다르게 제공하여 개인화 경험을 제공하고, 홈 화면을 사용자가 직접 설정하는 경우 연령과 성별을 기준으로 구성을 추천하여 선택의 고민을 줄여준다고 한다. 

 

---

 

 

[강의 정리]

🦠 UXUI 디자인 입문 - 6주차

 

1. 레퍼런스 분석

✅ 레퍼런스 분석이란?

•  UX/UI 디자인에서 참고할 사례를 수집하고, 이를 세부적으로 분류하여 장점과 단점을 파악하는 과정
• 왜 이 디자인이 좋은지 또는 나쁜지를 논리적으로 분석하고, 이를 바탕으로 인사이트를 도출하는 것이 핵심
• 좋은 레퍼런스를 찾는 것만큼, 이를 구조적으로 정리하고 의미를 찾는 것이 중요

✅ 레퍼런스 분석의 필요성

1. 문제 해결 능력 향상: 사용자의 불편한 경험을 개선하기 위해 필요한 인사이트를 얻을 수 있음.
2. 디자인 감각 및 트렌드 학습: 최신 UI 트렌드와 디자인 원칙을 자연스럽게 익힐 수 있음.
3. 좋은 디자인과 나쁜 UX 구별 가능: 무작정 따라 하는 것이 아니라, 디자인이 사용자 경험에 미치는 영향을 이해할 수 있음.
4. 사고력 확장 및 응용력 증가: 특정 서비스에서 발견한 좋은 UX를 다른 서비스에도 적용하는 응용 능력이 생김.

✅ 레퍼런스 분석 방법

레퍼런스 분석은 체계적인 방식으로 접근하는 것이 중요. 

이 순서로 진행

 

- 화면 구조 분석 (UI 요소 → 화면 분석)

서비스의 화면을 구성 요소 단위로 쪼개어 분석

UI는 크게 4가지 요소로 구성됨

1) 파운데이션 (Foundation): 색상, 폰트, 아이콘, 그리드 시스템 등 디자인의 기본 요소

2) 엘리먼트 (Element): 버튼, 뱃지, 탭 등 개별적인 UI 요소

3) 모듈 (Module): 리스트, 캐러셀, 네비게이션 바 등 여러 UI 요소가 조합된 구조

4) 페이지 (Page): 홈, 마이페이지, 상품 상세 페이지 등 실제로 사용자에게 보이는 화면

 

✅ 분석 예시
📌 카카오톡 채팅 화면을 분석해 본다면?

• 파운데이션: 노란색 컬러 + 둥근 폰트
• 엘리먼트: 말풍선, 이모티콘, 입력창
• 모듈: 채팅 리스트, 프로필 사진 + 닉네임 구조
• 페이지: 채팅방

---

- 디자인 원칙 기반 분석

단순히 화면 요소를 나열하는 것이 아니라, 디자인 원칙과 사용자 경험을 고려하여 평가하는 과정

• 가독성: 텍스트 크기와 대비가 적절한가?
• 명확성: 주요 기능이 직관적으로 보이는가?
• 일관성: 같은 패턴이 유지되고 있는가?
• 가이드 제공: 사용자가 자연스럽게 다음 행동을 유도받는가?
• 접근성: 장애인, 노인 등 다양한 사용자가 고려되었는가?

✅ 분석 예시
📌 넷플릭스의 콘텐츠 추천 화면

• 추천 UI가 카드형으로 제공됨 → 한눈에 보기 좋음 (가독성)
• 시청 중인 콘텐츠는 맨 위에 표시됨 → 자연스러운 유도 (가이드 제공)
• 검은 배경 + 흰색 텍스트 → 눈이 편안함 (명확성)

- 인사이트 도출 및 정리

분석한 내용을 바탕으로 내 프로젝트에 적용할 점을 정리

• 다른 서비스에서 본 UX 패턴을 내 서비스에 맞게 변형할 수 있는지 고민
• 불편한 UX 사례를 발견했다면, 어떻게 개선할지 정리

✅ 예시
📌 다른 서비스에서 발견한 UX 인사이트 적용하기

• 무신사: 상품 필터 기능이 직관적이지 않음 → 브랜드 필터를 더 눈에 띄게 변경
• 네이버 예약: 예약 후 취소 과정이 복잡함 → 버튼을 단순하게 배치

---

2. UX/UI 디자인 패턴

✅ UX/UI 디자인 패턴이란?

• 디지털 제품(앱·웹)에서 반복적으로 사용되는 검증된 UI·UX 디자인 방식
• 사용자가 익숙한 경험을 제공하는 것이 중요함

✅ UX/UI 디자인 패턴의 필요성

• 사용자 입장: 익숙한 패턴 → 사용성이 높아짐
• 디자이너 입장: 일관된 UI 시스템 구축 가능 → 개발 효율성 증가

---

✅ 대표적인 UX/UI 디자인 패턴

1) 온보딩 패턴 (Onboarding)

• 새로운 사용자가 서비스에 적응하도록 돕는 과정
• 📌 예시:
  • 넷플릭스 → 첫 로그인 시 취향 맞춤 추천
  • 핀터레스트 → 키워드 선택 후 개인화 피드 제공

✅ 적용 팁

• 튜토리얼은 자제 / 가치 보여주기 / 개인화 
• 3~5개 이내의 간결한 화면
• 핵심 기능만 설명
• 건너뛰기 옵션 제공

2) 로딩 패턴 (Loading)

• 콘텐츠 로딩 중 사용자 경험을 개선하는 요소
• 📌 예시:
  • 스켈레톤 로딩 (Skeleton Loading) → 네이버 뉴스, 인스타그램 피드
  • 로딩 애니메이션 → 카카오톡 메시지 전송

✅ 적용 팁

• 사용자에게 "지연이 아니라 진행 중"이라는 느낌을 줘야 함
• 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황이 생기지 않도록 주의. 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태

3) 검색 패턴 (Search)

• 사용자가 원하는 정보를 빠르게 찾도록 설계
• 📌 예시:
  • 구글 → 검색어 자동완성 제공
  • 네이버 지도 → 카테고리별 추천 검색

✅ 적용 팁

• 실시간 검색어 추천
• 필터 기능 추가
• 자동 완성 기능
• Empty view: 검색 결과가 없을 때, 추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법

4) 회원가입 패턴 (Sign-up)

• 사용자 이탈률을 줄이기 위해 가입 과정을 간소화
• 📌 예시:
  • 카카오톡 → 전화번호 입력 후 간단한 인증
  • 애플 로그인 → 개인정보 최소 입력

✅ 적용 팁

• SNS 간편 가입 옵션 제공
• 최소한의 정보만 요구

---

마무리

레퍼런스 분석을 통해 디자인 요소를 체계적으로 정리하고, UX/UI 패턴을 적용하면 더 직관적이고 사용성 높은 디자인을 만들 수 있음! 🚀

 

---

🦠 피그마 활용 심화 - 1주차

 

1. 다양한 환경에 대한 UI 차이 이해

1️⃣ 페이지 이동

• 웹: 주소창에 URL 입력하여 어디든 이동 가능
• 앱: 정해진 내비게이션 구조 내에서만 이동 가능
  → 웹에서는 로그인 없이 접근할 수 있는 페이지를 제한하는 등의 설계 필요

 

 

2️⃣ 뒤로 가기 방식

• 웹: 브라우저 자체의 '뒤로 가기' 버튼을 활용
• 앱: UI 상의 '뒤로 가기' 버튼을 통해 이동

 

 

3️⃣ 주요 메뉴 배치

• 웹: 일반적으로 화면 상단에 주요 메뉴 배치
• 앱: 하단 탭바로 주요 메뉴를 고정하여 이동을 편리하게 설계
  → 최근에는 모바일 웹도 하단 고정 메뉴를 채택하는 추세

 

 

4️⃣ 바텀 시트(Bottom Sheet) 사용성

• 앱: 자유롭게 활용 가능
• 웹: 브라우저 UI(하단 탭바 등)와 충돌 가능성이 있어 사용 어려움

---

 

✳️ OS(iOS vs Android)별 UI 차이

📌 앱 심사 가이드라인 차이

• 웹은 자유롭게 디자인 가능하지만, 앱은 앱스토어 심사 가이드라인을 따라야 함
  • 예: iOS에서는 소셜 로그인 시 애플 로그인도 반드시 포함해야 함

 

1️⃣ 홈 인디케이터(Home Indicator)

• iOS: 하단 홈 인디케이터가 UI를 가릴 수 있음 → UI 배치 시 고려 필요

안드로이드(좌) / ios(우)

 

2️⃣ 뒤로 가기 동작 차이

• 안드로이드: '뒤로 가기' 버튼이 OS 자체 기능으로 존재
  • History Back (이전 방문 페이지) vs Hierarchy Back (상위 단계 페이지) 중 적절한 방식 선택 필요
• iOS: 기본적으로 앱 내에서 뒤로 가기 버튼을 제공

---

 

✳️ UI 디자인의 원칙

✔ UI 디자인은 웹/앱/OS별 차이를 고려해야 하지만, 절대적인 규칙은 없음
✔ 사용자의 행동을 고려하여 최적의 UI를 설계하는 것이 중요함
✔ 기기별 특징을 이해하고, UX(User Experience) 관점에서 최적의 방법을 선택해야 함

 

---

2. 분기점(Breakpoint)과 그리드(Grid)

📍 반응형 디자인을 위한 필수 개념

 

1️⃣ 분기점(Breakpoint)

 

개념: 디스플레이 해상도에 따라 다른 화면을 보여주기 위한 기준점. '나뉘어 갈라지다'라는 의미를 가지며, 디자인을 나눌 때 기준이 됨

중요성: 스마트폰, 태블릿, 데스크탑 등 다양한 디바이스에서 최적화된 화면을 제공하기 위해 필요

일반적인 기준:

데스크탑: 가로 1024px 이상

태블릿: 가로 768px 이상, 1024px 미만

모바일: 가로 768px 미만 (최소 가로 사이즈 설정 권장)

고려 사항:

일반적인 해상도 외 다른 해상도 설정 가능: 단, 디바이스에 맞는 디자인이 출력되도록 주의

태블릿 해상도 대응 여부: 사용자 비율이 낮아 생략될 수 있지만, 특정 경우(온라인 강의 등)에는 고려해야 함

 

2️⃣ 그리드 시스템(Grid System)

 

개념: 화면에 디자인 요소를 배치하는 가이드라인. 가로/세로 선을 교차시켜 만들며, 디자인의 기준선 역할을 함

만드는 방법:

칼럼 구조: 유닛(콘텐츠 정렬 기준선)과 거터(유닛 사이 여백)로 구성

칼럼(Column) 수 결정: 일반적으로 데스크탑 기준 12개 칼럼 사용 (12 Column Grid).

자주 사용하는 그리드 예시:

960 - 12 Column Grid: 유닛 너비 60px, 거터 너비 20px

1200 - 12 Column Grid: 유닛 너비 76px, 거터 너비 24px

1440 - 12 Column Grid: 유닛 너비 96px, 거터 너비 24px

사용 이유: 균형감, 완성도, 일관성을 높이고, 정보 강조 및 가독성 향상

 

---

3. 반응형 vs 적응형 디자인

1️⃣

- 반응형 디자인 (Responsive): 해상도 변화에 실시간으로 반응하는 유동적인 디자인

- 적응형 디자인 (Adaptive): 해상도 변화에 즉각적으로 반응하지 않고, 초기 해상도에 맞춰 고정된 디자인

차이점: 해상도 변화에 대한 실시간 반응 여부

특징: 대부분의 웹사이트는 필요에 따라 반응형/적응형 혼합 사용

 

2️⃣

반응형 웹사이트 그리드 만들기 (Figma 실습):

1) 플러그인 설치: Responsive 플러그인 설치 (Figma Community 활용)

2) 데스크탑 그리드 만들기: 960x1080 프레임 생성 후 "Desktop"으로 이름 변경

Layout grid 설정: Columns, Count 12, Type Center, Width 60, Gutter 20

3) 태블릿, 모바일 그리드 만들기:

각각 768x1024("Tablet"), 320x640("Mobile") 프레임 생성

Layout grid 설정:

Tablet: Count 8, Type Stretch, Margin 20

Mobile: Count 4, Type Stretch, Margin 20

반응형 그리드 적용:

1920x1080("Display") 프레임 생성.

Responsive 플러그인 실행 후 Display 프레임 등록

Desktop, Tablet, Mobile 프레임 Input Frames에 등록

Display 프레임 크기 조절하며 반응형 변화 관찰

 

---

4. 정보구조도 (IA)와 플로우차트

목표: 기능/제품 방향 설정 후 디자인 및 개발을 위한 개요 및 흐름 정의, 개발자-디자이너-기획자 간 이해도 일치

정보구조도 (IA): 제품의 전체 구성 및 화면 간 관계를 나타내는 설계도 (층별 안내도)

플로우차트: 사용자가 제품을 사용하는 과정을 시각적으로 정리한 순서도 (오시는 길)

차이: 정보구조도는 전체 구조, 플로우차트는 사용자 경험 흐름에 초점

 

 

---

5. 와이어프레임

개념: 화면 구성과 흐름을 단순하게 표현한 것

만드는 이유: 팀원 간 생각 통일, 협업 원활화, 디자인 관리 용이, 불필요한 부분에 시선 분산 방지, 습관 형성 모델 실험

그리는 방법: 빠르고 효율적인 커뮤니케이션이 목적이므로, 최소한의 가독성만 확보되면 어떤 방식이든 무방함. 손으로 그리거나 컴퓨터를 사용할 수 있음

---

 

📌 결론

• UI 디자인은 웹/앱/OS에 따라 다르게 적용되어야 함
• 사용자의 환경에 맞춰 최적의 UX를 제공하는 것이 중요
• 브레이크포인트와 그리드를 활용한 반응형 디자인을 고려해야 함

---

 

[숙제]

 

HW. 레퍼런스 분석하기: 카카오톡