본캠프 15일차_디자인 카타, 숙제

[디자인 카타]

 

 

A는 결제 수단 등록과 같은 특정 작업을 즉시 수행해야 할 때 유용하다. 사용자가 특정 행동을 해야 하는 상황에서 간단하고 명확한 안내를 제공하여 즉각적인 이해와 실행을 돕는다. 예를 들어, A는 기존 사용자에게 새롭게 추가된 기능을 소개할 때 작은 팝업을 활용해 기능의 혜택을 간결하게 설명하고, 자연스럽게 사용을 유도할 수 있다. 관심이 없는 사용자는 쉽게 X 버튼을 눌러 팝업을 닫을 수 있다. 또한, 버튼만으로 기능을 명확히 전달하기 어려울 때 보완적인 설명을 제공하는 용도로도 적절하다. 다만, 이미 충분한 설명이 제공된 상황에서 불필요하게 중복된 팝업을 배치하지 않도록 주의해야 한다.

 

B는 앱의 핵심 기능을 소개하고, 사용자가 서비스의 전체적인 가치를 빠르게 이해하도록 돕는 데 적합하다. 특히, 새로운 사용자가 앱의 다양한 기능을 탐색할 때 효과적이다. 예를 들어, B는 특별 프로모션이나 이벤트를 안내할 때 핵심 문구가 포함된 페이지를 통해 짧은 시간 안에 중요한 정보를 전달하고, 사용자 참여를 유도할 수 있다. 하지만 온보딩 화면이 지나치게 길거나 복잡하면 사용자가 흥미를 잃고 중도 이탈할 가능성이 높다. 따라서 스킵 버튼을 함께 제공해 사용자가 원할 경우 빠르게 넘어갈 수 있도록 설계하는 것이 바람직하다.

 

온보딩 유형에 대한 아티클: https://brunch.co.kr/@830bfa34e0894d6/187

성공적인 웹 서비스 온보딩 UX를 위한 전략과 패턴

온보딩 머터리얼 디자인: https://m2.material.io/design/communication/onboarding.html

Material Design

 

 

---

[강의 정리]

 

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

 

1. 배리언츠와 프로퍼티 활용

✨ 버튼 컴포넌트 스택(Stack)

 

💡 스택(Stack)이란?

• 버튼을 상하 또는 좌우로 2개 이상 배치하는 경우를 말함
• 팝업, 일반 화면 등 다양한 UI 요소에서 사용됨

💡 피그마에서 스택을 만들면 좋은 이유

• 버튼을 여러 개 묶어 사용하는 경우가 많아 반복 작업을 줄일 수 있음
• 합성 컴포넌트로 활용하면 효율적인 디자인 관리 가능

📍 버튼 스택 컴포넌트 만들기

1️⃣ 버튼 컴포넌트 2개를 만든 후, 오토레이아웃 적용
2️⃣ 간격 조정 (8~16px 추천)
3️⃣ 오토레이아웃 프레임을 컴포넌트로 만들고 "Stack"으로 이름 변경

📍 스택에 네스티드 인스턴스 적용하기
1️⃣ Add Property 클릭 → Nested Instance 추가
2️⃣ 버튼 2개를 선택하여 적용
3️⃣ 결과: 스택 안의 버튼을 독립적으로 조작 가능

📍 스택의 방향 배리언츠 추가하기
1️⃣ Add Property → Variant 선택
2️⃣ 속성 이름을 방향으로 설정하고 기본값을 상하로 변경
3️⃣ 새로운 배리언츠 추가 후 속성값을 좌우로 설정
4️⃣ 오토레이아웃 방향을 변경해 적용

📍 너비 리사이징 옵션 조정

<hug contents로 설정하여 버튼 크기가 적절하게 조정되도록 함>

실습

---

✨ 버튼 컴포넌트 독(Dock)

💡 독(Dock)이란?

• 화면 하단에 고정된 버튼 영역
• 주요 행동을 유도하는 UI 요소 (예: 결제 버튼, 제출 버튼 등)

📍 독 컴포넌트 만들기

1️⃣ 버튼 컴포넌트를 만들고 오토레이아웃 적용
2️⃣ 배경색을 흰색으로 지정
3️⃣ 상하좌우 여백을 설정 후 컴포넌트로 저장 (Dock으로 이름 변경)

📍 버튼 스왑 인스턴스 적용
1️⃣ Add Property → Instance Swap 선택
2️⃣ 속성 이름을 Button으로 설정하고 기본 버튼 컴포넌트 선택
3️⃣ Preferred Value에 버튼 & 스택 컴포넌트 추가
4️⃣ 독 컴포넌트 안의 버튼을 Button 속성에 연결

📍 결과
✔️ 상황에 따라 버튼을 단일/스택 형태로 변경 가능
✔️ 하나의 컴포넌트로 다양한 버튼 구성을 빠르게 변경할 수 있음

 

실습

---

2. 포지션(Position)

💡 포지션이란?

• 화면 내 요소의 위치를 결정하는 방식
• 오토레이아웃과 함께 사용하면 정확한 레이아웃 구조 설계 가능

📍 포지션 속성의 종류
✅ 스태틱 (Static) → 기본 상태, 프레임 안에서 자유롭게 배치 가능
✅ 픽스드 (Fixed) → 화면 전체 기준으로 위치 고정 (스크롤 영향 없음)
✅ 앱솔루트 (Absolute) → 상위 컨테이너(오토레이아웃 기준) 내에서 위치 고정
✅ 스티키 (Sticky) → 스크롤에 따라 상단에 고정

 

✔️ 픽스드 & 스티키는 프로토타입 설정에서 변경 가능
✔️ 앱솔루트는 오토레이아웃 내부에서만 사용 가능

---

3.  오버레이와 모달

✨ 모달(Modal)과 팝업

💡 팝업이란?

• 현재 화면 위에 새로운 화면을 띄우는 것
• 대표적으로 윈도우 팝업, 레이어 팝업이 있음

📍 윈도우 팝업 (잘 사용하지 않음)

• 새로운 브라우저 창을 띄움
• 보안 문제 및 사용자 불편으로 인해 점점 사용 감소

📍 레이어 팝업 (현재 가장 많이 사용됨)

• 현재 화면 위에 코드로 만든 레이어(층)를 추가하는 방식
• UI/UX에서 가장 일반적인 팝업 형태

💡 모달(Modal)이란?

• 사용자가 행동을 취하기 전까지 뒤쪽 화면 조작 불가능한 UI
• 로그인 창, 확인 메시지 등 사용자 입력이 필요한 경우 사용
• 모달 창 뒤에는 반투명한 배경(라이트박스, Dim Layer)이 추가됨

📍 오버레이(Overlay)란?

• UI가 화면 위에 중첩될 때 사용되는 속성
• 모달뿐만 아니라 바텀시트, 플로팅 메뉴, 드롭다운 메뉴도 오버레이 속성 포함

✔️ 모달은 일반적으로 오버레이 속성을 가짐
✔️ 라이트박스는 모달의 배경을 흐리게 하는 요소

---

4. 다이얼로그 컴포넌트

💡 다이얼로그(Dialog)란?

• 사용자에게 중요한 선택을 요청하는 모달 UI
• 다이얼로그(dialog) = 대화(conversation)
• 사용자에게 선택지를 제공하고 행동을 유도하는 역할

📍 다이얼로그 vs 얼럿(Alert) 

✅ 다이얼로그 → 사용자가 선택지를 골라야 하는 상황 (예: "삭제하시겠습니까?")
✅ 얼럿(Alert) → 사용자가 반드시 확인해야 하는 메시지 (예: "연결이 끊겼습니다")

 

📍 다이얼로그의 주요 구성 요소
1️⃣ 컨테이너 → 다이얼로그를 감싸는 프레임
2️⃣ 헤더 → 제목, 부제목, 아이콘, 닫기 버튼 포함
3️⃣ 액션 버튼 → 사용자의 선택을 받는 버튼

 

📍 다이얼로그 설계 시 유의점
✔️ 선택지가 있는 경우라면 다이얼로그 사용, 단순 안내는 얼럿으로 구분
✔️ 사용자 흐름을 방해하지 않도록 최소한으로 사용
✔️ 필요한 경우 라이트박스를 활용해 사용자 집중 유도

---

✅ 최종 정리

✔️ 스택(Stack) → 버튼을 상하/좌우로 배치하는 방법
✔️ 독(Dock) → 화면 하단에 고정된 버튼 영역
✔️ 포지션(Position) → UI 요소의 위치를 결정하는 방식 (스태틱, 픽스드, 앱솔루트, 스티키)
✔️ 오버레이(Overlay) → 화면 위에 UI 요소가 중첩되는 상태
✔️ 모달(Modal) → 사용자 행동 전까지 뒤 화면 조작 불가능한 UI
✔️ 다이얼로그(Dialog) → 사용자 선택을 유도하는 모달 UI

 

---

 

[숙제]

 

🐧🐥HW. 제시된 서비스들의 주요 화면을 비교해보고, 다양한 관점으로 이야기하기

 

사진 pdf 파일

A4 - 2.pdf

2.21MB

A4 - 1.pdf

1.16MB