디자인학
3단계: UX/UI 디자인 — 사용자의 뇌를 설계하다
Part I. 이론적 기초
1단계와 2단계를 여기서 다시 꺼내야 한다
1단계에서 너는 균형, 대비, 반복, 정렬, 근접이라는 다섯 가지 원리로 시각적 공간을 다루는 법을 배웠고, 타이포그래피로 정보에 위계를 만들며 그리드로 레이아웃을 설계했다. 2단계에서는 더블다이아몬드 프로세스를 통해 "무엇을 만드는가"보다 "누구를 위해, 왜 만드는가"가 먼저 와야 한다는 것을 배웠고, 페르소나를 통해 사용자를 구체적으로 상상하는 훈련을 했다. 지금 3단계는 그 두 토대 위에 실제 화면을 설계하고, 사용자의 경험 전체를 구조화하며, 디자인을 하나의 체계로 관리하는 법을 다룬다. 비유하자면 1단계가 재료를 다루는 법이었고 2단계가 무엇을 요리할지 정하는 과정이었다면, 3단계는 레시피를 체계화하고 주방 전체를 효율적으로 운영하는 방법이다.
2. 인간의 뇌가 세상을 인식하는 방식
UX 디자인을 처음 배울 때 많은 사람이 "예쁜 앱 만드는 방법"이라고 생각한다. 그러나 **UX(User Experience)**는 사용자가 제품을 사용하는 전체 경험을 설계하는 것이며, 그 핵심은 심리학에 있다. 좋은 UX 디자이너가 되려면 먼저 인간의 뇌가 어떻게 작동하는지를 이해해야 한다. 세계적인 인지과학자이자 디자이너인 돈 노만(Don Norman)은 저서 The Design of Everyday Things(1988)에서 사람들이 사물을 어떻게 이해하고 사용하는지를 분석했다. 여기서 나온 가장 핵심적인 개념이 **어포던스(Affordance)**다. 어포던스란 어떤 사물이 "자신이 어떻게 사용될 수 있는지"를 스스로 알려주는 성질이다. 예를 들어 문 손잡이가 둥근 구 형태라면 "돌려라"는 신호를 주고, 납작한 판 형태라면 "밀어라"는 신호를 준다. 화면에서 버튼처럼 생긴 요소는 "클릭하면 무언가 일어난다"는 것을 사용자에게 암묵적으로 전달한다. 이것이 디자인과 심리학이 만나는 지점이다.
어포던스와 함께 노만이 강조한 개념이 **시그니파이어(Signifier)**다. 어포던스가 가능성 그 자체라면, 시그니파이어는 그 가능성을 명시적으로 알려주는 신호다. 문에 붙어 있는 "PUSH" 스티커가 시그니파이어다. UI에서는 아이콘, 툴팁, 레이블이 모두 시그니파이어 역할을 한다. 어포던스를 잘 설계한 UI는 시그니파이어 없이도 직관적이지만, 현실에서는 둘을 함께 쓴다. 또 하나 중요한 개념은 **멘탈 모델(Mental Model)**이다. 사용자는 새로운 앱을 처음 열 때 이미 머릿속에 "이런 앱은 이렇게 작동하겠지"라는 기대를 가지고 있다. 이메일 앱을 켜면 받은편지함/보낸편지함/임시보관함 구조를 기대하고, 쇼핑 앱을 열면 장바구니 아이콘이 오른쪽 상단에 있을 거라고 예상한다. 좋은 UX 디자인은 사용자의 멘탈 모델을 존중한다. 반대로 나쁜 디자인은 사용자의 기대를 배반하여 혼란을 준다. 2단계에서 페르소나를 만들었던 이유 중 하나가 바로 그 사용자 집단의 멘탈 모델을 파악하기 위해서였다는 것을 이제는 이해할 수 있을 것이다.
[노트 기록] 노만의 핵심 3개념: Affordance = 사용 가능성 자체 / Signifier = 가능성을 알려주는 신호 / Mental Model = 사용자가 제품에 대해 가진 사전 기대. 이 세 개념은 이후 모든 UI 설계 결정을 정당화하는 근거가 된다.
3. 세 가지 인지 법칙 — 밀러, 힉스, 피츠
이론 기초의 마지막 단계로, UI 디자인에서 거의 모든 결정을 뒷받침하는 세 가지 법칙을 배워야 한다. 첫째는 **밀러의 법칙(Miller's Law)**이다. 1956년 심리학자 조지 밀러(George A. Miller)는 논문 The Magical Number Seven, Plus or Minus Two에서 인간의 단기 기억(Working Memory)이 한 번에 처리할 수 있는 정보의 단위가 약 7±2개라고 주장했다. 네비게이션 메뉴 항목이 10개를 넘으면 사용자가 모두 기억하기 어렵고, 폼 입력란이 너무 많으면 압도감에 이탈한다. 그래서 좋은 UI는 정보를 의미 있는 단위로 청킹(Chunking)—묶고 그룹화—하여 인지 부담을 줄인다. 1단계에서 배운 근접(Proximity) 원리가 사실 시각적 청킹의 방법이었다는 연결고리가 여기서 생긴다.
둘째는 **힉스의 법칙(Hick's Law)**이다. 1952년 심리학자 윌리엄 에드먼드 힉(William Edmund Hick)이 정립한 이 법칙은 선택지의 수가 많을수록 결정에 걸리는 시간이 로그적으로 증가한다는 것이다(T = b × log₂(n + 1)). 버거킹 메뉴 50개가 펼쳐진 화면 앞에서 주문하는 시간을 생각해보라. 반면 "버거 / 사이드 / 음료"로 카테고리를 나누면 첫 선택은 3가지 중 하나다. 좋은 UI는 사용자가 한 번에 직면하는 선택지를 최소화한다. 이것이 모바일 앱에서 복잡한 기능을 단계별로 제공하는 "Progressive Disclosure(점진적 공개)" 패턴의 이론적 근거다. 셋째는 **피츠의 법칙(Fitts' Law)**이다. 1954년 폴 피츠(Paul Fitts)가 제안한 이 법칙은, 타겟을 클릭하는 데 걸리는 시간은 타겟까지의 거리에 비례하고 크기에 반비례한다는 것이다(T = a + b × log₂(D/W + 1)). 모바일 앱에서 가장 자주 누르는 버튼이 화면 아래쪽에 있는 이유, 그리고 터치 가능한 영역(Touch Target)이 최소 44×44pt 이상이어야 한다는 애플 HIG와 구글 Material Design의 공통 기준이 이 법칙에서 나온다.
[노트 기록] 3대 인지 법칙: Miller's Law(7±2, 청킹으로 인지 부담 감소) → Hick's Law(선택지↑ = 결정 시간↑, Progressive Disclosure) → Fitts' Law(크기↑ & 거리↓ = 클릭 시간↓, 최소 44pt 터치 타겟). 이 법칙들은 UI 설계 결정을 수치로 정당화할 수 있게 해준다.
Part II. 본 내용
4. UX/UI 디자인 원칙 — 닐슨의 10가지 발견 원칙
이론 기반을 쌓았으니 실제 디자인 원칙으로 넘어간다. UX 분야에서 가장 널리 쓰이는 원칙 체계는 야콥 닐슨(Jakob Nielsen)이 1994년에 발표한 **10가지 사용성 발견 원칙(10 Usability Heuristics)**이다. "발견적"이라는 표현은 완벽한 공식이 아니라 경험에서 도출된 경험 법칙이라는 의미다. 이 원칙들이 어떤 심리학적 근거 위에 서 있는지 연결하며 이해해야 한다.
**첫째, 시스템 상태의 가시성(Visibility of System Status)**이다. 사용자는 항상 "지금 무슨 일이 일어나고 있는가?"를 알고 싶어 한다. 파일을 업로드할 때 진행 막대가 없으면 사용자는 멈춘 건지 작동 중인지 알 수 없어 불안해한다. 로딩 스피너, 진행률 표시, 성공/실패 메시지가 이 원칙을 충족하는 방법이다. **둘째, 현실 세계와의 일치(Match Between System and the Real World)**는 UI에서 사용하는 언어와 개념이 사용자의 일상 세계와 맞아야 한다는 원칙이다. "파일 삭제" 대신 "휴지통으로 이동"이 더 직관적인 이유가 여기에 있으며, 이것이 멘탈 모델과 직결된다. **셋째, 사용자 통제와 자유(User Control and Freedom)**는 사용자가 실수를 한다는 전제에서 출발한다. 좋은 UI는 항상 "되돌리기(Undo)"를 제공하고 언제든 원하는 곳으로 탈출할 수 있는 비상구를 준다.
**넷째, 일관성과 표준(Consistency and Standards)**은 이 단계의 마지막 주제인 디자인 시스템의 존재 이유가 되는 원칙이다. 같은 앱 안에서 삭제 버튼이 어떤 화면에서는 빨간색이고 어떤 화면에서는 파란색이라면 사용자는 혼란스럽다. **다섯째, 에러 방지(Error Prevention)**는 에러가 발생한 후 처리하는 것보다 에러가 발생하지 않도록 설계하는 것이 낫다는 원칙이다. 폼에서 이메일 형식이 잘못됐을 때 제출 전에 실시간으로 알려주는 유효성 검사가 그 예다. **여섯째, 인식 우선(Recognition Rather Than Recall)**은 인간이 기억에서 정보를 꺼내는 것(Recall)보다 눈앞의 것을 인식(Recognition)하는 것이 훨씬 쉽다는 인지 심리학적 사실에 기반한다. 자동완성 기능과 최근 검색 기록이 UX 측면에서 정당화되는 근거가 바로 이것이다. 나머지 넷(Flexibility and Efficiency of Use, Aesthetic and Minimalist Design, Help Users Recognize/Diagnose/Recover from Errors, Help and Documentation)도 같은 맥락에서 이해하며 노트에 정리해두길 권한다.
[노트 기록] 닐슨의 10 Heuristics 전체: ① Visibility of System Status ② Match Between System and Real World ③ User Control and Freedom ④ Consistency and Standards ⑤ Error Prevention ⑥ Recognition Rather Than Recall ⑦ Flexibility and Efficiency of Use ⑧ Aesthetic and Minimalist Design ⑨ Help Users Recognize, Diagnose, and Recover from Errors ⑩ Help and Documentation. 각 이름을 외우기보다 "이 원칙이 없으면 어떤 인지적 문제가 발생하는가"를 설명할 수 있어야 한다.
5. 정보구조(IA)와 와이어프레임 — 설계도를 그리기 전에
이제 실제로 화면을 설계하기 위한 단계로 들어간다. 화면을 그리기 전에 반드시 먼저 해야 할 것이 정보구조(Information Architecture, IA) 설계다. IA는 건축에서의 평면도와 같다. 건물을 짓기 전에 각 방이 어디에 위치하고 어떻게 연결되는지를 결정하듯, IA는 앱의 콘텐츠를 어떻게 조직하고, 어떤 이름을 붙이며, 어떻게 탐색할 수 있게 할지를 결정한다. 피터 모어빌(Peter Morville)과 루이스 로젠펠드(Louis Rosenfeld)는 저서 Information Architecture for the World Wide Web(1998)에서 IA를 **조직 시스템(Organization System), 레이블링 시스템(Labeling System), 탐색 시스템(Navigation System), 검색 시스템(Search System)**의 네 가지로 정의했다. 조직 시스템은 정보를 어떻게 분류하느냐의 문제다. 쇼핑몰 상품을 카테고리별로, 브랜드별로, 가격대별로 나눌 수 있는데 어떤 기준이 사용자가 원하는 것을 가장 빨리 찾게 하는가? 레이블링 시스템은 각 카테고리와 기능에 어떤 이름을 붙이느냐다. "내 정보"와 "마이페이지"와 "계정 설정"은 모두 같은 페이지일 수 있지만 사용자의 멘탈 모델에 가장 잘 맞는 레이블 하나를 골라야 한다.
IA를 설계하는 실무 기법 중 하나가 **카드 소팅(Card Sorting)**이다. 앱의 콘텐츠를 카드에 하나씩 적어 사용자에게 보여주고, 그들이 자연스럽게 생각하는 방식으로 카드를 묶게 하는 방법이다. 이를 통해 디자이너의 멘탈 모델이 아닌 사용자의 멘탈 모델에 기반한 IA를 만든다. 2단계에서 배운 사용자 리서치가 IA 설계에서 이렇게 직접적으로 활용된다. 카드 소팅의 결과물로 **사이트맵(Site Map)**과 **유저 플로우(User Flow)**를 만든다. 사이트맵은 앱의 전체 페이지 구조를 계층적으로 보여주는 문서이고, 유저 플로우는 특정 태스크를 완수하기 위해 사용자가 거치는 화면의 순서와 분기를 보여주는 다이어그램이다. 예를 들어 "회원가입 플로우"는 랜딩 페이지 → 회원가입 버튼 탭 → 이메일 입력 → 인증 메일 확인 → 프로필 설정 → 완료로 이어지는 선형 흐름과, 이메일 중복 시 오류 처리 같은 분기를 포함한다.
IA가 완성되면 각 화면을 실제로 그릴 준비가 된다. 이때 쓰는 도구가 **와이어프레임(Wireframe)**이다. 와이어프레임은 화면의 레이아웃과 정보 구조를 표현하는 '뼈대 스케치'로, 색상·이미지·실제 폰트 없이 박스와 선과 텍스트 플레이스홀더로 구성된다. 충실도(Fidelity)에 따라 세 단계가 있다. Lo-fi는 손으로 그린 스케치 수준으로 아이디어를 빠르게 탐색하는 데 쓰이고, Mid-fi는 디지털 도구(Figma 등)로 만든 흑백 와이어프레임으로 레이아웃과 콘텐츠 위계를 확인하며, Hi-fi는 실제 색상·이미지·폰트를 적용한 목업(Mockup)으로 최종 시각 디자인과 거의 동일하다. 실무에서는 Lo-fi → Mid-fi → Hi-fi 순서로 진행하며 각 단계에서 피드백을 반영한다. 와이어프레임에서 특히 중요한 것이 **주석(Annotation)**이다. "이 버튼을 클릭하면 어떤 일이 일어나는가", "이 리스트는 최대 몇 개 항목을 보여주는가" 같은 정보를 명시해야 개발자가 구현할 때 혼란이 없다.
[노트 기록] IA 4 구성요소 (Morville & Rosenfeld): Organization System(분류 방식) / Labeling System(명칭) / Navigation System(탐색) / Search System(검색). 와이어프레임 3단계: Lo-fi(손스케치, 아이디어) → Mid-fi(디지털, 레이아웃) → Hi-fi(목업, 시각 완성).
6. 인터랙션 디자인과 마이크로인터랙션 — 움직임이 의미를 만든다
IA와 와이어프레임으로 구조를 잡았다면, 이제 그 구조에 생명을 불어넣는 단계다. **인터랙션 디자인(Interaction Design, IxD)**은 사용자와 인터페이스 사이의 대화 방식을 설계하는 것이다. 인터랙션 디자인의 가장 기본 단위는 **상태(State)**다. 버튼 하나를 예로 들면, Default는 초기 상태, Hover는 마우스를 올렸을 때, Active/Pressed는 클릭 중, Disabled는 비활성화, Loading은 처리 중, Success/Error는 처리 결과 상태다. 각 상태가 시각적으로 구별되지 않으면 사용자는 지금 무슨 상태인지 알 수 없고, 이것은 닐슨의 첫 번째 원칙인 "시스템 상태의 가시성" 위반이다. 좋은 UI 설계는 모든 상태를 의도적으로 설계하는 것이다.
상태 사이의 전환을 **트랜지션(Transition)**이라 하고 이것이 **모션 디자인(Motion Design)**의 영역이다. 구글의 Material Design은 모션에 관한 네 가지 원칙을 제시한다. 첫째, Responsive(반응적): UI는 입력에 200ms 이내에 시각적으로 반응해야 한다. 둘째, Natural(자연스러운): 물체는 갑자기 나타나거나 사라지지 않는다. 애니메이션은 물리 세계를 모방해야 한다(Ease-in, Ease-out 커브). 셋째, Intentional(의도적인): 모든 움직임은 이유가 있어야 한다. 단지 예뻐 보이려는 애니메이션은 인지 부담을 증가시킨다. 넷째, Unique(개성 있는): 모션이 브랜드의 개성을 표현할 수 있다.
이제 **마이크로인터랙션(Micro-interaction)**으로 들어간다. 댄 사퍼(Dan Saffer)는 저서 Microinteractions: Designing with Details(2013)에서 마이크로인터랙션을 "하나의 태스크를 처리하는 작은 상호작용"으로 정의했다. 인스타그램에서 사진을 더블탭할 때 하트가 나타나는 것, 트위터에서 좋아요를 누를 때 하트가 통통 튀는 애니메이션, 알람을 끄기 위해 슬라이더를 밀 때의 진동 피드백이 모두 마이크로인터랙션이다. 사퍼는 마이크로인터랙션의 구조를 네 가지 요소로 분해했다. **트리거(Trigger)**는 인터랙션을 시작시키는 것으로, 사용자가 직접 일으키는 Manual Trigger(버튼 탭)와 시스템이 자동으로 일으키는 System Trigger(배터리 부족 알림)로 나뉜다. **규칙(Rules)**은 트리거 발생 후 무슨 일이 일어나는지를 정의한다. 좋아요 버튼이 처음 눌리면 하트가 빨간색이 되고 다시 누르면 회색으로 돌아오는 것이 규칙이다. **피드백(Feedback)**은 그 규칙에 따라 일어난 일을 사용자에게 알려주는 시각·청각·촉각 반응이다. 닐슨의 첫 번째 원칙이 여기서 다시 등장한다. **루프와 모드(Loops & Modes)**는 마이크로인터랙션이 얼마나 지속되고 반복되는지를 정의한다. 로딩 스피너는 데이터가 불러와질 때까지 반복(Loop)되고, 무음 모드(Mode)에서는 소리 피드백 대신 진동이 작동한다.
[노트 기록] 마이크로인터랙션 4요소 (Dan Saffer, 2013): Trigger(시작점) → Rules(일어날 일) → Feedback(사용자에게 알림) → Loops & Modes(지속성과 조건 분기). 잘 설계된 마이크로인터랙션의 역할: ① 현재 상태 전달 ② 감성적 커뮤니케이션 ③ 브랜드 경험 형성.
마이크로인터랙션이 중요한 이유는 단지 예쁘기 때문이 아니다. 반대로 나쁜 마이크로인터랙션은 사용자를 방해한다. 너무 느린 애니메이션, 이유 없이 튀어오르는 요소들, 그리고 전정 장애(vestibular disorder)가 있는 사용자에게 어지러움을 줄 수 있는 과도한 움직임이 나쁜 예다. 이것이 접근성(Accessibility) 관점에서 prefers-reduced-motion CSS 미디어 쿼리가 존재하는 이유이기도 하다.
7. 디자인 시스템과 컴포넌트 — 레고 블록으로 앱을 짓다
이 단계의 마지막이자 가장 체계적인 개념인 **디자인 시스템(Design System)**으로 넘어간다. 혼자 앱을 만들 때는 별 문제가 없지만, 팀 다섯 명이 같은 앱을 만든다면? 각자 다른 색상의 버튼, 다른 폰트 크기, 다른 간격 기준을 사용한다면 앱 전체의 일관성이 무너진다. 이것이 닐슨의 네 번째 원칙 "일관성과 표준"을 산업 규모에서 해결하기 위해 디자인 시스템이 탄생한 이유다. 디자인 시스템은 어떤 제품을 만들 때 사용하는 모든 디자인 결정의 집합이다. 색상 팔레트, 타이포그래피 규칙, 간격 기준, 컴포넌트 라이브러리, 그리고 이 모든 것을 설명하는 문서가 디자인 시스템을 구성한다. 구글의 Material Design, 애플의 Human Interface Guidelines(HIG), IBM의 Carbon Design System이 대표적이며, 너도 이미 매일 이 시스템들 위에서 만들어진 앱을 사용하고 있다.
디자인 시스템의 이론적 토대로 브래드 프로스트(Brad Frost)가 2013년 제안한 **아토믹 디자인(Atomic Design)**을 이해해야 한다. 프로스트는 UI를 화학의 주기율표처럼 작은 단위부터 조합하여 복잡한 구조를 만들 수 있다고 보았다. **원자(Atoms)**는 더 이상 쪼갤 수 없는 최소 단위다—버튼, 인풋 필드, 아이콘, 색상 스와치, 폰트 스타일. **분자(Molecules)**는 원자들이 모여 하나의 기능을 하는 그룹이다—레이블+인풋+버튼이 모이면 "검색창" 분자가 된다. **유기체(Organisms)**는 분자들이 모여 화면의 한 섹션을 이루는 복잡한 요소다—검색창+네비게이션 아이콘+로고가 모이면 "헤더" 유기체가 된다. **템플릿(Templates)**은 유기체들이 배치된 페이지의 뼈대이고, **페이지(Pages)**는 실제 콘텐츠가 채워진 최종 화면이다. 이 계층 구조는 와이어프레임(템플릿 수준)에서 Hi-fi 목업(페이지 수준)으로 올라가는 과정과 정확히 맞닿아 있다.
현대 디자인 시스템의 핵심인 **디자인 토큰(Design Token)**도 반드시 알아야 한다. 디자인 토큰은 디자인 결정을 코드가 참조할 수 있는 변수로 만든 것이다. 예를 들어 "주요 색상은 #3B82F6이다"라는 결정을 color-primary: #3B82F6이라는 토큰으로 저장하면, 색상이 변경될 때 모든 화면에서 일일이 바꾸는 대신 토큰 하나만 바꾸면 된다. 토큰은 색상(Color Tokens), 타이포그래피(Typography Tokens), 간격(Spacing Tokens), 모서리 둥근 정도(Border Radius Tokens), 그림자(Shadow Tokens) 등으로 나뉜다. 1단계에서 배운 그리드와 타이포그래피 위계가 디자인 시스템 안에서 토큰으로 체계화된다고 생각하면 연결이 자연스럽다. 컴포넌트 라이브러리의 각 컴포넌트는 어떻게 생겼는지만 설명하는 것이 아니라, 앞서 배운 모든 상태(State), 마이크로인터랙션 명세, 그리고 접근성을 위한 키보드 탐색 방법과 스크린 리더 레이블까지 포함해야 한다. 이것이 단순한 예쁜 UI 그리기가 아닌 체계적인 시스템 설계다.
[노트 기록] Atomic Design 5계층 (Brad Frost, 2013): Atoms → Molecules → Organisms → Templates → Pages. Design Token: 디자인 결정을 코드에서 참조 가능한 변수로 추상화한 것. 색상·타이포그래피·간격·반경·그림자 토큰이 존재한다.
Part III. 프로젝트 — 직접 설계하기
배운 모든 것을 직접 적용할 시간이다. 세 프로젝트는 순서대로 진행하도록 설계되어 있다. 정답은 없다. 단, 모든 설계 결정에는 반드시 "왜 이렇게 결정했는가"를 이론적 근거(닐슨의 원칙, 밀러/힉스/피츠의 법칙, 멘탈 모델, 어포던스 등)와 함께 기록하라. 실무에서 "예뻐서"는 근거가 되지 않는다.
프로젝트 A: 학교 급식 앱 IA & 와이어프레임 설계
상황: 너의 학교 학생들이 매일 급식 메뉴를 확인하고, 알러지 성분을 체크하며, 오늘 급식에 평가를 남길 수 있는 모바일 앱을 설계하려 한다. 현재 학생들은 학교 홈페이지에서 여러 메뉴를 거쳐야 급식표를 찾고, 알러지 정보는 별도 PDF를 다운로드해야 한다. 학생 100명을 대상으로 한 간이 설문에서 "찾기 어렵다(41%)", "알러지 정보가 없다(33%)", "이번 주 메뉴를 미리 알고 싶다(26%)"가 가장 불편한 점으로 꼽혔다.
Task 1: 이 앱에 필요한 모든 기능과 콘텐츠를 목록으로 작성하고, 카드 소팅 결과를 상상하여 3~4개의 주요 카테고리로 묶어라. 각 카테고리의 이름(레이블)을 정하고, 왜 그 이름이 사용자 멘탈 모델에 적합한지 설명하라.
Task 2: 사이트맵을 그려라. 탭 바 구조를 사용할 것인지 드로어 메뉴를 사용할 것인지 결정하고, 힉스의 법칙을 근거로 그 선택을 정당화하라.
Task 3: 핵심 유저 플로우를 설계하라: "학생이 내일 급식 메뉴를 확인하고, 자신에게 해당하는 알러지 성분이 있는지 체크하고, 오늘 먹은 급식에 별점을 남기는 플로우." 각 화면 전환에서 어떤 트리거가 발생하는지 간략히 표시하라.
Task 4: 메인 화면, 오늘의 급식 상세 화면, 알러지 정보 화면, 별점 입력 화면, 이렇게 4개의 Mid-fi 와이어프레임을 그려라(손 스케치 또는 디지털 도구 모두 가능). 각 화면에 주석을 달아라—버튼을 누르면 어떤 화면으로 이동하는지, 각 터치 타겟이 최소 크기 요건(피츠의 법칙)을 충족하는지 명시하라. 닐슨의 원칙 중 각 화면에 어떤 원칙이 적용되었는지 최소 두 가지씩 주석에 포함하라.
프로젝트 B: 소셜 피드 앱 마이크로인터랙션 명세서
상황: 친구들과 짧은 글과 이미지를 공유하는 소셜 피드 앱이 있다. 앱에는 피드 스크롤, 게시물 좋아요, 댓글 달기, 게시물 저장(북마크), 팔로우/언팔로우, 이미지 업로드, 로딩 상태, 네트워크 오류 처리 기능이 있다.
Task 1: 위 기능 중 최소 5가지를 골라 각각의 마이크로인터랙션을 댄 사퍼의 Trigger → Rules → Feedback → Loops & Modes 구조로 명세하라. 각 마이크로인터랙션이 닐슨의 10 원칙 중 어느 것을 충족하는지 함께 명시하라.
Task 2: "좋아요" 마이크로인터랙션을 애니메이션 타임라인으로 설계하라. 0ms부터 시작하여 각 단계(버튼 시각 반응, 하트 아이콘 변화, 숫자 카운트 업, 햅틱 피드백 등)가 몇 ms에 시작되고 끝나는지 시간축 위에 표현하라. 각 애니메이션 단계의 Easing 커브를 선택하고(ease-in, ease-out, ease-in-out, linear 중), 왜 그 커브를 선택했는지 "자연스러운 움직임"의 관점에서 설명하라.
Task 3: 네트워크 연결이 끊겼을 때 사용자에게 어떻게 알릴 것인지 마이크로인터랙션을 설계하라. 사용자를 불안하게 만들지 않으면서 상황을 정확히 전달하는 방법을 닐슨의 원칙들을 활용하여 설계하고 정당화하라. 네트워크가 복구됐을 때의 마이크로인터랙션도 함께 설계하라.
프로젝트 C: 미니 디자인 시스템 구축
상황: 프로젝트 A에서 설계한 급식 앱의 디자인 시스템을 구축한다.
Task 1: 색상 시스템을 설계하라. 브랜드 색상(Primary) 1가지, 보조 색상(Secondary) 1가지, 피드백 색상(Success / Warning / Error / Info) 4가지, 그레이스케일(Background / Surface / Border / Text) 4가지를 선정하고 모든 색상을 HEX 코드로 명시하라. Primary/Secondary 색상을 선택한 이유를 고등학생 타겟 사용자와 급식 앱의 맥락에서 설명하라. 단, 1단계에서 배운 대비(Contrast) 원리를 적용하여 모든 텍스트 색상이 배경 대비 WCAG AA 기준(4.5:1 이상)을 충족하는지 직접 확인하라(온라인 Contrast Checker 도구를 활용할 수 있다).
Task 2: 타이포그래피 시스템을 설계하라. Display, H1, H2, H3, Body Large, Body Medium, Body Small, Caption, Label 중 최소 6가지 텍스트 스타일을 정의하라. 각 스타일마다 Font Family, Font Size, Font Weight, Line Height, Letter Spacing을 명시하라. 모바일 화면 기준 본문 글자 크기가 16px 이상인지 확인하고, 1단계의 타이포그래피 위계 원리가 어떻게 반영되었는지 설명하라.
Task 3: 컴포넌트 명세를 작성하라. Button, Input Field, Card, Badge, Bottom Navigation Bar 5가지 컴포넌트에 대해 각각 다음을 명세하라: ① 시각적 디자인(스케치 또는 설명), ② 모든 상태(State) 목록과 각 상태의 시각적 차이, ③ 사용하는 디자인 토큰 목록(Task 1, 2에서 만든 시스템 참조), ④ 아토믹 디자인 기준으로 원자/분자/유기체 중 어디에 속하는지와 그 이유.
Task 4: Button 컴포넌트 하나에 대한 "컴포넌트 사용 가이드"를 팀원이 읽을 수 있는 수준으로 작성하라. 언제 이 버튼을 써야 하고 언제 쓰면 안 되는지, 어떤 상황에 어떤 버튼 변형(Primary, Secondary, Destructive, Ghost 등)을 쓰는지를 급식 앱의 구체적인 화면 예시와 함께 설명하라. Disabled 상태를 언제 사용해야 하고 언제 사용하면 안 되는지도 포함하라.
평가 기준 (총 100점)
세 프로젝트가 완성되면 아래 기준으로 스스로 평가하거나 동료/선생님의 피드백을 구하라.
UX 원칙 적용 (25점): 설계 결정들이 닐슨의 Heuristics, 밀러/힉스/피츠의 법칙, 멘탈 모델, 어포던스 등 배운 이론으로 뒷받침되는가? 단순히 "예뻐서" 또는 "그냥"이 아닌 근거 있는 설계가 이루어졌는가? 주석과 설명에 이론적 근거가 명시되었는가?
UI 품질 (50점): 와이어프레임이 사용자 플로우를 명확하게 표현하는가? 모든 인터랙티브 요소의 상태가 설계되었는가? 마이크로인터랙션 명세가 구체적이고 실현 가능한가? 화면 간 일관성이 유지되는가?
디자인 시스템 (25점): 색상·타이포그래피 토큰이 체계적으로 정의되었는가? 컴포넌트가 아토믹 디자인 원칙에 따라 설계되었는가? 문서화가 팀원이 실제로 사용할 수 있는 수준으로 명확한가?