---

1️⃣ UI/UX 개념

✅ UI와 UX 개념 차이

항목	UI (User Interface)	UX (User Experience)
정의	사용자가 조작하는 시각적 인터페이스 (버튼, 메뉴 등)	사용자가 느끼는 총체적 경험 (사용 흐름, 감정, 효율성 포함)
목적	조작 가능한 화면을 명확히 제공	사용자가 ‘이해하기 쉽고 편하게’ 이용하도록 설계
예시	앱에서 보이는 버튼, 입력창	앱 사용 흐름, 속도, 오류 메시지, 전체적인 편리함

✅ 어포던스(Affordance) 이론

• 사용자가 어떤 행동을 ‘직관적으로 유도받는’ 시각적/물리적/서비스 설계 원리

어포던스 유형	설명	예시
시각적 어포던스	눈으로 보고 조작법을 직감	- 입체감 있는 버튼 → 누를 수 있을 것 같음 - 파란 밑줄 텍스트 → 클릭할 수 있음
물리적 어포던스	형태, 재질이 조작을 암시	- 리모컨 돌출 버튼 - 손잡이 형태 컵
서비스 어포던스	서비스 흐름 자체가 행동을 유도	- 배달앱: 주소 입력 → 추천 메뉴 → 결제 - 키오스크: 결제 버튼만 강조되어 다음 행동 유도

---

2️⃣ UX 디자인 프로세스 – 더블 다이아몬드 모델

• 문제 해결 과정을 체계적으로 정리한 대표적인 프레임 워크
• 발산과 수렴을 반복하는 구조. Discover → Define, Develop → Deliver

단계	설명	주요 활동
Discover (발견)	사용자의 니즈를 넓게 조사	관찰, 인터뷰, 설문
Define (정의)	문제를 명확히 정의	페르소나, 문제 명세
Develop (개발)	해결책을 실험하고 설계	아이디어 회의, 프로토타입
Deliver (전달)	실제 구현과 운영	UI 설계, 피드백 반영, 서비스 런칭

✅ 목표 수립 - 사용자 설정 (Discover)

• 사용자의 숙련도에 따른 UX 전략 설정

초보자 vs 숙련자 UX 비교

항목	초보자 UX	숙련자 UX
목적	쉽게 이해하고 실수 방지	반복 작업을 빠르게 수행
UI 설계	설명 중심, 단계적 안내	단축키, 사용자 정의 중심
피드백	친절한 안내 메시지	최소한의 응답 시간
네비게이션	단계별 흐름 (step-by-step)	최소 클릭으로 바로 접근
기능 노출	점진적 (처음엔 숨김)	즉시 모든 기능 접근 가능
예시	은행 앱의 초보자 모드	Figma의 단축키 중심 편집 환경

✅ 상황 분석 (Discover)

• '왜' 문제를 해결해야 하는지 파악, '누구'를 위한 디자인인지 명확히 하기 위해 사용
• 서비스와 관련해서 제반 상황에 대한 분석
• 통계분석, UX 평가, 트렌드 분석, WOM 분석
• WOM 분석: 온라인 상의 사용자 리뷰 분석
  • 극단적으로 부정적인 이야기는 주의
  • 별점은 무시(대부분의 사람들이 별 생각 없이 점수를 매긴다)
  • 전체적인 패턴을 읽는데 집중

✅ 필드 리서치 (Discover)

🔹필드 리서치

• 실제 환경 속에서 행동, 생각, 사용 맥락을 관찰하고 분석
• 디자인 가설이 아닌 현실의 사용자 문제를 발견하는 데 초점
• 사용자를 방해하지 말고, 사전 동의 필수, 해석의 객관성 유지

방법	설명	예시
현장 관찰	실제 행동을 관찰	지하철에서 앱 사용하는 모습 보기
현장 인터뷰	현장에서 직접 인터뷰	병원 접수대에서 질문
참여 관찰	직접 체험	키오스크에서 직접 주문
셰도잉	사용자를 따라다님	택배기사의 하루 동선 기록
컨텍스트 인쿼리	행동 중간에 맥락 질문	“왜 이 버튼 누르셨어요?” 질문

🔹필드 리서치 - 비구조적 인터뷰

• 사전 질문지를 정해두지 않고, 흐름에 따라 질문을 자유롭게 이어가는 인터뷰 방식
• 사용자가 예상치 못한 인사이트나 문제점을 말하게 되는 경우가 많음

✅ 모델링 (Define)

• 사용자의 목표, 행동, 감정, 흐름 등을 체계적으로 분석하고 이를 바탕으로 사용자 경험을 도식화 하거나 모델로 표현
• 사용자의 문제 해결 과정을 이해하기 위해 사용
• 제품/서비스의 사용 맥락 파악
• 팀 간 공통된 사용자 이해 공유 → 디자인/기획/개발 간 협업 효율 향상

🔹모델링 - Affinity Diagram

• 다양한 정보나 의견을 내용의 유사성에 따라 묶어서 정리함으로써 문제의 본질을 파악하고 아이디어를 구조화하기 위한 시각적 정리 도구
• 복잡하거나 방대한 정보를 의미 있는 그룹으로 정리
• 사용자 피드백, 브레인스토밍 결과, 리서치 데이터 등을 구조화
• 창발성(Emergence): 여러 개의 개별 요소가 모일 때, 그 자체로는 설명할 수 없던 새로운 특성이나 행동이 전체 시스템에서 나타나는 현상

🔹모델링 - 카노 모델

• 사용자의 기대와 만족도에 따라 기능을 분류하는 프레임워크
• 기능 설계의 우선순위를 결정할 때 활용 됨

유형	설명	예시
기본 기능	없으면 불만족, 있어도 당연하게 여김	앱 로그인 기능
성과 기능	많을수록 만족, 적으면 불만족	배터리 지속시간,배송 속도
매력 기능	있으면 감동, 없어도 불만족 아님	다크모드, 무료 쿠폰
무관 기능	있어도 불만족도 만족도 없음	애니메이션 전환 효과
역효과 기능	있으면 오히려 불편	과한 팝업, 자동 재생 영상

파괴적 혁신(Disruptive Innovation)

• 기존 시장에서 간과되던 저가/저기능 제품이 새로운 가치를 제공
• 시장의 후발주자가 채택하기 좋은 전략
• 기존 시장의 강자들이 High End 를 추구할 때 제품의 기능이 고객의 needs 보다 훨씬 상회하여 매력을 못 느낌 → 고객의 needs 만큼의 스펙을 갖춘 단순하고 저비용의 제품을 더 매력적으로 느낌

핵심 특징

항목	설명
시작점	낮은 성능, 저비용, 틈새시장용 제품/서비스
주요 고객	기존 주류가 아닌 ‘무시되던 사용자’, 신생 수요
발전 과정	점점 품질이 개선되며 기존 시장까지 잠식
결과	시장을 재편하거나, 기존 강자가 몰락하기도 함

카노 모델과 비교

항목	카노 모델	파괴적 혁신
사용자 반응	매력 기능으로 "우와!" → 점점 성과 기능화	틈새 사용자 대상 → 나중에 대중에게 확산
제품/기능 전략	기능 우선순위, 만족도 분석	단순함, 저비용, 새로운 경험 중심
기업 반응	기존 기능을 고도화	파괴적 기술을 무시하거나 늦게 반응
성공 요인	기능의 품질·타이밍	단순성 + 새로운 사용자 경험 창출

🔹모델링 - 페르소나

• 제품 또는 서비스의 대표 사용자 유형을 구체적이고 ㅇ입체적으로 표현한 가상의 인물
• 실사용자의 목표, 행동, 니즈, 불편사항 등을 바탕으로 작성됨

🔹모델링 - Journey Map

• 사용자가 제품이나 서비스를 이용하는 전체 과정(여정)을 시각적으로 정리한 지도
• 각 단계에서 사용자의 생각, 감정, 행동, 접점 등을 분석

✅ UX 전략 (Develop)

UX 전략 3요소

• 사용자 : 행동, 니즈, 감정 중심
• 비즈니스 : 수익성, 운영 효율성 고려
• 기술 : 구현 가능성, 시스템 연계

UX 전략 유형

• 없던 것을 창조(ex.아이폰)
• 기존 제품에 새로운 가치 추가(ex.날개없는 선풍기)

✅ UX 서비스 디자인 (Develop)

• 목표: 사용자에게 "복잡하지 않고 일관된 경험" 제공
• UX 전략과 사용자 경험에 대한 구체적인 이해를 기반으로 제품의 구체적인 내용과 뼈대, 형태, 모습을 디자인

🔹핵심 요소

• 사용자 중심: 고객의 행동과 감정을 중심으로 서비스 설계
• 터치포인트 관리: 고객이 만나는 모든 접점(UI, 키오스크, 콜센터 등)을 통합적으로 고려
• 백스테이지 고려: 내부 직원, 시스템, 업무 흐름까지 함께 설계
• 여정 기반 접근: 사용자의 여정을 시간 흐름에 따라 단계별로 분석 및 설계

🔹주의 사항

• 화면(UI)만 설계하지 말 것: 전체 경험 흐름(전화, 대기, 응대 등)까지 포함해야 함
• 사용자-직원 간 상호작용 무시 금지: B2C뿐 아니라 내부 직원 경험(EX)도 고려해야 안정적 서비스 운영 가능
• 각 채널이 따로 노는 설계 지양: 앱, 웹, 오프라인의 경험이 일관되게 연결되어야 함
• 고객 여정을 무시한 기능 개발 금지: 기술 중심이 아닌 고객 여정 기반의 서비스 구성 필요
• 단편적인 UX 개선에 머무르지 말 것: 전체 프로세스의 흐름과 구조를 함께 리디자인해야 진짜 개선이 됨

🔹프로토타입: 제품이나 서비스가 실제처럼 작동하는 모형을 만들어 사용자나 아해관계자와 테스트하는 UX 도구

• 아이디어 검증: 머릿속 설계를 실제처럼 구현해보고 문제점 확인
• 사용자 피드백 수집: 조기 테스트로 UX 문제 발견 가능
• 팀 간 커뮤니케이션 도구: 기획자–디자이너–개발자가 동일한 그림을 보며 협업 가능
• 리스크 최소화: 개발 전에 미리 테스트함으로써 시간·비용 낭비 예방

✅ 구현 (Deliver)

• 디자인된 UX 를 실제 제품이나 서비스로 개발, 적용, 배포하고 운영하는 단계
• Frontend UI Framework: 웹/앱 사용자 인터페이스를 빠르게 일관되게 개발할 수 있도록 도와주는 도구 세트 (ex. Bootstrap,Tailwind CSS)

좋은 UX의 핵심요소

요소	설명	실전 예시
직관성 (Intuitiveness)	사용자가 설명 없이도 쉽게 사용할 수 있음	"뒤로가기" 버튼은 항상 왼쪽 위에 있음
일관성 (Consistency)	앱, 웹, 오프라인 등 모든 접점이 동일한 흐름과 방식 유지	네이버 앱과 PC 웹의 메뉴 구조가 유사
피드백 제공 (Feedback)	사용자의 행동에 대한 즉각적 반응 제공	"비밀번호가 틀렸습니다"라는 빨간 문구
접근성 (Accessibility)	다양한 사용자(장애인, 노약자 등)도 쉽게 사용할 수 있음	다크모드, 음성 안내, 큰 글씨 모드
간결함 (Simplicity)	복잡한 기능은 숨기고, 필요한 것만 명확하게 노출	은행 앱의 송금화면: 계좌번호 + 금액만 입력
유연성 (Flexibility)	다양한 사용자의 니즈와 환경에 맞게 조정 가능	앱 테마 변경, 맞춤형 알림 설정
에러 방지와 복구 (Error Prevention & Recovery)	실수를 최소화하고, 실수해도 쉽게 복구 가능	‘삭제 취소’ 버튼, 실시간 유효성 검사
감정적 만족감 (Emotional Delight)	기능 외에 즐거움이나 감동을 주는 디자인	부드러운 애니메이션, 축하 메시지, 쿠폰 발급

---

2️⃣ 서비스 프로토타입 설계 및 구현

🔹프로토타입 목적

• 아이디어 검증: 머릿속에 있던 UX 설계를 실제로 만들어보며 문제점 파악
• 사용자 피드백 수집: 초기 사용자 테스트를 통해 문제점 조기 발견
• 팀 간 커뮤니케이션 도구: 기획자-디자이너-개발자가 같은 그림을 보며 이야기할 수 있음
• 리스크 최소화: 본격 개발 전 테스트로 시간/비용 낭비 방지

🔹흐름 설계 단계

• 사용자 목표 정의(ex. 좌석 예약)
• 주요 시나리오 도출(ex. 로그인 → 도서관 선택 → 좌석 선택 → 예약)
• 필요한 화면 목록화(ex. 로그인화면, 리스트화면, 상세정보화면)
• 각 화면 간 연결 관계 설계(ex. 버튼 클릭 시 이동 경로)

🔹프로토타입 제작 시 주의점

• ‘가짜’임을 명확히 전달: 실제 기능이 구현된 것이 아님을 사용자에게 사전 고지
• 목적에 맞는 정교도 선택: 모든 프로토타입이 완성형일 필요는 없음 – 빠르고 가볍게 시작
• 흐름 중심 테스트: 기능 구현이 아닌 흐름 설계와 피드백 수집이 핵심
• 사용자 피드백 기록: 테스트한 결과는 반드시 분석하고 문서화하여 반영
• 반복 개선 강조: 1회성 제작이 아니라 점진적 개선을 통해 완성도를 높여야 함

---

3️⃣ Figma 로 프로토타입 구현 실습

✅ 사용자 페르소나 정의(고객 요구사항)

홍길동(21세 대학생)
목표: 조용한 도서관 좌석에서 공부하고 싶다
상황: 모바일로 자주 접속, 반복적으로 동일한 좌석을 예약함
니즈: 빠르고 간단하게 예약하고 싶음, 혼잡한 좌석은 피하고 싶음
문제: 좌석 정보를 눌러야만 상태를 알 수 있어서 번거로움

✅ 문제 정의

• 좌석 상태를 한눈에 파악하기 어려움
• 반복적인 예약에 시간이 오래 걸림
• 좌석 예약 과정이 번거로움

✅ 아이디어 도출

• 좌석 상태 확인 어려움: 실시간 좌석 지도 제공, 색상으로 이용 가능 여부 표시
• 예약 반복: “즐겨찾기 좌석” 기능, 최근 예약한 자리 자동 제안
• 번거로운 예약과정: 예약 과정 간소화, 필요한 기능만 두기

✅ UX 전략 연결 (3요소 체크)

• 사용자: 최소 클릭으로 예약, 직관적인 인터페이스
• 비즈니스: 예약률 증가, 자원 낭비 최소화
• 기술: 모바일 최적화, 실시간 데이터 처리 가능해야 함

✅ 산출물

https://www.figma.com/design/OHvTBAHLR2KHqw3qOhSSZx/%EC%A0%9C%EB%AA%A9-%EC%97%86%EC%9D%8C?node-id=0-1&t=jiiGkscgtPDw9Lxd-1

• 피드백 : 앱 로고/인트로 를 깔끔하게 보여줄 수 있는 splash screen 추가하기
  → 앱 브랜딩은 물론 사용자에게 좋은 인상을 심어줄 수 있다.