우리의 사월

✅ 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 기준에서 시각적 피드백 부족 및 키보드 접근성 제한 보고됨
• 개선 포인트: 키보드 접근성 향상, 모션 기반 피드백 보완