우리의 사월

*디자인 시스템 개선 사항:
사용 환경(웹/모바일)에 맞춰 타이포그래피를 이원화하여
가독성과 시각적 위계를 개선했음.
지나치게 크거나 일관성이 없던 제목 계층을 조정하고
본문 및 버튼 텍스트는 표준 가이드라인에 따라 재설정 했음.
반응형 환경에서도 브랜드 감성과 사용자 피로도를 고려한
실용적인 텍스트 시스템을 구축함.

*웹 디자인 개선 사항 (프로토타입 테스트 완료):
텍스트 위계 정돈과 시인성 강화를 통해
사용자 가독성을 높였으며,
콘텐츠 중심의 시각 흐름을 조정하여
메시지 전달력을 개선했음.
감성 요소(발바닥, 폴라로이드 등)는 브랜드 몰입도를 높이고,
UI 구조는 인터랙션 효율성과 정보 집중도를 향상 시켰음.
사용할 때 오른손 사용자 기준으로 최대한 불편함 없이 배치함.

*모바일 디자인 개선 사항 (프로토타입 테스트 완료):
사용자가 정보를 빠르게 인식할 수 있도록
텍스트를 최소화하고 주요 콘텐츠 중심으로 구조를 단순화했음.
과도한 정보 제공 대신, 핵심 요소에 집중해 사용자 주의를 유도하고,캐로셀과 아코디언 컴포넌트를 활용해 시각적 몰입과
사용성 모두를 고려했음. 모바일 환경에서도 감성적이고 직관적인 탐색이 가능하도록
정보량을 줄이고, 터치 기반 인터랙션에 최적화된 구조로 설계했음.

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?t=xoKk8AacseX6skkh-0

✅ UX/UI 디자인 시스템 핵심 원칙 정리

1. 명확성 (Clarity)

• 사용자에게 무엇을 해야 할지 헷갈리지 않게 명확히 안내함.
• 흐릿하거나 중복된 메시지, 불분명한 버튼 라벨은 피해야 함.

2. 일관성 (Consistency)

• 모든 화면에서 같은 요소는 같은 방식으로 작동해야 함.
• 컬러, 아이콘, 내비게이션 방식, 문구 톤도 통일시켜야 함.

3. 단순함 (Simplicity)

• 필요한 정보만 보여주고, 복잡한 구조나 과잉 요소는 배제함.
• 사용자의 선택 부담을 줄이기 위해 정보량을 줄이는 게 중요함.

4. 피드백 제공 (Feedback)

• 사용자의 행동(클릭, 입력 등)에 대해 즉시 시스템 반응을 보여줘야 함.
• 버튼 눌림 효과, 로딩 중 표시, 저장 완료 메시지 등이 포함됨.

5. 유연성 (Flexibility)

• 초보자부터 숙련자까지 다양한 사용자 니즈를 수용해야 함.
• 예: 단축키, 자동 완성, 옵션 변경 기능 등.

6. 사용자 중심 (User-Centered Design, UCD)

• 디자이너 관점이 아니라 사용자 입장에서 생각하고 설계함.
• 사용자의 맥락, 목표, 환경을 반영해야 진짜 쓰기 좋은 디자인이 나옴.

7. 예측 가능성 (Predictability)

• 사용자가 "이걸 누르면 이런 일이 생기겠지"라고 예상할 수 있어야 함.
• 인터랙션, 플로우, 버튼 위치 등이 직관적이어야 함.

8. 오류 방지 (Error Prevention)

• 실수를 미리 막는 디자인이 중요함.
• 예: 비활성화 버튼, 경고창, 실시간 유효성 검사

9. 가독성 (Readability)

• 텍스트는 쉽게 읽히고 빠르게 이해될 수 있어야 함.
• 적절한 폰트 크기, 행간, 컬러 대비, 줄바꿈 설계가 필요함.

10. 접근성 (Accessibility)

• 장애가 있는 사람도 불편 없이 이용할 수 있도록 배려함.
• 색상 대비, 키보드 네비게이션, 스크린 리더 호환 등을 고려함.

✅ UX 휴리스틱 10가지 원칙 (Jakob Nielsen)

✅ 휴리스틱 항목별 UI 컴포넌트 실제 사례

• 휴리스틱 원칙은 컴포넌트 설계, 인터랙션 설계, 그리드/배치 등 전반적인 디자인 전략에 깊이 연관됨
• 그리드 시스템은 일관성과 가독성, 시각적 안정감을 높이는 UI의 뼈대 역할을 하며, 디자인 시스템에 구조적으로 반영되어야 함
• 모바일 UI 우측 정렬은 사용자 습관과 손가락 도달 범위를 고려한 인간 중심 설계임

🔸 1. 시스템 상태 가시성 (Visibility of System Status)

• 로딩 스피너 / 진행바: 요청 상태를 사용자에게 즉시 알려줌.
• 토스트 메시지 / Snackbar: “삭제되었습니다”, “저장 완료” 등 즉각적인 피드백 제공.

🔸 2. 사용자와 시스템 간 일치 (Match between system and the real world)

• 카드 UI: 실생활에서의 카드, 포스터처럼 작동 (정보 단위 묶음)
• 아이콘: 휴지통, 검색 돋보기 등 실제 사물에서 가져온 은유적 디자인 사용

🔸 3. 사용자 제어와 자유 (User control and freedom)

• 뒤로 가기 버튼 / 닫기 아이콘: 실수로 들어간 화면에서 쉽게 탈출 가능
• Undo / 되돌리기 기능: Gmail의 ‘메일 보내기 취소’가 대표 사례

🔸 4. 일관성과 표준 (Consistency and standards)

• 탭바 위치/기능 통일: iOS, Android 모두 하단 탭에 홈/검색/마이 등 위치 유지
• 폰트, 컬러 스타일 가이드: H1~H3, 본문 텍스트 크기와 간격 규칙 통일

🔸 5. 오류 방지 (Error prevention)

• 입력 필드 유효성 검사: 비밀번호 입력 시 실시간 안내 메시지
• 비활성화된 CTA 버튼: 필수 입력이 완료되지 않으면 '다음' 비활성 처리

🔸 6. 인지보다는 인식 (Recognition rather than recall)

• 자동 완성 / 최근 검색어 추천: 기억보다 인지에 의존
• 툴팁 / 버튼 안 아이콘: 숨겨진 기능 설명을 시각적으로 제공

🔸 7. 유연성과 효율성 (Flexibility and efficiency of use)

• 단축 키 / 스와이프 제스처: 고급 사용자 대상 속도 향상
• 최근에 본 상품 / 최근 주문 기능: 반복 행동 최소화

🔸 8. 미니멀리즘 (Aesthetic and minimalist design)

• 불필요한 라벨 생략: ‘홈’ 아이콘에 굳이 텍스트 설명 없이도 인식 가능
• 그리드 기반 카드 배열: 정보 정렬성과 시각적 안정성 강화

🔸 9. 오류 인식, 진단, 복구 (Help users recognize, diagnose, and recover from errors)

• 에러 메시지에 원인 + 해결 방법 포함: 예) “비밀번호가 너무 짧습니다. 최소 8자 이상 입력해 주세요.”

🔸 10. 도움말과 설명서 (Help and documentation)

• FAQ / 툴팁 / 온보딩 안내: 사용자가 기능을 잘 이해하지 못할 경우 대비

✅ 그리드 설계 원칙을 디자인 시스템에 반영하는 방법

디자인 시스템에서 그리드는 단순히 격자 배치가 아니라 전체 UI 구조를 조직화하는 기준선임.

📐 핵심 구성 요소

🧱 시스템 적용 예시

📘 디자인 시스템 반영 방법

• Figma 기준: Layout Grid 설정으로 컬럼/거터/마진 지정
• 컴포넌트 위치, 정렬 기준은 컬럼 기준선에 맞춰 설계
• 버튼/폼/카드 등 주요 컴포넌트의 가로폭을 그리드 단위로 제한하여 정렬 유지
• Breakpoint 기준에 따라 컴포넌트를 몇 개 컬럼에 걸칠지 정의 (col-span 같은 개념 활용)

✅모바일 UI에서 우측 배치가 많은 이유

📱 사용자 습관과 인터랙션 위치 분석

• 오른손잡이 기준의 UX: 대다수 사용자(90% 이상)가 오른손을 사용하기 때문에, 오른쪽 하단 영역이 가장 쉽게 닿는 터치 영역임.
• 주요 액션은 손가락이 가장 빠르게 도달할 수 있는 위치에 배치하는 것이 일반적임.

🟦 우측 배치 UI 예시

🤳 터치 영역 기준 (Thumb Zone)

• 한 손 사용 기준, 오른쪽 하단은 "Reachable Zone", 왼쪽 상단은 "Hard to Reach Zone"
• 이 기준은 Google Material Design 가이드에서도 명시함

✅ 문화적 배경에 따른 색상과 디자인 선호도

• 디자인은 문화와 언어의 영향을 받는 사용자 습관의 집합체임.
• 글로벌 UX에서는 컬러, 타이포, 레이아웃, 피드백의 표현까지 모두 문화적 맥락에 맞춰 로컬라이징되어야 함.
• 한국 사용자는 안정적이고 정제된 색상과 구조, 미국 사용자는 강렬하고 행동 중심적인 인터페이스, 일본 사용자는 디테일과 컬러 다양성을 중요하게 여김.

✅ 색상에 대한 나라별 감정 반응

같은 색이라도 문화적 해석은 달라짐. 디자인 시스템을 글로벌로 확장할 경우 반드시 컬러 로컬라이징 전략이 필요함.

✅ 사용자 습관 기반 디자인 적용 예시

✅ 1. 토스의 ‘One Thing, One Page’ 란 무엇인가?

토스는 이를 디자인 시스템의 철학으로 삼고 있으며,
이 방식은 지금의 모바일 중심 UI/UX 트렌드, 마이크로 인터랙션, 미니멀 콘텐츠 흐름과 완전히 맞닿아 있음.

• 하나의 페이지에서 단 하나의 메시지나 행동만 유도하는 UI 구조
• 토스는 사용자의 혼란을 줄이기 위해 모든 화면에서 사용자가 “딱 하나”에 집중할 수 있도록 구성함
• 예시: 결제 요청 화면에서는 ‘얼마를 누구에게 보낼지’만 보여줌 → 이후 단계로 넘김

📌 핵심 구성 요소

• 군더더기 없는 구성: 정보 1개, CTA 1개
• 페이지 전환 구조: 한 번에 여러 정보를 보여주지 않고 순차적으로 유도
• 예측 가능한 흐름: 사용자가 어떤 행동을 해야 할지 고민하지 않게 만듦

✅ 2. Simplicity와의 연관성

Simplicity는 단순히 ‘간단하게 보인다’는 개념이 아님.
핵심만 남기고, 불필요한 요소를 제거해 사용자 사고를 줄이는 구조 설계.

→ 결국 Simplicity는 사용자 중심의 정보 설계 전략이며,
One Thing, One Page는 이를 UI 구조에 적용한 실현 방식.

✅ 3. Simplicity가 왜 가장 주목받는 UI 트렌드인가?

1) 인지 피로 최소화 (Cognitive Load Reduction)

• 사용자들은 빠르게 정보 처리하고 싶어함
• 복잡한 인터페이스는 이탈률을 높임
• Simplicity는 **“결정이 쉬운 UI”**를 만든다는 점에서 사용자 편의성과 직결됨

2) 모바일 환경 최적화

• 작은 화면에서는 정보 과잉보다 정보 집중이 더 효과적임
• ‘한 번에 하나만 보여주는 구조’는 스크롤 실수, 클릭 오류도 줄여줌

3) 행동 유도(Conversion) 최적화

• CTA 버튼의 효율은 ‘경쟁 요소가 없을 때’ 가장 높아짐
• One Thing 구조는 명확한 행동 흐름 설계에 최적화되어 있음

4) 브랜드 신뢰도 향상

• 혼란스럽지 않고, 정리된 디자인은 신뢰를 줌
• 특히 금융 서비스(토스)처럼 정확함과 신속함이 중요한 서비스에서 Simple UI는 곧 브랜드 가치임

✅ 인터랙션(Interaction)

인터랙션(Interaction)은 사용자의 행동에 **즉각적인 반응(피드백)**을 주는 것을 의미하며,
그 피드백이 명확하고 직관적일수록 UX 품질이 높아짐.

✅ 좋은 피드백 인터랙션 예시

1. 버튼 클릭 효과

• 버튼을 누르면 살짝 눌리는 듯한 애니메이션 + 컬러 변경
  → “내가 누른 게 맞다”는 감각적 피드백 제공

2. 폼 입력 중 실시간 검증

• 이메일 형식이 틀리면 빨간색 경고 메시지
• 올바르면 체크 아이콘으로 변경
  → 입력 오류를 미리 예방하고 학습 부담을 줄임

3. 파일 업로드 시 진행 표시

• 프로그레스 바가 실시간으로 % 표시
  → 사용자가 기다릴 수 있는 이유를 제공

4. 스와이프 삭제

• 왼쪽으로 밀면 ‘삭제’ 버튼이 슬라이드로 등장
  → 행동과 결과의 연결이 직관적임

5. 체크리스트 완료 시 애니메이션

• 체크 아이콘이 ‘퐁’ 하고 튀면서 색상이 변함
  → 사용자가 완료한 행동에 대해 보람을 느낌

6. CTA 클릭 후 상태 전환

• “다음” 버튼 클릭 → 버튼이 로딩 중으로 바뀌고 다음 단계로 전환
  → 사용자 흐름을 유도하며 불확실성을 줄임

✅ 좋은 Flexibility 예시

이들 사이트는 다양한 기기와 화면 크기에 최적화된 사용자 경험을 제공함.​

1. 토요타(Toyota) 공식 웹사이트
   • 설명: 토요타의 웹사이트는 유동적인 그리드 디자인을 통해 다양한 화면 크기에 맞게 콘텐츠가 자연스럽게 조정됨. ​wix.com+1Brunch Story+1
   • URL: https://www.toyota.com/
2. 유튜브(YouTube)
   • 설명: 유튜브는 화면 크기에 따라 이미지와 글이 재배치되는 반응형 디자인을 적용하여 다양한 기기에서 최적화된 사용자 경험을 제공함. ​네이버 블로그+1Brunch Story+1
   • URL: https://www.youtube.com/
3. 애플(Apple) 공식 웹사이트
   • 설명: 애플의 웹사이트는 적응형 디자인을 활용하여 다양한 기기에 최적화된 레이아웃을 제공하며, 이는 반응형 디자인과 유사한 사용자 경험을 제공함. ​wix.com
   • URL: https://www.apple.com/
4. 텐바이텐(10x10)
   • 설명: 텐바이텐은 해상도별로 콘텐츠 차이를 두어 다양한 기기에서 최적화된 사용자 경험을 제공함. ​wix.com+2Brunch Story+2Brunch Story+2
   • URL: https://www.10x10.co.kr/
5. 홍익대학교 공식 웹사이트
   • 설명: 홍익대학교의 웹사이트는 해상도별로 콘텐츠 차이가 없는 반응형 디자인을 적용하여 다양한 기기에서 일관된 사용자 경험을 제공함. ​Brunch Story
   • URL: https://www.hongik.ac.kr/

✅ 좋은 Accessibility 예시 / 개선 여지 있는 예시

접근성 디자인 시스템은 장애를 가진 사용자나 디지털 약자도 웹사이트나 앱을 불편 없이 사용할 수 있도록 돕는 설계 원칙과 컴포넌트의 집합임. 이 시스템은 다양한 신체적, 인지적 조건을 고려해 누구나 동등하게 접근 가능한 인터페이스를 만드는 것을 목표로 함.

예를 들어 시각 장애인을 위해 화면 리더(Screen Reader)가 인식 가능한 구조를 사용하고, 색약 사용자도 정보를 쉽게 인식할 수 있도록 색상 대비를 충분히 확보함. 마우스를 사용할 수 없는 사용자도 키보드만으로 주요 기능을 탐색할 수 있도록 포커스 흐름과 탭 순서가 정리되어야 함.

이러한 접근성 지침은 디자인 시스템에 기본값처럼 포함되며, 팀 전체가 동일한 기준에서 UI를 만들 수 있게 도와줌. 결과적으로 사용자 경험이 향상되고, 법적 기준도 충족하며, 다양한 상황의 사용자에게 브랜드 신뢰도를 높일 수 있음.

1. 좋은 예시 사이트– KRDS (대한민국 정부 디자인 시스템)

• 누구나 정부 서비스를 쉽게 사용할 수 있도록 접근성 중심으로 설계되었음.
• 색상 대비, 타이포그래피, 버튼 크기, 라벨링 등에서 국제 웹 접근성 표준을 따르고 있음.
• 맥북, 모바일, 다양한 화면에서도 유연하게 반응하며 정보를 일관되게 제공함.
• 사이트 주소: https://www.krds.go.kr

2. 접근성 개선 여지가 있는 사이트 

1. https://www.emart.com/

• 분류: 대형 유통사 쇼핑몰
• 이유: 시각장애인을 위한 대체 텍스트 누락, 키보드 네비게이션 미지원 사례 존재
• 개선 포인트: 스크린리더 호환성, 폼 요소 라벨링 강화

2. https://www.coupang.com/

• 분류: 대표 온라인 커머스
• 이유: 일부 페이지에서 배경색 대비 부족, 버튼 요소 설명 부족 지적 사례 존재
• 개선 포인트: 명도 대비 기준 충족, 텍스트 대체 설명 추가

3. https://www.yanolja.com/

• 분류: 숙박·여행 예약 플랫폼
• 이유: WCAG 기준에서 시각적 피드백 부족 및 키보드 접근성 제한 보고됨
• 개선 포인트: 키보드 접근성 향상, 모션 기반 피드백 보완

UX디자인에서 '다크 패턴(Dark Patterns)'이란 사용자의 의도와 다르게 행동하도록 유도하거나, 불편함을 통해 기업에게 유리한 선택을 하게 만드는 기만적 디자인 수단을 말함. 일상 속에서 다크 패턴은 종종 마케팅 전략이라는 이름 아래 실행되며, 사용자 경험을 해치기도 함.

✅ 쿠팡 사례를 중심으로 다크 패턴 정리

1. 복잡한 해지 플로우

쿠팡 와우 멤버십 해지 과정을 보면, 여러 번의 단계를 거치고, 해지 의사를 번복하게끔 유도하는 UI가 포함됨.
버튼 색상 대비나 텍스트 강조 방식에서도 사용자가 무심코 '유지'를 누르게끔 유도하는 흐름이 보임.
이는 ‘방해형 다크패턴(interruption-based)’으로 분류됨.

2. 자동 결제 유도

무료 체험 후 유료로 자동 전환되는 구조에서, 사용자가 충분히 인지하지 못한 채 결제가 이루어지는 경우가 많음.
해지 방법은 명확히 노출되지 않으며, 해당 구조는 ‘편취형 다크패턴(sneaking)’에 해당함.

3. 감정 유도형 표현

‘혜택을 포기하시겠어요?’ 같은 문구로 사용자의 감정을 건드려 멤버십 유지를 유도함.
이런 접근은 '수치심 유발(confirmshaming)' 유형으로 불림.

✅ 일상에서 자주 겪는 다크 패턴 사례

• 비교 방해형 패턴: 요금제를 일부러 복잡하게 제시하거나, 핵심 옵션을 숨기는 경우
• 광고 위장형 패턴: 콘텐츠처럼 보이는 광고 배치
• 기본 선택 설정: 유료 옵션이 기본 선택된 상태로 노출되어, 사용자 부주의를 유도함

✅ 프로덕트 디자이너가 취할 태도는?

다크 패턴이 종종 마케팅 목표와 UX 윤리의 충돌에서 비롯되는 경우가 많음.
디자이너 입장에서 아래와 같은 태도를 지향할 필요가 있음.

1. 사용자의 신뢰를 장기 자산으로 본다면

• 사용자가 스스로 선택했다고 느낄 수 있는 UI를 만들어야 함.
• 해지 과정이 어렵거나 사용자가 실수하게 설계된 흐름은 단기 이익은 줄 수 있지만 장기적으로 브랜드 신뢰를 잃게 됨.

2. 데이터에 기반한 사용자 보호 설계

• 'A/B 테스트'를 통해 성과만 보는 것이 아니라, 유저 행동의 배경과 감정 상태까지 분석해야 함.
• 심리적 압박으로 선택한 행동이 사용자 유지에 어떤 영향을 미치는지를 객관적으로 분석함.

3. 사내에서 UX 관점의 Advocacy 역할 수행

• "이 흐름은 사용자에게 혼란을 줄 수 있습니다", "과도한 리텐션 유도보다는 진정성 있는 정보 전달이 장기적으로 효과적입니다" 같은 발언을 할 수 있는 팀 분위기를 만드는 것도 디자이너의 리더십 중 하나임.

✅ Q1. 브랜드를 신뢰 기반으로 구축한 선한 UX 사례

1. 에어비앤비(Airbnb)

• 사용자와 호스트 모두에게 정직하고 신뢰할 수 있는 경험을 우선순위로 설계함.
• 예약 취소 시 명확한 정책 안내와 환불 가이드, 후기 기반의 실제 신뢰도 시스템을 도입하여, 서비스 불만보다 "다시 써도 되겠다"는 인식을 남겼음.
• 가입 시 과도한 마케팅 유도 없이 "게스트 중심"의 행동 흐름을 디자인했음.

2. 노션(Notion)

• 유료 전환 흐름이 매우 자연스러움. 강제하거나 숨기지 않음.
• 무료 플랜만으로도 충분히 쓸 수 있도록 허용한 뒤, 필요 시 자연스럽게 유료 기능으로 유도함.
• 사용자의 생산성을 신뢰 기반의 장기 관점으로 설계한 결과, 유저 자발적 확산 효과가 매우 강했음.

3. 던킨 US 앱

• 알림 설정, 쿠폰 수신 여부, 위치 권한 요청 등을 모두 사용자 선택에 맡기는 흐름으로 설계함.
• 강요 없이 유도하는 방식으로 브랜드에 대한 거부감을 최소화했음.

✅ Q2. 사용자 보호를 위한 UX 원칙을 정리

사용자 보호 관점에서 지켜야 할 UX 원칙을 아래와 같이 정리해볼 수 있음:

🟠 1. 정보 명확성 (Clarity)

• 사용자의 선택 앞에 모든 정보는 이해하기 쉬운 언어와 구조로 제공되어야 함.
• 예: 가격, 기능, 해지 방법 등을 숨기지 않음.

🟠 2. 자율성 존중 (Autonomy)

• 사용자가 원치 않는 행동을 하지 않도록 설계해야 함.
• 예: 체크박스 자동 선택 X, 해지 절차 복잡하게 만들지 않음.

🟠 3. 피로 최소화 (Friction Balance)

• 반복적인 확인 메시지, 경로 꼬기 등으로 사용자의 흐름을 방해하지 않음.
• 필요한 경우는 최소한의 경고 메시지로 정돈함.

🟠 4. 정직한 설득 (Honest Persuasion)

• 할인, 혜택을 말할 때도 중요 조건은 강조하고, 실제로 받을 수 있는 범위를 명시함.

🟠 5. 데이터 권한 존중 (Data Ethics)

• 개인정보 제공과 마케팅 수신은 별개로 구분하여 처리함.
• 사용자 요청 시 데이터 확인/삭제 절차를 명확하게 제공함.

✅ Q3. 조직 내에서 UX 관점을 마케팅 부서와 논의할 때 설득 포인트를 정리

마케팅 부서와 협업하거나 설득할 때는 성과 + 신뢰의 관점에서 접근하는 것이 효과적임.

💡 1. "리텐션은 신뢰에서 온다"는 논리 구조

• “사용자가 다시 돌아오는 이유는 기억에 남는 경험이 아니라 불쾌하지 않았던 경험이기 때문입니다.”
• “한 번의 클릭보다, 한 번의 만족이 더 오래갑니다.”

💡 2. 장기 관점의 수치 제시

• 단기 클릭율이 높더라도 해지율, 문의율, 이탈률이 높다면 그것은 '위험한 성공'임을 수치로 설명함.
• A/B 테스트를 통해 ‘좋은 UX가 전환율도 높인다’는 사례를 공유함.

💡 3. 사용자 불만 → 브랜드 이미지 하락 사례 제시

• 쿠팡, 네이버, 넷플릭스 등 실제 사용자 항의가 커진 이슈를 예로 들어, 다크패턴이 브랜드에 미치는 위험을 보여줌.

💡 4. 같은 목표, 다른 방법 제안

• 마케팅의 목적은 전환/가입이지만, UX는 그것을 ‘상처 없이’ 유도하는 방식임을 강조함.
• 같은 결과를 낼 수 있는 윤리적인 UX 설계안을 제시하며 대안 중심으로 설득함.

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=718-526&p=f&t=CBF50ERS3Vslxh5y-0

웹페이지 디자인 해보기

Figma 실습 링크: 

https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=614-532&p=f&t=CbXIT3svonNMbfRb-0

그리드 예제 실습하기

Figma 실습 링크: 

https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=614-561&t=CbXIT3svonNMbfRb-0

반응형 웹이나 앱 디자인을 다룰 때 ‘네이티브(Native)’라는 용어는 운영체제(OS)에 맞춰 최적화된 디자인이나 기술 구현 방식을 설명할 때 사용함. 디자인 문맥에서는 특히 플랫폼 고유의 규칙, 스타일, 인터랙션 방식에 맞춘 구성을 가리킴.

✅ ‘네이티브(Native)’라는 용어는 언제 사용하는가?

1. 앱 개발 방식 구분에서

• 네이티브 앱(Native App)
  → iOS는 Swift/Objective-C, Android는 Kotlin/Java 등 각 플랫폼 고유 언어로 만든 앱
  → 성능 최적화가 잘 되어 있고, 시스템 리소스를 직접 다룰 수 있음

🔹 예: “이 앱은 네이티브로 개발돼서 부드럽게 작동해요.”

2. UI/UX 디자인에서

• OS 고유의 인터랙션이나 컴포넌트를 사용할 때
  → 예: iOS의 Date Picker, Android의 Material Switch
  → 사용자에게 익숙한 플랫폼 UI 스타일을 그대로 반영한 디자인

🔹 예:

• “iOS 네이티브처럼 스와이프 백 제스처를 적용하자.”
• “버튼 스타일은 Android 네이티브 가이드를 따르자.”

3. 반응형 웹/웹뷰 기반 앱 디자인에서

• 웹 기반 인터페이스이지만 네이티브에 가까운 사용자 경험을 제공하려고 할 때
• 즉, 웹인데도 **‘네이티브처럼 느껴지는 UI/속도/전환’**을 의도할 때

🔹 예:

• “PWA지만 네이티브 느낌으로 스크롤 애니메이션을 넣자.”
• “네비게이션은 네이티브처럼 아래에 고정시켜야 해.”

✅ 네이티브 디자인의 특징

✅ 용어가 사용되는 상황 예시

✅ iOS에서의 네이티브 스타일 적용 예시

1. 탭 바(Tab Bar):
   • 설명: 화면 하단에 위치하며 주요 내비게이션 항목을 제공​
   • 예시 앱: '음악', '사진', 'App Store' 등​
2. 내비게이션 바(Navigation Bar):
   • 설명: 화면 상단에 위치하며 현재 화면의 제목과 뒤로 가기 버튼 등을 포함​
   • 예시 앱: '설정', '메시지' 등​
3. 알림 팝업(Alert):
   • 설명: 중요한 정보를 사용자에게 전달하거나 확인을 요청하는 표준 팝업​
   • 예시 상황: 앱에서 위치 정보 접근 권한을 요청할 때 나타나는 팝업​

✅ Android에서의 네이티브 스타일 적용 예시

1. 버튼(Button):
   • 설명: 머티리얼 디자인의 버튼 스타일을 따르며, 그림자와 색상으로 강조​
   • 예시 앱: '설정', '연락처' 등​
2. 플로팅 액션 버튼(Floating Action Button, FAB):
   • 설명: 화면 하단에 떠 있는 원형 버튼으로, 주요 액션을 강조​
   • 예시 앱: 'Google Keep'의 노트 추가 버튼​
3. 스낵바(Snackbar):
   • 설명: 사용자 액션에 대한 피드백을 화면 하단에 잠시 표시하는 메시지​
   • 예시 상황: 이메일 삭제 후 '실행 취소' 옵션을 제공하는 메시지​

✅ 일상에서 네이티브 요소를 접할 수 있는 상황

• 앱 권한 요청 팝업:
  • 설명: 앱이 카메라, 마이크, 위치 정보 등에 접근하려 할 때 시스템에서 제공하는 표준 팝업 뜸​
  • 특징: OS의 디자인 가이드라인을 따르며, 사용자에게 친숙한 인터페이스를 제공​
• 공유 시트(Share Sheet):
  • 설명: 앱 내에서 콘텐츠를 공유할 때 나타나는 기본 제공 공유 인터페이스​
  • 특징: 사용자가 설치한 앱 목록과 공유 옵션이 OS 스타일에 맞게 표시​
• 날짜 및 시간 선택기(Date & Time Picker):
  • 설명: 일정을 설정하거나 알람을 맞출 때 사용하는 표준화된 선택기​
  • 특징: 각 OS의 고유한 디자인과 인터랙션 방식 따름​

✅ 1. 해상도 다양성 문제에 대한 디자이너의 대응 전략

① 반응형 디자인 (Responsive Design)

• 화면의 너비(브레이크포인트)에 따라 UI 요소들이 유연하게 재배치되도록 설계함.
• CSS Flex/Grid, 퍼센트 단위, VW/VH 등으로 크기를 설정함.
• Figma에서는 Auto Layout, Constraints를 활용해 설계.

🔹 예:
PC에서는 3열 카드 → 태블릿에서는 2열 → 모바일에서는 1열로 바뀌는 그리드

② 적응형 디자인 (Adaptive Design)

• 기기 유형(예: 데스크탑/태블릿/모바일)에 따라 아예 다른 레이아웃을 설계하는 방식.
• 반응형보다 더 디테일한 컨트롤이 가능하지만, 뷰가 늘어나 작업량도 많음.

🔹 예:
모바일은 햄버거 메뉴, 데스크탑은 수평 메뉴바로 완전히 다르게 설계함.

③ 플루이드 레이아웃 (Fluid Layout)

• 해상도에 관계없이 요소의 크기를 비율로 조정하여 공간을 최대한 활용.
• 반응형보다 더 유연하게 확장되지만, 설계 시 텍스트나 UI 간격 충돌에 주의 필요.

✅ 2. Figma에서 실무적으로 대응하는 방법

✅ 디자인 시 고려해야 할 항목

• 최소 해상도 기준 설정 (예: 360px 모바일부터 시작)
• 터치 vs 클릭 인터랙션 구분
• 폰트 크기 및 간격의 유연함 → em, rem, sp 단위 고려
• 이미지나 아이콘의 스케일링 처리 → 벡터 또는 @2x/@3x 리소스 대응
• 접근성 요소 확보 → 버튼 간격, 탭 가능 영역 등

✅ 예시

예제 실습

클론디자인 카피

컴포넌트 이해해보기

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=558-4&p=f&t=jP5ExzBUjQALu61r-0

https://m3.material.io/components

✅ 1. Action (동작)

Button

• 정의: 텍스트 또는 아이콘이 들어가 사용자 액션을 유도하는 가장 기본적인 컴포넌트
• 예시: "확인", "취소", "다음" 등의 버튼
• 시각 예시 및 링크: https://m3.material.io/components/buttons/overview

Floating Action Button (FAB)

• 정의: 주로 화면 하단에 위치하는 원형 버튼으로, 하나의 주요 액션을 강조함
• 예시: 연필 아이콘을 눌러 글쓰기 시작
• 시각 예시 및 링크: https://m3.material.io/components/floating-action-button/overview

Icon Button

• 정의: 텍스트 없이 아이콘만으로 기능을 표현하는 버튼
• 예시: 공유, 북마크, 설정 등
• 시각 예시 및 링크: https://m3.material.io/components/icon-buttons/overview

Segmented Button

• 정의: 여러 선택지를 나열해 하나를 선택하게 하는 버튼 그룹
• 예시: "리스트 보기" / "카드 보기" 전환 버튼
• 시각 예시 및 링크: https://m3.material.io/components/segmented-buttons/overview

✅ 2. Communication (소통)

Dialog

• 정의: 중요한 메시지를 사용자에게 알리거나, 결정 또는 입력을 요구하는 팝업
• 예시: "이 글을 삭제하시겠습니까?"
• 시각 예시 및 링크: https://m3.material.io/components/dialogs/overview

Snackbar

• 정의: 사용자 액션에 대한 짧은 피드백을 화면 하단에 띄워주는 메시지
• 예시: "저장되었습니다", "삭제 취소"
• 시각 예시 및 링크: https://m3.material.io/components/snackbars/overview

Banner

• 정의: 앱의 주요 컨텐츠 위 상단에 고정되어 나타나는 지속적인 알림
• 예시: "인터넷 연결이 불안정합니다"
• 시각 예시 및 링크: https://m3.material.io/components/banners/overview

✅ 3. Containment (포함)

Card

• 정의: 이미지, 텍스트, 액션 등을 묶어서 보여주는 시각적 상자
• 예시: 뉴스 카드, 상품 카드 등
• 시각 예시 및 링크: https://m3.material.io/components/cards/overview

Bottom Sheet

• 정의: 하단에서 위로 슬라이드되어 표시되는 패널
• 예시: 앱 리스트, 장바구니 상세
• 시각 예시 및 링크: https://m3.material.io/components/bottom-sheets/overview

Navigation Drawer

• 정의: 왼쪽 또는 오른쪽에서 슬라이드되는 앱 전체 메뉴 영역
• 예시: 햄버거 메뉴 클릭 시 나오는 메뉴 리스트
• 시각 예시 및 링크: https://m3.material.io/components/navigation-drawer/overview

✅ 4. Navigation (내비게이션)

Top App Bar

• 정의: 앱 화면 상단에 위치하는 툴바, 제목 및 아이콘 포함
• 예시: 상단 타이틀 바 + 뒤로가기/설정 아이콘
• 시각 예시 및 링크: https://m3.material.io/components/top-app-bar/overview

Bottom App Bar

• 정의: 하단에 위치하며 FAB 또는 주요 내비게이션 포함
• 예시: 하단 내비게이션 버튼과 함께 FAB 추가 배치
• 시각 예시 및 링크: https://m3.material.io/components/bottom-app-bar/overview

Navigation Bar

• 정의: 앱 하단의 주요 경로(탭)를 나타내는 고정형 메뉴
• 예시: 홈, 검색, 마이페이지 등
• 시각 예시 및 링크: https://m3.material.io/components/navigation-bar/overview

Navigation Rail

• 정의: 태블릿 또는 데스크탑 환경에서 사용하는 세로 방향 내비게이션 바
• 예시: 좌측 사이드바 형태의 내비게이션
• 시각 예시 및 링크: https://m3.material.io/components/navigation-rail/overview

Tabs

• 정의: 동일 계층의 콘텐츠를 구분하는 수평 탭
• 예시: 전체 / 인기 / 최신 탭
• 시각 예시 및 링크: https://m3.material.io/components/tabs/overview

✅ 5. Selection (선택)

Checkbox

• 정의: 여러 항목 중 복수 선택이 가능한 체크 박스
• 예시: 전체 동의, 옵션 선택
• 시각 예시 및 링크: https://m3.material.io/components/checkboxes/overview

Radio Button

• 정의: 여러 항목 중 하나만 선택할 수 있는 옵션 버튼
• 예시: 카드 / 쿠페이 선택
• 시각 예시 및 링크: https://m3.material.io/components/radio-buttons/overview

Switch

• 정의: ON/OFF 상태를 전환하는 토글 스위치
• 예시: 알림 설정
• 시각 예시 및 링크: https://m3.material.io/components/switches/overview

Chips

• 정의: 짧은 텍스트나 아이콘으로 상태, 태그, 입력 등을 표현하는 컴포넌트
• 예시: #디자인, 필터 태그 등
• 시각 예시 및 링크: https://m3.material.io/components/chips/overview

✅ 6. Text Inputs (입력)

Text Field / Text Area

• 정의: 사용자로부터 텍스트를 입력받는 필드. Text Field는 한 줄, Text Area는 여러 줄 입력 가능
• 예시: 이름, 이메일, 문의내용 등
• 시각 예시 및 링크: https://m3.material.io/components/text-fields/overview

✅ 7. Layouts (레이아웃)

Divider

• 정의: 콘텐츠를 구분짓는 선. 수평 또는 수직 방향 모두 포함됨
• 예시: 리스트 항목 사이를 나눌 때 사용
• 시각 예시 및 링크: https://m3.material.io/components/dividers/overview

List

• 정의: 동일한 구조의 항목을 수직으로 나열한 요소
• 예시: 설정 화면 옵션 리스트
• 시각 예시 및 링크: https://m3.material.io/components/lists/overview

피그마 배운 기능 활용해서 포트폴리오 커버 만들기 / 과제 프로세스 문서화 하기

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=495-644&p=f&t=XZebvWaAAEdALTNn-0

피그마 기초 실습

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=495-344&p=f&t=XZebvWaAAEdALTNn-0

https://youtu.be/ZwWtk-l1tC8?si=MXgU0KR4_FQJeW51

✅ 디자인 실무 용어 통합 정리 (총 27개)

1. 디자인 시스템 (Design System)

일관된 디자인 언어와 컴포넌트를 정의하여 효율적인 디자인 작업과 통일된 사용자 경험을 제공하는 시스템임.
컬러, 폰트, 버튼, 간격, 인터랙션까지 규칙화하여 디자인과 개발 간 일관성을 높이는 역할을 함.

2. UX 리서치 (User Experience Research)

사용자 경험을 향상시키기 위해 사용자의 행동, 요구사항, 불편 요인 등을 조사하고 분석하는 과정임.
인터뷰, 설문, 로그 분석, 행동 관찰 등을 포함하며, 근거 있는 디자인 결정을 위한 기반이 됨.

3. 프로토타이핑 (Prototyping)

디자인 아이디어를 시각화하고 테스트하기 위해 인터랙션이 적용된 실제처럼 보이는 모형을 만드는 과정임.
Figma, ProtoPie 같은 툴을 활용하여 사용자 흐름이나 기능을 사전 검증할 수 있음.

4. A/B 테스트 (A/B Testing)

두 가지 이상의 디자인 버전을 사용자 그룹에 무작위로 제공하여 어떤 버전이 더 나은 성과를 내는지 실험하는 방법임.
클릭률, 전환율, 체류 시간 등 정량적 데이터를 통해 검증할 수 있음.

5. 디자인 스프린트 (Design Sprint)

짧은 기간(보통 5일) 동안 집중적으로 문제를 정의하고 해결 방향을 정한 뒤, 프로토타입을 제작해 사용자에게 테스트하는 디자인 방법론임.
구글벤처스에서 시작된 방식으로 빠른 문제 해결에 적합함.

6. 사용자 페르소나 (User Persona)

목표 사용자 군의 특성, 행동 패턴, 목표, 니즈 등을 대표하는 가상의 인물 모델임.
이해하기 쉬운 서사적 형태로 작성되어 디자인 타겟을 명확히 하고 공감할 수 있게 도움을 줌.

7. 와이어프레임 (Wireframe)

웹사이트나 앱의 구조와 레이아웃을 단순화된 형태로 시각화한 설계도임.
기능 배치와 정보 흐름을 빠르게 구상할 수 있는 초기 단계의 디자인 스케치임.

8. 디자인 가이드라인 (Design Guidelines)

디자인 작업 시 따라야 할 원칙과 규칙을 정의한 문서임.
폰트, 색상, 버튼 크기 등 UI 구성요소에 대한 표준화된 기준을 제공하여 일관성을 유지하게 함.

9. 브랜딩 (Branding)

제품이나 서비스의 정체성을 구축하고, 이를 통해 소비자에게 차별화된 가치와 인식을 심어주는 전략임.
로고, 색상, 톤앤매너, 브랜드 메시지 등을 포함하여 사용자 감정과 브랜드 이미지에 영향을 줌.

10. 접근성 (Accessibility)

장애가 있거나 다양한 환경에 있는 사용자들도 제품을 불편 없이 사용할 수 있도록 설계하는 것임.
색상 대비, 키보드 조작, 화면 읽기 호환성 등 포용적 UX 설계의 핵심 항목임.

11. 데이터 드리븐 (Data-driven)

디자인을 할 때 감각이나 추측보다는 정량적 데이터와 실증적 근거에 기반해 의사결정하는 방식임.
로그 분석, A/B 테스트 결과, 사용자 행동 패턴 등을 통해 설계 방향을 결정함.

12. 디자인 프린시플 (Design Principle)

팀 또는 브랜드가 추구하는 디자인 철학이나 의사결정 기준임.
모든 컴포넌트와 인터랙션, 콘텐츠 설계의 우선순위 판단 기준으로 작용함.

13. 심플리시티 (Simplicity)

기능을 줄이는 게 아니라 복잡하지 않게 보이도록 설계하는 것을 의미함.
심플하지만 충분한 정보를 제공하면서도 사용자의 인지 부담을 줄이는 UX 설계 방식임.

14. 마크업 (Markup)

디자인 시안을 실제 웹 구조에 맞게 구현하기 위해 사용하는 HTML, CSS, 구조 태그 작업을 뜻함.
디자이너와 프론트엔드 개발자 간 협업에서 구현 가능한 설계를 위한 기초 코드 작성 작업임.

15. UT (Usability Testing)

사용자가 실제로 제품을 사용해보며 문제점이나 흐름상의 어려움을 파악하기 위한 테스트임.
직접 관찰하거나 클릭 맵 등으로 사용자의 인지 흐름을 분석함.

16. 그래픽의 로띠 (Ratio)

시각 디자인에서 비율의 균형을 말함.
텍스트 대 이미지, 여백 대 요소 크기, 행간 등 시각적으로 안정된 화면을 만들기 위한 기준임.

17. 프로토파이 (ProtoPie)

인터랙션 중심의 프로토타입을 만들 수 있는 툴임.
Figma보다 더 정교한 움직임, 조건 분기, 스크립트 기반 시뮬레이션을 표현할 수 있어 제품 피드백용으로 적합함.

18. 미니 어드민 (Mini Admin)

디자인 시스템이나 내부 툴을 운영하기 위한 경량 관리자 페이지임.
디자이너가 직접 관리할 수 있는 간단한 UI 도구로 쓰이기도 함.

19. TDS (Toss Design System)

토스에서 운영하는 디자인 시스템의 이름임.
TDS에는 버튼, 색상, 폰트, 반응형 규칙 등이 포함되어 있어 디자인 통일성과 개발 효율성을 높임.

20. 휴리스틱 오류 (Heuristic Error)

디자인을 경험적으로 구성했지만 사용자의 직관과 맞지 않아 오류가 발생하는 경우임.
예: 누르면 될 줄 알았는데 반응이 없는 버튼 등

21. 임팩트 (Impact)

디자인 변경이나 기능 개선이 실제 성과 지표에 얼마나 영향을 주는가를 평가하는 기준임.
"작지만 임팩트가 큰 수정"이란 표현처럼 많이 쓰임.

22. 인터렉션 (Interaction)

사용자가 UI를 클릭하거나 스크롤, 탭 등 조작했을 때 화면이 반응하는 모든 시각적 행동을 말함.
전환 애니메이션, 피드백, 버튼 반응 등을 포함함.

23. UX 매트릭 (UX Metric)

UX 경험의 품질을 수치화해서 측정하는 지표임.
전환율, 클릭률, 이탈률, 평균 사용시간, 성공률 등 디자인 효과를 수치로 증명할 수 있는 도구임.

24. 퍼널 (Funnel)

사용자가 목표 행동(예: 구매, 가입 등)에 이르기까지 거치는 단계별 경로를 말함.
각 단계를 시각화하고, 어디서 이탈이 많이 일어나는지 분석하여 개선 포인트를 찾는 데 활용됨.

25. 심리스한 역량 (Seamless Capability)

디자인, 기획, 데이터 이해, 개발 협업까지 단절 없이 유기적으로 이어지는 능력을 의미함.
조직 안에서 다양한 역할을 넘나들며 문제 해결에 능한 디자이너를 평가할 때 쓰임.

26. 랠리 (Rally)

토스 내부에서 사용하는 디자인-개발 협업 도구임.
디자인 시스템 문서화, 작업 공유, 토큰 관리 등 팀 내 협업과 일관성을 관리하는 툴로 사용됨.

27. 토큰화 (Design Token)

색상, 폰트, 간격 등의 디자인 속성을 코드 변수로 관리하여 디자인 시스템을 개발과 연결시키는 기술적 접근 방식임.
예: --color-primary: #3182F6 같은 값이 토큰임.