https://youtu.be/WlxfWI87nUE?si=lb4_ajqD23YmMIoc

 

 

📚 현장에서 얻은 데이터의 힘

1️⃣ 책상 위 데이터 vs 현장 데이터

  • 책상 데이터 (Desk Research)
    : 기존 리서치, 통계자료, 보고서, 인터넷 정보 등 2차 데이터를 분석하는 것.
    → 빠르게 전반적 경향성을 파악할 수 있지만,
    구체적인 타겟 사용자 행동과 맥락을 완전히 이해하기에는 한계가 있다.
  • 현장 데이터 (Field Research)
    : 실제 타겟 사용자와 만나 직접 관찰하고 질문하며 얻는 1차 데이터.
    → 직접 듣고, 보고, 느끼면서 숨겨진 니즈, 진짜 문제점을 발견할 수 있다.
    → 사용자도 몰랐던 "진짜 불편"을 찾을 수 있다.

2️⃣ 책상 위 고민만으로는 한계가 있는 이유

  • 아무리 머릿속으로 시뮬레이션해도, 사용자 환경·감정·상황의 복합성을 모두 예측할 수 없다.
  • 본인이 상상하는 문제와 사용자가 실제 느끼는 문제는 다를 수 있다.
  • 긴 시간 고민한다고 반드시 답이 나오지 않는다.
    시간도 비용이다. 틀린 방향으로 오래 고민하는 것은 위험하다.

3️⃣ 진짜 인사이트는 현장에서 나온다

  • 관찰을 통해 말로 표현되지 않는 행동을 포착할 수 있다.
    (예: 버튼은 찾지 못했지만 그냥 나가버리는 행동)
  • 직접 인터뷰를 통해 표면에 드러나지 않은 감정을 끌어낼 수 있다.
    (예: "몰랐어요" 대신, "귀찮아서 포기했어요" 같은 진짜 이유)
  • 현장 맥락을 파악해야 제품이 '언제, 어디서, 왜' 사용되는지를 정확히 이해할 수 있다.

4️⃣ 효율적인 리서치 전략

전략 설명
타겟 뾰족화 '모든 사용자'가 아니라 '진짜 사용할 가능성이 높은 사용자'만 명확히 설정한다.
소규모 / 짧은 인터뷰부터 시작 5~10명만 만나도 주요 패턴이 드러난다. 빠른 1차 리서치를 실행한다.
빠른 정리 / 빠른 수정 리서치 후 바로 인사이트를 메모하고, 필요하면 질문이나 관찰 방법을 즉시 수정한다.
현장 중심 접근 가능하면 실제 사용 환경, 실제 행동을 관찰한다. (사무실, 카페, 집 등)
반복하면서 좁혀가기 리서치 → 인사이트 → 아이디어 → 또 리서치. 이런 짧은 사이클을 반복한다.

5️⃣ 이번 인사이트를 통해 얻은 교훈 ✍️

  • 오래 고민하는 것보다 현장에 나가 한 번 부딪히는 것이 훨씬 큰 가치를 만든다.
  • 완벽한 리서치를 목표로 하지 않고,
    빠르고 작게 실험하며 점진적으로 발전시켜야 한다.
  • 생각으로만 문제를 규정짓지 않고,
    사용자의 실제 행동과 말로 문제를 정의해야 한다.

 

 

🎯 효율적인 UX 리서치를 위한 3단계 전략

1단계: 타겟 정의 – 누구에게 물어볼 것인가? (Who)

질문 목적
이 서비스를 가장 자주, 깊게 쓸 사람은 누구인가요? 핵심 사용자 정의
이탈했던 사용자에게 다시 와달라고 한다면 누구부터 설득할까? 이탈 유저 타겟 설정
신규 vs 복귀 vs 기존 중 가장 중요한 전환 지점은 어디인가요? 페르소나 또는 세그먼트 분류

🔍 Tip: 타겟이 애매하면 질문도 애매해짐.
리서치 전에 꼭 페르소나 1~2명만 간단히 만들어보고 시작하자.
예: “3일만 쓰고 떠난 20대 여성”, “자주 사용하는 40대 직장인”

 

2단계: 데이터 정의 – 어떤 걸 알아내야 할까? (What)

알아내고 싶은 것 데이터 종류 예시 질문
왜 이탈했는가 정성 데이터 "마지막으로 사용한 날, 어떤 기능을 쓰셨나요?"
어떤 기능이 유용했는가 기능별 사용 피드백 "가장 자주 쓰는 기능은 무엇인가요? 왜인가요?"
어떤 감정이 들었는가 감성·경험 "앱을 사용할 때 기분이 어땠나요?"

🔍 Tip: "사용자 만족도"라는 말은 너무 두루뭉술해.
“어느 기능에서 만족했는가?”처럼 정확한 측정 항목을 설정하자.

 

3단계: 질문 구조 설계 – 어떻게 질문할까? (How)

잘못된 질문 ❌ 더 나은 질문 ✅
“서비스 어땠어요?” “무슨 상황에서 이 앱을 켜시나요?”
“왜 쓰셨나요?” “마지막으로 쓴 이유가 뭔가요? 그날 뭐 하고 있었나요?”
“불편한 점 있으셨어요?” “최근에 앱을 쓰다 멈춘 순간이 언제였나요?”

✍ 질문 설계 팁:

  • 닫힌 질문보다 열린 질문: Yes/No보다는 경험을 묻자.
  • 순차적 흐름: 사용 전 → 사용 중 → 사용 후 순서로 묻자.
  • 컨텍스트 중심: “언제, 어디서, 누구랑, 어떤 기분으로?”를 항상 염두에 두자.

 

✅  정리: 좋은 질문을 위한 체크리스트

  • 타겟은 명확히 설정했는가?
  • 측정하고 싶은 지표가 구체적으로 정해졌는가?
  • 질문이 너무 넓거나 모호하지 않은가?
  • 감정과 행동을 동시에 포착할 수 있는가?
  • 인터뷰 대상자의 실제 경험을 중심으로 구성했는가?

 

🌱 적용 예시 (리브루 프로젝트 기준)

목표: 복귀 유저의 첫 3일 이탈 원인 파악
타겟: 최근 2주 내 다시 접속했지만, 3일 이내 이탈한 사용자
질문 예시:
“다시 접속하신 날, 어떤 화면에서 가장 오래 머무르셨나요?”
“그때 기대했던 것과 실제 경험한 것은 어떻게 달랐나요?”
“보상을 받았을 때 어떤 기분이 드셨나요?”

 

 

https://youtu.be/MstP7noVX78?si=zxtLZtb9Vgmb2xPu

 

 

📖 소셜 딜레마(Social Dilemma)란 무엇인가

1. 소셜 딜레마 정의

소셜 딜레마란,
"사람들을 연결하고 이롭게 만들려고 했던 소셜 미디어 기술이 오히려 인간 사회를 파괴하고 있는 모순"

  • 기술이 사람을 연결하는 듯 보이지만, 실제로는 분열, 조작, 중독을 초래한다.
  • 좋은 의도로 시작된 서비스가 '광고 수익 극대화'를 목표로 하면서
    점점 인간 심리 해킹에 초점을 맞추게 된 결과다.

 

2. 소셜 딜레마의 핵심 문제

문제 설명
데이터 수집과 행동 조작 우리의 클릭, 머무는 시간, 좋아요, 스크롤 속도까지 분석하여, 사용자가 더 오래, 더 많이 플랫폼에 머물게 조작
개인화 추천의 과잉 사용자가 보고 싶어하는 것만 보여주면서, 생각의 편향(Bias)을 강화
중독 설계 '알림', '추천 영상', '무한 스크롤' 등 설계로 끊임없이 사용자를 잡아두려 함
사회 분열 심화 각자에게 다른 정보를 보여줘 사회적 공감대 파괴, 극단적 정치/사회 분열 조장
정신 건강 악화 SNS 사용량 증가와 함께 우울증, 불안증, 자살률이 높아지는 현상과 연관

 

3. 데이터 해킹이 인간 삶에 미치는 영향

  • 자기결정권 약화
    (내가 선택하는 게 아니라, 추천받고 길들여진 걸 선택하는 삶)
  • 생각의 편향 강화
    (다른 의견을 볼 기회조차 차단되어, 극단적 세계관에 빠짐)
  • 시간 착취
    (원래 계획했던 것보다 몇 배 더 오래, 무의식적으로 플랫폼에 갇힘)
  • 정체성 혼란
    (좋아요 수, 댓글 반응에 의해 자존감이 좌우되는 구조)
  • 사회 신뢰 붕괴
    (모두 다른 사실을 '진실'로 믿게 되어 사회적 대화가 불가능해짐)

 

그래서, 우리는 어떤 디자인을 해야 하는가

잘못된 방향 우리가 지향해야 할 방향
사용자를 최대한 오래 머물게 하려는 설계 사용자가 필요할 때 와서, 필요만큼 이용하고 만족하게 하는 설계
클릭과 머무는 시간을 극대화하는 설계 목적 달성가치 경험을 빠르게 도와주는 설계
사용자의 감정을 자극하고 조종하는 설계 사용자가 스스로 결정하고 스스로 만족하게 돕는 설계
정보를 과잉 추천하여 편향시키는 설계 다양한 관점을 제시하여 건강한 탐색을 돕는 설계
무한히 이어지는 피로한 경험 사용자가 명확하게 완료감을 느끼게 하는 경험

 

 

📖 UX 디자이너가 가져야 할 현실적 중심

1. 우리는 비즈니스 세계에 존재한다

  • UX디자이너는 '사익'을 추구하는 조직 안에서 일한다.
  • 우리에게 요구되는 것은 좋은 의도가 아니라, 구체적인 성과다.
  • 따라서 수익성과 성장 지표를 무시하고는 설계할 수 없다.
  • "선의만으로는 월급을 받을 수 없다."

    핵심: UX는 '성과'를 낼 수 있어야 한다.

2. 그러나 인간을 도구로만 보면 안 된다

  • "사람을 클릭 수, 체류 시간, 전환율로만 본다면", 우리는 소셜딜레마가 경고하는 문제를 반복하게 된다.
  • 사용자가 '조작당했다'고 느끼는 순간, 브랜드 신뢰는 무너진다.
  • 우리가 지켜야 할 것은 인간의 자유 의지와 선택권이다.

    핵심: 사용자는 '통제 대상'이 아니라 '존중해야 할 존재'다.

 3. 좋은 UX는 유혹하지만, 강제하지 않는다

  • 우리는 사용자의 선택을 부드럽게 유도할 수 있다. (ex. 추천, 강조)
  • 그러나 절대적으로 "몰래", "은폐", "강요"하는 설계는 지양해야 한다.
  • 유혹과 강제 사이에는 선명한 선이 있다. 이 선을 넘어서는 안 된다.

    핵심: "유혹은 가능, 기만은 금지"

4. 나의 기준은 "납득 가능한 설계"다

  • 사용자가 경험을 되돌아봤을 때,
  • "아, 그땐 내가 필요해서 선택했지"라고 스스로 느끼게 해야 한다.
  • "속았네", "당했네"라고 느끼는 순간, 신뢰는 회복 불가능해진다.

    핵심: "설계는 사용자의 자기결정감을 지켜야 한다."

5. 윤리와 비즈니스는 '긴장 관계'다

  • 윤리만 주장하면 성장이 막히고,
  • 비즈니스만 추구하면 브랜드가 망가진다.
  • 진짜 프로페셔널은 이 둘 사이에서 균형(Balance)을 잡는 사람이다.

    핵심: "우리는 '성장하는 서비스'와 '존중받는 사용자'를 동시에 만든다."

 

 

📌 소셜딜레마형 다크패턴 피하기 위한 UX 디자인 체크리스트

1. 사용자의 자유를 존중하고 있는가?

  • 사용자가 명확하게 선택할 수 있게 하고 있는가?
  • 사용자가 쉬운 방법으로 거절할 수 있도록 설계했는가?
  • 사용자의 의사 결정을 교묘하게 조작하거나 유도하고 있지 않은가?

    🎯 예시: “취소하기” 버튼을 일부러 흐릿하게 만들지 않는다.

2. 사용자의 시간을 존중하고 있는가?

  • 사용자가 빠르게 원하는 목표를 달성할 수 있게 돕고 있는가?
  • 무한 스크롤, 자동재생 등 중독성 강제 소비 구조를 무비판적으로 넣지는 않았는가?

    🎯 예시: '다음 동영상 자동재생'은 기본 OFF, 사용자가 ON할 수 있게 설정.

3. 정보는 투명하게 제공하고 있는가?

  • 사용자가 내 데이터가 어떻게 사용되는지 쉽게 알 수 있도록 되어 있는가?
  • 알림, 추천 등의 목적을 솔직하게 설명하고 있는가?

    🎯 예시: "당신의 관심사에 맞춰 보여드리는 추천입니다" 문구 명시.

4. 감정 자극에 의존하고 있지 않은가?

  • 공포, 불안, 조급함을 고의로 자극하는 알림/메시지를 쓰고 있지 않은가?
  • 긍정적인 동기 부여로 행동을 유도하고 있는가?

    🎯 예시: “놓치면 후회할지도 몰라요!” 대신 “필요할 때 언제든 다시 찾아오세요.”

5. 다양한 관점을 허용하고 있는가?

  • 사용자가 다양한 정보와 의견을 탐색할 수 있도록 설계했는가?
  • 알고리즘이 사용자를 극단적 편향으로 몰고 가는 걸 방지하고 있는가?

    🎯 예시: 추천 영역에 “다른 관점 보기” 옵션 추가.


요약
✅ "사용자가 스스로 생각하고 결정할 수 있도록 돕는다."
✅ "시간을 빼앗는 것이 아니라, 시간을 아껴주는 UX를 만든다."
✅ "진짜 가치 경험을 중심으로 디자인한다."

 

 

 

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

명확성 (Clarity) 사용자가 무엇을 해야 하는지 즉시 이해할 수 있도록 명확한 정보와 구성 제공
일관성 (Consistency) 컴포넌트, 컬러, 인터랙션, 언어 톤 등을 전체 UI에 걸쳐 동일하게 유지함
단순함 (Simplicity) 핵심 정보만 제공하고 불필요한 요소는 제거하여 인지 부담을 줄임
피드백 제공 (Feedback) 사용자 행동에 즉각적이고 직관적인 반응을 제공 (버튼 클릭, 입력 확인 등)
유연성 (Flexibility) 초보자와 숙련자 모두 사용할 수 있도록 다양한 사용 방식을 수용함
사용자 중심 (UCD) 사용자 관점에서 생각하고 설계하여 실제 사용 환경과 맥락을 반영함
예측 가능성 (Predictability) 사용자 행동에 대한 결과가 미리 예상 가능하도록 설계함
오류 방지 (Error Prevention) 실수 가능성을 줄이기 위한 경고, 유효성 검사, 버튼 비활성화 등의 장치 제공
가독성 (Readability) 글자가 잘 보이고 빠르게 이해될 수 있도록 크기, 색상, 여백, 줄간격 등을 최적화함
접근성 (Accessibility) 장애가 있는 사용자도 문제없이 사용할 수 있도록 색상 대비, 키보드 탐색, 보조기기 대응 등을 고려함

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)

 

“사용자가 헷갈리지 않도록, 실수하지 않도록, 빠르게 원하는 목적을 달성할 수 있도록 디자인하는 것이 휴리스틱 원칙의 핵심.”

번호 원칙 이름 요약 설명
1 시스템 상태 가시성
(Visibility of system status)
사용자가 지금 어떤 상태인지 항상 알 수 있게 피드백 제공
2 사용자와 시스템의 일치
(Match between system and the real world)
현실 세계 언어와 논리에 맞는 UI 제공 (직관적, 친숙한 표현)
3 사용자 제어와 자유
(User control and freedom)
실수했을 때 되돌릴 수 있는 자유 제공 (뒤로가기, 취소 등)
4 일관성과 표준 준수
(Consistency and standards)
동일한 구성 요소는 항상 같은 방식으로 작동해야 함
5 오류 방지
(Error prevention)
문제가 발생하기 전에 미리 방지할 수 있도록 설계
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)
에러 메시지는 원인과 해결 방법을 함께 안내
10 도움말과 문서 제공
(Help and documentation)
복잡한 기능일 경우 사용자 가이드를 쉽게 접근 가능하게 제공

 

✅ 휴리스틱 항목별 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 구조를 조직화하는 기준선임.

📐 핵심 구성 요소

Column 콘텐츠가 들어갈 수 있는 실제 영역
Gutter 열 사이 간격 (정보 구분, 시각적 여백)
Margin 좌우 바깥 여백으로 콘텐츠 중심 정렬 유도
Container 전체 그리드를 감싸는 기준 영역 (반응형 기준 프레임)

🧱 시스템 적용 예시

컬럼 수 데스크탑 12, 태블릿 8, 모바일 4
간격 Gutter: 16px / Margin: 24px
단위 시스템 8px spacing rule 기반

📘 디자인 시스템 반영 방법

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

 

 

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

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

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

🟦 우측 배치 UI 예시

위치 사용 컴포넌트
우측 하단 Floating Action Button (FAB) → 글쓰기, 추가, 등록 등
우측 상단 설정, 알림, 장바구니 아이콘 등
스와이프 UX 오른쪽에서 왼쪽으로 밀어서 삭제, 왼쪽에서 오른쪽으로 저장

🤳 터치 영역 기준 (Thumb Zone)

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

 

 

 


 

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

  • 디자인은 문화와 언어의 영향을 받는 사용자 습관의 집합체임.
  • 글로벌 UX에서는 컬러, 타이포, 레이아웃, 피드백의 표현까지 모두 문화적 맥락에 맞춰 로컬라이징되어야 함.
  • 한국 사용자는 안정적이고 정제된 색상과 구조, 미국 사용자는 강렬하고 행동 중심적인 인터페이스, 일본 사용자는 디테일과 컬러 다양성을 중요하게 여김.
지역 대표 색상 선호도 선호 스타일 특징 및 UX 디자인 적용 예
한국 저채도 톤
(그레이시 베이지,
우드, 네이비 등)
미니멀, 조화로운 비례감 정제된 톤과 깔끔한 여백을 선호함. 감정 표현은 절제되고 안정적인 느낌을 중요시함. 너무 화려하거나 눈에 띄는 컬러는 오히려 거부감 유발 가능.
일본 원색 계열
(Red, Blue, Green),
전통색(和色)
다채롭고 미세한 디테일 중심 전통적 색감(붉은색, 황금색 등)과 현대적 팝 컬러를 동시에 사용함. 시각적 요소가 많지만 잘 정돈된 정보 설계를 중요시함. 레이아웃은 복잡해도 ‘균형감’을 중시함.
미국 대비가 뚜렷한 색상
(Red, Blue, Black, Yellow)
대담한 강조, 큰 타이포, 액션 중심 강한 메시지 전달과 눈에 띄는 CTA, 브랜드 개성 강조가 중요함. 텍스트와 버튼 컬러의 대비, 애니메이션 효과, 사용자 참여를 유도하는 인터랙션 선호
중국 레드, 골드, 블루, 자주 상징적 컬러 중심(행운, 번영, 귀족 등) 색상은 강한 문화적 의미를 지니며, 의미 있는 아이콘과 비주얼을 중시함. UX에서는 **관습적으로 정해진 흐름(계단식 정보 구조)**이 자주 쓰임.
유럽권 내추럴 톤
(Olive, Stone, Ivory),
검정+흰색 극단
기능성과 예술성 균형 정보보다 ‘브랜드 무드’에 더 높은 가치 부여. 인터랙션보단 정적인 구성 선호. 레이아웃 여백과 타이포그래피가 디자인의 핵심임.

 

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

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

색상 한국 미국 일본
빨강 경고, 정열, 위험 열정, 에너지, 사랑 전통의 상징색, 축제, 생명
파랑 신뢰, 평온, 기업적 냉철함, 전문성 청결함, 수려함, 자유
노랑 경쾌함, 명랑함 주목, 경고, 낙관적 어린이용, 희망, 독창성
검정 고급, 전문, 권위 시크, 강인함, 마초적 고요함, 엄숙함, 중후함
흰색 순수함, 청결, 여백 신선함, 중립 장례식 상징, 신성함

 

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


UX 적용 항목 문화적 고려 요소 설명
버튼 색상 미국: CTA는 Red/Orange
한국: CTA는 안정된 Green/Blue
클릭 유도 색상이 문화권에 따라 효과가 달라짐
피드백 표현 한국: 감정 표현 절제 (예: “성공적으로 저장되었습니다.”)
미국: 감정 표현 강조 (예: “Awesome! You’re all set!”)
문구 톤앤매너도 문화적 습관에 따라 조정 필요
텍스트 여백 한국/일본: 여백 강조, 정보 분리 필요
미국: 더 빠른 액션 중심 구성
여백 비율과 글머리 정보량도 문화차 존재
UI 복잡도 일본: 정보량이 많아도 균형 중시
한국: 중간 정도 정보량 선호
미국: 액션 중심, 빠른 접근 구조 선호
디자인 정보량을 단순하게 줄이는 것만이 정답은 아님

 

 

 


 

 

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

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

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

📌 핵심 구성 요소

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

 

✅ 2. Simplicity와의 연관성

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

One Thing, One Page 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 품질이 높아짐.

용어
정의 및 설명 예시
Hover 사용자가 마우스를 컴포넌트(버튼, 링크 등)에 올렸을 때 발생하는 상태 변화 버튼 배경색이 살짝 진해짐, 툴팁이 뜸
Click / Tap 마우스 클릭 또는 터치 스크린 탭을 의미 ‘다음’ 버튼을 클릭했을 때 다음 단계로 이동
Focus 입력창 등에 커서가 들어간 활성 상태 텍스트 필드에 포커스되면 테두리가 파란색으로 강조됨
Active 클릭하고 있는 순간, 눌리고 있는 상태 버튼을 누르고 있을 때 진하게 표현됨
Disabled 사용할 수 없도록 비활성화된 상태 입력 조건이 충족되지 않으면 버튼이 흐려짐
Loading 데이터를 처리 중일 때 사용자에게 대기 상태를 알려주는 피드백 로딩 스피너, 진행 바
Feedback 사용자 행동에 대한 시스템의 반응 저장 완료 메시지, 에러 문구, 진동 효과 등
Microinteraction 아주 작은 단위의 인터랙션 (한 번의 동작과 반응) 좋아요 버튼을 눌렀을 때 하트 애니메이션
State Change 컴포넌트의 상태가 변화하는 것 (hover → active → success 등) 버튼의 색이 상태에 따라 다르게 표현됨
Animation 동작을 부드럽게 보여주기 위한 시간 기반 전환 페이지 전환 시 슬라이드 인/아웃 효과
Transition 두 상태 간의 전환을 부드럽게 연결하는 효과 툴팁이 페이드 인되며 등장
Delay 인터랙션 효과가 적용되기까지의 시간 지연 마우스를 올리고 0.3초 후에 툴팁 표시
Duration 애니메이션이나 전환이 실행되는 시간 버튼 클릭 후 화면 전환이 0.5초 걸림
Ease-in/out 애니메이션 가속도 곡선 시작은 느리고 끝은 빠르게, 혹은 반대로

 

 

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

1. 버튼 클릭 효과

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

2. 폼 입력 중 실시간 검증

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

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

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

4. 스와이프 삭제

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

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

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

6. CTA 클릭 후 상태 전환

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

 

 

✅ 좋은 Flexibility 예시

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

  1. 토요타(Toyota) 공식 웹사이트
  2. 유튜브(YouTube)
  3. 애플(Apple) 공식 웹사이트
    • 설명: 애플의 웹사이트는 적응형 디자인을 활용하여 다양한 기기에 최적화된 레이아웃을 제공하며, 이는 반응형 디자인과 유사한 사용자 경험을 제공함.wix.com
    • URL: https://www.apple.com/
  4. 텐바이텐(10x10)
  5. 홍익대학교 공식 웹사이트
    • 설명: 홍익대학교의 웹사이트는 해상도별로 콘텐츠 차이가 없는 반응형 디자인을 적용하여 다양한 기기에서 일관된 사용자 경험을 제공함.Brunch Story
    • URL: https://www.hongik.ac.kr/
 

YouTube

 

www.youtube.com

 

New Cars, Trucks, SUVs & Hybrids | Toyota Official Site

Explore the newest Toyota trucks, cars, SUVs, hybrids and minivans. See photos, compare models, get tips, calculate payments, and more.

www.toyota.com

 

Apple

Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.

www.apple.com

 

텐바이텐 10X10 : 감성채널 감성에너지

생활감성채널 10x10(텐바이텐)은 디자인소품, 아이디어상품, 독특한 인테리어 및 패션 상품 등으로 고객에게 즐거운 경험을 주는 디자인전문 쇼핑몰 입니다.

www.10x10.co.kr

 

홍익대학교

인물 2025.03.06

www.hongik.ac.kr:443

 

 

✅ 좋은 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 설계안을 제시하며 대안 중심으로 설득함.

 

 

 

 

 

반응형 웹이나 앱 디자인을 다룰 때 ‘네이티브(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지만 네이티브 느낌으로 스크롤 애니메이션을 넣자.”
  • “네비게이션은 네이티브처럼 아래에 고정시켜야 해.”

 

✅ 네이티브 디자인의 특징

UI 구성 iOS는 둥근 모서리와 세리프 느낌, Android는 머티리얼 디자인 기반
제스처/인터랙션 iOS는 좌우 스와이프, Android는 백버튼/햄버거 메뉴
속성/피드백 터치 응답이 빠르고, 전환 애니메이션이 자연스러움
컴포넌트 OS 고유의 피커, 다이얼로그, 리스트 스타일 등 사용

 

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

디자이너 회의 “이 설정 화면은 iOS 네이티브 다이얼로그와 맞춰줄까요?”
개발자 커뮤니케이션 “이건 React Native가 아니라 네이티브로 작업해야 할 것 같아요.”
기획서 작성 “네이티브 앱처럼 사용자 흐름이 매끄럽도록 설계”
비교 설명 “웹뷰보다 네이티브 앱이 전환 성능이 좋습니다.”

 

✅ 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에서 실무적으로 대응하는 방법

Auto Layout 콘텐츠 크기에 따라 레이아웃이 유연하게 늘어나도록 설정함
Constraints 부모 프레임을 기준으로 요소가 어디에 고정되어야 할지 정의함 (Left/Right/Top/Center 등)
Variants & Components 해상도별 UI 컴포넌트를 분기하여 효율적으로 관리함
Breakpoint 프레임 구성 모바일, 태블릿, 데스크탑 등 각기 다른 화면 사이즈의 아트보드를 구성하고 설계 비교함

 

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

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

 

✅ 예시

모바일 (375~480px) 세로 스크롤 중심, 최소 정보, 햄버거 메뉴
태블릿 (768px) 카드나 이미지 2열, 간략한 탭 바
데스크탑 (1440px 이상) 레이아웃 확장, 보조 메뉴, 서브 콘텐츠 병렬 배치

 

 

 

 

https://m3.material.io/components

 

Components – Material Design 3

Discover over 30 Material Design UI components and their functions. Understand how to use them to design intuitive and visually appealing user experiences.

m3.material.io

 

✅ 1. Action (동작)

Button

Floating Action Button (FAB)

Icon Button

Segmented Button


✅ 2. Communication (소통)

Dialog

Snackbar

Banner


✅ 3. Containment (포함)

Card

Bottom Sheet

Navigation Drawer


✅ 4. Navigation (내비게이션)

Top App Bar

Bottom App Bar

Navigation Bar

Navigation Rail

Tabs


✅ 5. Selection (선택)

Checkbox

Radio Button

Switch

Chips


✅ 6. Text Inputs (입력)

Text Field / Text Area


✅ 7. Layouts (레이아웃)

Divider

List

 
 
 
 
 
 

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 같은 값이 토큰임.

 

 

디자인 씽킹 연습

UX 가설 템플릿

“만약 [기능/설계를 이렇게 바꾼다면], [사용자의 어떤 문제/불편이 해결되어], [사용 행동/성과가 어떻게 개선될 것이다].”

 

실전 예시 (카페 주문 앱)

문제 상황: 사용자는 앱 주문을 했는데도 음료 픽업 시간 예측이 어려워 대기 불만을 느낌.

가설:  “만약 앱에서 ‘주문 완료 후 예상 픽업 시간’을 실시간으로 보여준다면,

사용자는 대기 시간에 대한 불안을 줄이고, 앱 주문 후 재사용 확률이 증가할 것이다.”

다른 유형별 예시들

▸ 온보딩 화면에서 이탈이 많은 경우

“만약 회원가입 과정을 3단계에서 1단계로 줄인다면,

사용자는 복잡하다는 인식을 덜고,
온보딩 완료율이 20% 이상 상승할 것이다.”

▸ 메뉴 선택이 어려운 배달앱 UX

“만약 사용자가 메뉴를 먼저 선택하고, 해당 메뉴를 파는 가게만 보여주는 구조로 바꾼다면,

사용자는 원하는 메뉴를 더 빠르게 찾고,
전체 주문까지 걸리는 시간이 단축될 것이다.”

▸ 검색 결과가 너무 많은 경우

“만약 검색 결과에서 필터를 더 간결하고 직관적인 아이콘 형태로 제공한다면,

사용자는 검색 피로도가 줄고,
평균 체류 시간이 늘어날 것이다.”

 

직접 만들 수 있는 예시 구조

  1. 현재 사용자가 어떤 행동에서 멈추거나 고민하는지 먼저 적어보기
  2. 왜 그런 행동을 하는지 관찰이나 인터뷰로 이유 파악
  3. 어떤 UI나 콘텐츠, 플로우를 바꾸면 달라질지 상상해서 작성

 

연습 예제:  카페 모바일 주문 UX 개선

 

Step 1. 문제 정의 (Problem Framing)

“고객이 카페에서 앱으로 음료를 미리 주문하고 픽업할 때, 여전히 대기 시간이 길다는 불만이 있다.”

 

Step 2. 관찰 기반 인사이트 (User Insight)

매장에서 대기하는 고객의 78%가 “음료가 언제 나올지 몰라서 불안하다”고 응답

고객은 픽업 예상 시간 정보가 부족하다고 느낌

바쁜 출근 시간에는 앱 주문보다 줄 서는 게 더 빠르다고 생각

Step 3. UX 가설 (Hypothesis)

“만약 사용자가 주문 시 예상 준비 시간과 실시간 진행 상태를 앱에서 확인할 수 있다면,

대기 불편이 줄고 앱 주문 이용률이 증가할 것이다.”

Step 4. 해결 아이디어 (UX Solution)

  • 주문 완료 후, ‘준비 중 / 제조 중 / 픽업 가능’ 상태를 실시간으로 보여주는 UI 제공
  • 예상 대기 시간(예: "5분 후 픽업 가능")을 명확히 표시
  • 시간 초과 시 알림 기능 추가 ("음료 준비가 지연되고 있어요")

Step 5. 설득 근거 (Impact)

예상 시간 제공만으로 대기 불안 40% 감소

유사 서비스(스타벅스 앱) 사용자 재사용률 1.6배 증가 사례

실시간 진행 표시 → 앱 이용자 수 22% 증가 가능성

 

🌿 디자인 씽킹 구조 요약

  1. 공감 (Empathize): 사용자의 불만이나 불편을 관찰함
  2. 정의 (Define): 구체적인 문제로 정리함
  3. 아이디어 도출 (Ideate): 해결 아이디어를 브레인스토밍함
  4. 프로토타입 (Prototype): UX 플로우나 화면을 시각화함
  5. 테스트 (Test): 사용자 반응이나 데이터로 가설을 검증함

 

 


 

1. 정보구조(IA: Information Architecture)란

정보구조란 웹사이트나 앱에 존재하는 콘텐츠와 기능을 사용자가 쉽고 논리적으로 탐색할 수 있도록 구조화하는 작업을 말함.
전체 메뉴, 페이지 계층, 내비게이션 흐름 등을 정리하고, 콘텐츠 간의 관계를 명확히 하여 사용자 경험을 설계함.

예를 들어 전자상거래 앱이라면 ‘홈 > 카테고리 > 여성의류 > 블라우스 > 상품 상세’처럼 계층적 구조를 시각화하는 사이트맵이 IA의 대표적인 산출물임.

정보구조 설계 시 고려할 요소

  • 사용자 중심으로 콘텐츠를 정렬함
  • 너무 복잡하거나 모호한 메뉴명은 피하고 직관적인 명칭을 사용함
  • 콘텐츠를 그룹화하고 우선순위를 정함
  • 탐색 흐름을 예측 가능하게 설계함
  • 결과물을 사이트맵 또는 콘텐츠 플로우로 정리함

이러한 정보구조는 디자이너, 개발자, 기획자 간 커뮤니케이션 도구로도 활용되며, 사용자 테스트 시 사용자 흐름을 미리 검토하고 구조적인 문제를 조기에 파악할 수 있도록 도움을 줌.

 

2. 와이어프레임(Wireframe)이란

와이어프레임은 웹/앱의 페이지 구조를 단순화한 스케치 형태의 설계도임.
색상이나 시각적 스타일보다는 기능 배치와 정보 우선순위를 정리하는 데 집중함.

와이어프레임은 보통 다음과 같은 요소들을 포함함:

  • 헤더 (로고, 검색창 등)
  • 내비게이션 메뉴
  • 콘텐츠 블록 (텍스트, 이미지, 버튼)
  • 푸터 영역

이를 통해 개발 전에 사용자 흐름과 레이아웃을 점검할 수 있으며, 사용성 테스트에 활용되기도 함.

 

✅  설계 초기 단계에서의 역할과 중요성

IA와 와이어프레임은 UX 설계 초기에 전체 시스템의 구조와 흐름을 시각화함으로써
아래와 같은 이점을 제공함:

  • 사용자 경험 향상: 콘텐츠 구조가 명확해져 사용자가 원하는 정보를 빠르게 찾을 수 있음
  • 커뮤니케이션 도구: 디자이너, 개발자, 기획자 간 협업 시 오해를 줄이고 방향을 명확히 전달할 수 있음
  • 문제 조기 발견: 기능 누락, 동선 문제, 콘텐츠 과밀 등 설계 오류를 초기 단계에서 검토하고 수정할 수 있음

 

실전 예시로 보는 IA와 와이어프레임

IA 예시 흐름:

  1. 사용자 시나리오를 기반으로 주요 콘텐츠 정의
  2. 콘텐츠를 논리적 그룹으로 묶고 계층 구조화
  3. 메뉴 구성 및 페이지 간 이동 흐름 설계

→ 결과물: 사이트맵, 내비게이션 플로우

와이어프레임 예시 흐름:

  1. IA 기반으로 페이지 단위 레이아웃 설계
  2. 요소별 우선순위에 따라 콘텐츠 위치 결정
  3. 기능 흐름을 테스트하기 위한 간단한 인터랙션 표시

→ 결과물: 화면 설계서, 기능 중심 레이아웃

 

3. 플로우차트(Flowchart)란


플로우차트란 사용자 또는 시스템의 작업 흐름을 도형과 화살표를 이용해 시각적으로 표현한 도구임.
기획, 개발, 운영 등 다양한 협업 팀에게 전체 기능 흐름을 한눈에 공유할 수 있도록 정리함.

 

기본 기호

  • 시작/종료: 타원형
  • 처리(프로세스): 사각형
  • 조건(분기): 마름모
  • 입력/출력: 평행사변형
  • 연결선: 화살표

 

작성 예시

예를 들어, 회원가입 프로세스를 플로우차트로 그리면 다음과 같음:

시작 → 회원 정보 입력 → 이메일 중복 확인 → 조건 분기(중복이면 경고 / 통과되면 다음 단계) → 가입 완료 → 종료

이처럼 조건 분기를 명확히 표시하여 사용자나 시스템이 어떤 분기에서 어떤 행동을 선택하는지를 시각적으로 보여줌.

 

플로우차트 작성 시 유의사항

  • 흐름은 일반적으로 위에서 아래로, 또는 왼쪽에서 오른쪽으로 설정함
  • 각 기호는 간단한 설명을 함께 포함하여 직관성을 높임
  • 기능의 분기나 오류 처리를 포함하여 전체 유저 흐름을 빠짐없이 구성

 

플로우차트의 장점

  • 전체 사용 흐름을 한눈에 보여줄 수 있음
  • 누락된 화면이나 예외 케이스를 빠르게 식별할 수 있음
  • 개발자나 디자이너, 클라이언트 모두와의 커뮤니케이션 효율이 높아짐
  • 기능의 우선순위를 시각화할 수 있어 MVP 개발에도 적합함

 

✅ 플로우차트에서 UX 라이팅이 필요한 이유

  • 사용자가 각 단계를 어떻게 이해하고 행동할지 예측 가능하게 만들기 위해
  • 버튼, 알림, 오류 메시지 등에서 사용자의 불안이나 혼란을 줄이기 위해
  • 기능 중심이 아닌 사람 중심의 흐름을 만드는 데 도움을 주기 위해
  • UI 설계자, 개발자, 기획자가 동일한 사용 흐름 언어로 소통하기 위해

 

✅ 플로우차트에 포함되는 UX 라이팅의 위치

플로우 요소UX 라이팅 예시
버튼 "다음으로", "확인", "계속", "시작하기"
안내 메시지 "회원가입이 완료되었어요!", "잠시만 기다려주세요…"
오류 메시지 "비밀번호가 일치하지 않아요", "이메일 형식을 확인해주세요"
조건 분기 메시지 "이미 가입된 계정입니다. 로그인하시겠어요?"
확인/취소 선택 "삭제하시겠어요? 이 작업은 되돌릴 수 없습니다"

 

✅ 예시 플로우차트와 UX 라이팅

[회원가입 흐름 예시]

  1. 시작
  2. 이메일 입력
    → UX 라이팅: "이메일 주소를 입력해주세요. 가입 확인 메일이 발송됩니다."
  1. 비밀번호 입력
    → UX 라이팅: "영문, 숫자, 특수문자를 포함해 8자 이상으로 설정해주세요."
  1. 비밀번호 재입력
    → UX 라이팅: "비밀번호가 일치해야 다음 단계로 이동할 수 있어요."
  1. 가입 버튼 클릭
    → 버튼 UX 라이팅: "가입하고 시작하기"
  1. 완료
    → 완료 메시지: "환영합니다! 이제 서비스를 자유롭게 이용하실 수 있어요."

 

✅ UX 라이팅 시 주의할 점

  • 사용자 입장에서 말 걸 듯 자연스럽게 표현함
  • 명령조보다는 안내형, 친근한 어조를 사용함
  • 기술적 용어 대신 사용자가 이해할 수 있는 언어로 작성함
  • 상황, 맥락, 감정을 고려하여 복잡하거나 민감한 순간에는 위로하거나 안내하는 말투 사용함

 

✅ 플로우차트 UX 라이팅 설계 팁

  • 각 단계마다 사용자에게 무엇을 기대하는지 명확히 설명함
  • 오류나 조건 분기 시 사용자가 다음 행동을 쉽게 선택할 수 있도록 말함
  • 중복된 메시지는 줄이고, 반복 사용되는 버튼명은 일관성 있게 유지
  • 사용자 의심을 줄이는 투명하고 솔직한 문장 구성이 중요함

 

 

 

 

카페 만월경 웹사이트 참고해서 분석 및 UX 기획 가이드 공부

카페 만월경 웹사이트(https://www.cafewhale.com/)


1. 그리드 시스템의 구성 요소

컬럼 (Column)

컬럼은 콘텐츠를 배치하는 영역으로, 그리드 시스템에서 가장 중요한 단위임

일반적으로 12컬럼 그리드를 많이 사용하며, 필요에 따라 8컬럼, 16컬럼 등으로 변경 가능함

반응형 디자인에서는 화면 크기에 따라 컬럼 수가 줄어들거나 변형됨

컬럼의 너비는 고정될 수도 있고, 유동적인 크기를 가질 수도 있음

마진 (Margin)

레이아웃 전체 바깥쪽 여백을 의미하며, 컨테이너의 경계와 화면의 끝 사이의 공간임

콘텐츠가 화면 끝에 너무 붙지 않도록 하기 위해 사용됨

일반적으로 양쪽 마진을 동일하게 설정하여 균형 잡힌 레이아웃을 구성함

거터 (Gutter)

컬럼과 컬럼 사이의 간격을 의미함

컬럼들이 너무 밀착되지 않도록 하고, 콘텐츠 간 여백을 유지하여 가독성을 높임

UI에서 정렬된 레이아웃을 만들 때 중요한 역할을 함

컨테이너 (Container)

그리드 시스템을 감싸는 전체적인 영역을 의미함

웹사이트의 전체적인 너비를 지정하며, 반응형 웹에서는 유동적 또는 고정형 컨테이너를 사용함

컨테이너는 내부에 컬럼을 포함하고 있으며, 좌우 마진과 함께 화면 중앙 정렬이 일반적임


2. 카페 만월경 웹사이트 분석 및 UX 기획 가이드

주요 기능과 UI 구조

카페 만월경 웹사이트는 브랜드의 감성을 강조하면서도 사용자가 정보를 쉽게 탐색할 수 있도록 설계되었음

홈페이지는 브랜드 아이덴티티를 강조하는 풀스크린 이미지와 감각적인 타이포그래피를 사용함

메뉴 페이지는 이미지 중심의 UI 구성으로 직관적인 메뉴 탐색을 지원함

스토어 페이지에서는 오프라인 매장 위치 및 정보를 제공하며 예약 기능이 포함됨

뉴스룸에서는 브랜드 소식 및 이벤트 정보를 제공함

멤버십 및 앱 기능을 통해 사용자 참여를 유도하며, 포인트 적립 및 멤버십 혜택을 안내함

내비게이션은 데스크탑에서는 수평 메뉴, 모바일에서는 햄버거 메뉴로 변경됨

사용된 그리드 시스템

카페 만월경 웹사이트는 12컬럼 그리드 시스템을 기반으로 디자인되었으며, 유동적인 레이아웃을 지원하기 위해 플루이드 그리드 방식을 사용함

데스크탑에서는 12컬럼 그리드를 적용하여 컬럼 너비는 고정하고, 여백은 가변적으로 설정됨

태블릿에서는 8컬럼 그리드로 변형되어 일부 사이드바 요소가 숨겨지거나 축소됨

모바일에서는 4컬럼 또는 단일 컬럼 구조로 변경되며, 콘텐츠가 세로 스크롤 중심으로 재배치됨

각 디바이스 해상도에 따라 미디어 쿼리를 활용하여 그리드가 동적으로 조정됨

반응형 디자인 전략

데스크탑 환경에서는 넓은 화면을 활용하여 여러 열의 레이아웃을 구성하며, 주요 콘텐츠와 사이드바를 배치함

풀스크린 이미지 및 대형 타이포그래피를 활용하며, 상단에 고정된 내비게이션 바를 사용함

태블릿 환경에서는 8컬럼 그리드를 적용하고, 일부 UI 요소가 축소되거나 접힘

내비게이션 바의 크기가 조정되며 일부 메뉴는 아이콘화됨

콘텐츠 크기는 텍스트 크기 자동 조절, 이미지 최적화 등을 통해 가독성을 유지함

모바일 환경에서는 단일 열 레이아웃이 적용되어 세로 스크롤 방식으로 콘텐츠가 배치됨

햄버거 메뉴 아이콘을 활용하여 내비게이션이 숨김 처리되며, 터치 최적화 버튼 및 인터랙션이 적용됨

디자인 시스템과 사용성의 균형

컬러 시스템은 브랜드 아이덴티티를 강조하는 크림색, 우드 브라운, 다크 그린 등의 따뜻한 색감으로 구성됨

타이포그래피는 브랜드 아이덴티티를 강조하기 위해 세리프 폰트를 사용하되, 본문에는 가독성을 고려한 산세리프 폰트를 적용함

UI 컴포넌트는 주요 액션 버튼은 명확한 대비를 주고, 보조 버튼은 낮은 대비를 적용하는 방식을 사용함

카드 레이아웃을 활용하여 메뉴 및 제품을 강조하고, 부드러운 페이드인 및 페이드아웃 효과를 적용하여 자연스러운 전환을 제공함

접근성을 고려하여 색상 대비를 준수하고 충분한 터치 영역을 확보하며, 반응형 인터랙션을 최적화함

디자이너와 개발자의 협업 방식

디자인 시스템 문서를 통해 Figma에서 컬러, 폰트, UI 컴포넌트를 정의하고 공유함

핸드오프 툴로 Zeplin을 활용하여 개발자가 정확한 스펙을 확인할 수 있도록 함

인터랙션이 포함된 프로토타입을 제작하여 개발자가 UI 동작을 직관적으로 이해할 수 있도록 함

코드 가이드 작성 시 CSS 변수 활용 및 UI 재사용을 위한 공통 컴포넌트를 구축함

실시간 커뮤니케이션을 위해 Slack, Notion, Jira 등을 활용하여 피드백 및 진행 상황을 공유함

 

 

 

 

1. 행(Row)과 열(Column)의 차이

1) 행(Row)란?

  • 가로(→) 방향으로 데이터를 정렬한 구조.
  • 여러 개의 **열(Column)**이 모여 **행(Row)**을 구성.
  • 엑셀, 데이터베이스, 테이블에서 한 개의 레코드(Record)를 의미함.

2) 열(Column)란?

  • 세로(↓) 방향으로 데이터를 정렬한 구조.
  • 여러 개의 **행(Row)**이 모여 **열(Column)**을 구성.
  • 엑셀, 데이터베이스, 테이블에서 속성(Attribute)이나 필드(Field)를 의미함.

3) 행과 열 비교

2. 행간(Line Spacing), 자간(Letter Spacing), 커닝(Kerning) 차이

1) 행간(Line Spacing)이란?

  • 한 행과 다음 행 사이의 간격을 의미함.
  • 가독성에 영향을 주며, 텍스트가 너무 붙으면 읽기 어렵고, 너무 넓으면 흐름이 끊김.
  • 보통 1.4~1.6배 정도의 행간이 가독성에 적절함.

 

2) 자간(Letter Spacing)이란?

  • 문자와 문자 사이의 간격을 일정하게 조절하는 것.
  • 웹 디자인에서는 CSS 속성 letter-spacing을 사용하여 조절 가능.
  • 글자가 서로 붙으면 가독성이 떨어지고, 너무 넓으면 흐트러진 느낌을 줌.

3) 커닝(Kerning)이란?

  • 특정 문자 조합 간격을 개별적으로 조정하는 것.
  • 자간과 다르게 특정 문자 쌍에만 영향을 줌 (예: 'AV'처럼 시각적으로 불균형한 경우).

4) 비교 정리

개념 설명 예제
행간(Line Spacing) 한 행과 다음 행 사이의 간격 1.2~1.6배 정도가 일반적인 가독성 유지
자간(Letter Spacing) 글자와 글자 사이의 간격 조절 letter-spacing: 2px;
커닝(Kerning) 특정 문자 쌍 간격 개별 조정 "A V" 간격 조절

3. 서체(Typeface)와 폰트(Font)의 차이 & 세리프/산세리프

1) 서체(Typeface)란?

  • 특정 스타일로 디자인된 글자 패밀리 전체를 의미함.
  • 예: Helvetica, Times New Roman, Arial.

2) 폰트(Font)란?

  • 같은 서체라도 크기, 굵기, 기울기 등이 다르면 각각 다른 폰트로 구분됨.
  • 예: Helvetica Regular 12px, Helvetica Bold 16px.

3) 서체의 종류

서체 설명 대표적인 서체
세리프(Serif) 글자 끝에 장식이 있는 전통적인 서체 Times New Roman, Garamond
산세리프(Sans-serif) 장식이 없는 모던한 서체 Helvetica, Arial
스크립트(Script) 손글씨 느낌의 서체 Pacifico, Brush Script

4. 제목, 소제목, 본문 간 관계 = 정보 계층 구조(Information Hierarchy)

요소 역할
제목(Heading) 콘텐츠의 핵심 주제 전달
소제목(Subheading) 제목을 보완하며, 세부 내용을 그룹화
본문(Body Text) 구체적인 정보 설명 및 콘텐츠 전달

5. UX 문서 작성 순서: PRD → IA → 와이어플로우

(1) PRD (제품 요구사항 정의서, Product Requirements Document)

항목 설명
제품 개요 제품의 목적, 목표 사용자 정의
핵심 기능 제공해야 할 주요 기능 목록
사용자 스토리 사용자의 행동 시나리오
UX/UI 요구사항 화면 인터페이스와 사용자 경험 가이드

(2) IA (정보 구조, Information Architecture)

항목 설명
메뉴 구조 주요 메뉴 및 하위 메뉴 계층화
페이지 간 연결 관계 특정 페이지에서 어디로 이동할 수 있는지
내비게이션 설계 사용자 경험을 최적화하는 메뉴 구조

(3) 와이어플로우 (Wireflow, 화면 흐름도)

항목 설명
화면 구성 페이지별 레이아웃 및 콘텐츠 배치
사용자 동선 특정 기능을 수행하는 과정에서 거치는 단계
인터랙션 요소 버튼 클릭, 화면 전환 방식

6. 6:3:1 컬러 비율 개념 & 스타벅스 예시

1) 개념

  • 6(주색, Primary Color) : 3(보조색, Secondary Color) : 1(강조색, Accent Color)

2) 스타벅스 UI 컬러 비율 예시

컬러 비율 색상 예시 역할
6 (주색) 스타벅스 그린 (#00704A) 브랜드의 메인 컬러, 로고, 주요 버튼
3 (보조색) 다크 브라운 (#2E1E12) 내비게이션 바, 텍스트 강조
1 (강조색) 크림 화이트 (#F1EDE1) 포인트 요소, 배경, 하이라이트

6:3:1 컬러 비율을 활용하면 시각적으로 균형 잡힌 UI를 디자인할 수 있음. 🚀

 

 

 

+ Recent posts