LabHub

블로그

디자인 씽킹 & UX 입문 — 사용자 중심으로 문제를 해결하는 방법

2026-04-13 · 47 분 읽기 · #culture#design-thinking#ux#ui#product#user-research#2026-04

한국어English日本語

들어가며

"기능은 완벽한데 아무도 안 씁니다." 개발자라면 한 번쯤 들어봤을 이야기입니다. 기술적으로 뛰어난 제품이 시장에서 실패하는 가장 흔한 이유는 사용자를 이해하지 못했기 때문입니다.

디자인 씽킹(Design Thinking)은 사용자의 진짜 문제를 발견하고, 창의적인 해결책을 빠르게 검증하는 체계적 방법론입니다. 이 글은 디자인 씽킹의 5단계부터 UX 리서치, UI 디자인 원칙, 접근성, 프로토타이핑, 그리고 개발자가 실무에서 바로 적용할 수 있는 UX 팁까지 폭넓게 다룹니다.

디자이너 전용 지식이 아닙니다. 좋은 소프트웨어를 만드는 모든 사람에게 필요한 기본기입니다.

Part 1: 디자인 씽킹

1. 디자인 씽킹이란 무엇인가

기원과 정의

디자인 씽킹은 1960년대 건축과 산업 디자인 분야에서 시작되어, IDEO와 스탠포드 d.school을 통해 비즈니스와 기술 분야로 확산된 인간 중심 문제 해결 방법론입니다.

핵심 철학은 단순합니다.

기존의 선형적 문제 해결(문제 정의 -> 분석 -> 해결)과 달리, 디자인 씽킹은 반복과 피드백을 핵심으로 합니다.

왜 개발자에게 중요한가

개발자는 흔히 "어떻게 만들 것인가(How)"에 집중합니다. 하지만 디자인 씽킹은 "왜 만드는가(Why)"와 "누구를 위한 것인가(Who)"를 먼저 묻습니다. 이 관점의 전환은 다음과 같은 실질적 차이를 만듭니다.

관점기술 중심사용자 중심
출발점기술적 가능성사용자의 고충
성공 기준기능 완성도문제 해결 여부
피드백 시점출시 후개발 전/중 지속적으로
변경 비용높음 (후반에 발견)낮음 (초기에 발견)

2. 디자인 씽킹 5단계

스탠포드 d.school의 5단계 프레임워크는 디자인 씽킹의 가장 널리 알려진 모델입니다.

1단계: 공감(Empathize)

사용자가 실제로 무엇을 경험하고, 무엇을 느끼며, 무엇에 어려움을 겪는지 깊이 이해하는 단계입니다.

핵심 활동

실수하기 쉬운 점

2단계: 정의(Define)

공감 단계에서 수집한 데이터를 분석하여, 해결해야 할 핵심 문제를 명확하게 정의합니다.

관점 진술문(POV Statement) 작성법

좋은 문제 정의의 조건

3단계: 아이디어 도출(Ideate)

정의된 문제에 대해 가능한 한 많은 해결 아이디어를 생성하는 단계입니다.

대표적 기법들

효과적인 아이디어 선별 기준

이 세 원이 겹치는 지점이 혁신의 Sweet Spot입니다.

4단계: 프로토타입(Prototype)

선별된 아이디어를 빠르고 저렴하게 구체화하여 테스트 가능한 형태로 만듭니다.

프로토타입의 원칙

프로토타이핑 도구와 기법에 대해서는 이 글의 Part 3에서 자세히 다룹니다.

5단계: 테스트(Test)

프로토타입을 실제 사용자에게 보여주고, 가설이 맞는지 검증합니다.

테스트의 핵심 원칙

테스트 후 액션

이 반복 루프가 디자인 씽킹의 본질입니다.

Part 2: 사용자 리서치

3. UX 리서치 방법론

정성적 리서치 vs 정량적 리서치

구분정성적(Qualitative)정량적(Quantitative)
목적"왜" 그러는지 이해"얼마나" 많은지 측정
방법인터뷰, 관찰, 다이어리설문, A/B 테스트, 분석
참가자 수5-15명100명 이상
결과물인사이트, 테마, 패턴통계, 그래프, 수치
사용 시점탐색/발견 단계검증/최적화 단계

실무에서는 두 가지를 결합하는 것이 가장 효과적입니다. 정성 리서치로 "왜"를 발견하고, 정량 리서치로 "얼마나"를 검증합니다.

사용자 인터뷰

인터뷰 준비

인터뷰 진행 팁

페르소나(Persona)

페르소나는 리서치 데이터를 기반으로 만든 가상의 대표 사용자 프로필입니다.

좋은 페르소나의 구성 요소

주의사항: 페르소나를 "상상"으로 만들면 의미가 없습니다. 반드시 실제 리서치 데이터에 근거해야 합니다. 근거 없는 페르소나는 팀의 편견을 정당화하는 도구가 됩니다.

고객 여정 맵(Customer Journey Map)

사용자가 제품/서비스와 상호작용하는 전체 과정을 시각적으로 표현한 도구입니다.

여정 맵의 구성 요소

  1. 단계(Stages): 인지 -> 검토 -> 결정 -> 사용 -> 지지/이탈
  2. 행동(Actions): 각 단계에서 사용자가 하는 행동
  3. 생각(Thoughts): 그 순간 사용자의 내면 독백
  4. 감정(Emotions): 긍정-중립-부정 감정 곡선
  5. 접점(Touchpoints): 사용자와 제품이 만나는 지점
  6. 기회(Opportunities): 개선할 수 있는 지점

여정 맵 작성 팁

사용성 테스트

사용자에게 특정 태스크를 수행하도록 요청하고, 그 과정을 관찰하여 사용성 문제를 발견합니다.

사용성 테스트 유형

태스크 시나리오 작성법

Part 3: UX 원칙과 법칙

4. 닐슨의 10가지 사용성 휴리스틱

제이콥 닐슨(Jakob Nielsen)이 1994년에 정의한 10가지 휴리스틱은 30년이 지난 지금도 UX 평가의 표준으로 사용됩니다.

1) 시스템 상태의 가시성

시스템이 현재 무엇을 하고 있는지 사용자에게 적절한 피드백을 적시에 제공해야 합니다.

2) 시스템과 현실 세계의 일치

시스템이 사용하는 언어, 개념, 순서가 사용자에게 익숙해야 합니다.

3) 사용자 통제와 자유

사용자가 실수했을 때 쉽게 되돌릴 수 있어야 합니다.

4) 일관성과 표준

같은 단어, 상황, 동작은 항상 같은 의미를 가져야 합니다.

5) 오류 예방

좋은 에러 메시지보다 오류가 발생하지 않도록 설계하는 것이 더 중요합니다.

6) 기억보다 인식

사용자가 기억해야 할 것을 최소화하고, 선택지를 눈에 보이게 제시합니다.

7) 유연성과 효율성

초보자와 전문가 모두를 만족시키는 디자인을 제공합니다.

8) 미학적이고 미니멀한 디자인

모든 화면에는 꼭 필요한 정보만 담아야 합니다. 불필요한 정보는 필요한 정보의 가시성을 떨어뜨립니다.

9) 오류 인식, 진단, 복구 지원

에러 메시지는 기술 코드가 아니라 일상 언어로 작성하고, 문제의 원인과 해결 방법을 명확히 제시해야 합니다.

10) 도움말과 문서

시스템이 직관적이라 도움말이 불필요한 것이 이상적이지만, 필요할 때는 쉽게 찾을 수 있고 구체적이어야 합니다.

5. UX의 핵심 법칙들

피츠의 법칙(Fitts's Law)

"대상까지의 거리가 짧을수록, 대상의 크기가 클수록 클릭하기 쉽다."

실무 적용:

힉의 법칙(Hick's Law)

"선택지가 많을수록 결정에 걸리는 시간이 늘어난다."

실무 적용:

밀러의 법칙(Miller's Law)

"보통 사람은 작업 기억에서 7(플러스마이너스 2)개의 항목을 유지할 수 있다."

실무 적용:

제이콥의 법칙(Jakob's Law)

"사용자는 대부분의 시간을 다른 사이트에서 보낸다. 따라서 당신의 사이트도 다른 사이트와 비슷하게 동작하기를 기대한다."

실무 적용:

Part 4: UI 디자인 기초

6. 시각적 계층(Visual Hierarchy)

사용자의 시선을 가장 중요한 것에서 덜 중요한 것으로 자연스럽게 이끄는 디자인 원리입니다.

시각적 계층의 도구들

크기(Size): 큰 요소가 먼저 눈에 들어옵니다. 제목, 부제, 본문의 크기 차이를 통해 정보의 중요도를 전달합니다.

색상(Color): 대비가 높은 색상은 주목도를 높입니다. CTA 버튼에 강조색을 사용하는 것이 대표적입니다.

여백(Whitespace): 빈 공간은 낭비가 아닙니다. 요소 주변의 여백이 많을수록 그 요소가 돋보입니다. Apple 웹사이트가 여백을 극적으로 활용하는 것으로 유명합니다.

위치(Position): F-패턴(텍스트 중심)과 Z-패턴(이미지 중심)이 대표적인 시선 흐름 패턴입니다.

7. 타이포그래피

기본 원칙

서체 조합: 일반적으로 2-3개의 서체 조합이 적절합니다. 제목과 본문에 서로 다른 서체를 사용하여 대비를 만듭니다.

가독성 지표

웹 타이포그래피 팁

8. 색상 이론

색상의 심리적 효과

색상연상 감정일반적 용도
파랑신뢰, 안정금융, 기업, 소셜미디어
빨강긴급, 열정경고, 세일, 음식
초록성장, 안전완료, 성공, 자연/친환경
노랑주의, 활력경고(warning), 하이라이트
보라고급, 창의성프리미엄 브랜드

색상 시스템 구축

60-30-10 법칙

대비 비율(Contrast Ratio)

WCAG 2.1 기준:

9. 그리드 시스템

왜 그리드를 사용하는가

12컬럼 그리드

가장 널리 사용되는 시스템입니다. 12는 2, 3, 4, 6으로 나누어지므로 유연한 레이아웃 조합이 가능합니다.

| 1열 | = 12컬럼 전체
| 2열 | = 6 + 6
| 3열 | = 4 + 4 + 4
| 4열 | = 3 + 3 + 3 + 3
| 비대칭 | = 8 + 4 (콘텐츠 + 사이드바)

반응형 브레이크포인트

일반적인 브레이크포인트 기준:

Part 5: 정보 아키텍처

10. 정보 아키텍처(IA)란

콘텐츠를 구조화하고 조직화하여 사용자가 원하는 정보를 쉽게 찾을 수 있도록 설계하는 분야입니다.

카드 소팅(Card Sorting)

사용자가 직접 콘텐츠를 그룹화하고 라벨링하도록 하여, 사용자의 멘탈 모델에 맞는 정보 구조를 설계합니다.

유형

사이트맵

정보 구조를 트리 형태로 시각화한 문서입니다.

사이트맵 작성 원칙

네비게이션 패턴

글로벌 네비게이션: 모든 페이지에서 접근 가능한 주요 메뉴 (상단 바, 사이드바)

로컬 네비게이션: 현재 섹션 내에서의 하위 메뉴

브레드크럼(Breadcrumbs): 현재 위치를 보여주는 경로 표시 (홈 > 카테고리 > 서브카테고리 > 현재 페이지)

검색: 네비게이션의 보완 수단. 사용자의 약 50%는 검색을 먼저 시도합니다

패싯 네비게이션(Faceted): 여러 기준으로 동시에 필터링. 쇼핑몰의 가격/브랜드/색상 필터가 대표적

Part 3: 프로토타이핑

11. 프로토타입의 종류

Lo-fi(Low-Fidelity) 프로토타입

종이 프로토타입(Paper Prototype)

와이어프레임(Wireframe)

Hi-fi(High-Fidelity) 프로토타입

인터랙티브 프로토타입

어떤 피델리티를 선택할 것인가

상황권장 피델리티
아이디어 초기 탐색Lo-fi (종이, 화이트보드)
구조와 흐름 검증Lo-fi (와이어프레임)
사용성 테스트Mid-fi ~ Hi-fi
이해관계자 프레젠테이션Hi-fi
개발 핸드오프Hi-fi (Figma 등)

12. Figma 실무 활용

왜 Figma인가

개발자를 위한 Figma 활용법

  1. Dev Mode 활용: CSS 코드, 간격, 색상 값을 직접 확인합니다
  2. Inspect 패널: 선택한 요소의 속성을 코드로 변환합니다
  3. 프로토타입 링크 확인: 화면 간 전환과 인터랙션 명세를 확인합니다
  4. 코멘트 기능: 디자이너에게 구현 관련 질문을 남깁니다

Part 4: 접근성(A11y)

13. 웹 접근성이 중요한 이유

수치로 보는 접근성

접근성은 법적 의무

14. WCAG 2.1 핵심 원칙

POUR 원칙

인식 가능(Perceivable)

운용 가능(Operable)

이해 가능(Understandable)

견고함(Robust)

15. 키보드 네비게이션

핵심 키보드 인터랙션

키동작
Tab다음 포커스 가능한 요소로 이동
Shift+Tab이전 요소로 이동
Enter/Space버튼 활성화, 링크 이동
Esc모달/드롭다운 닫기
화살표 키라디오 버튼, 탭, 메뉴 내 이동

개발 시 체크리스트

16. 스크린리더와 ARIA

시맨틱 HTML이 먼저다

ARIA(Accessible Rich Internet Applications)를 쓰기 전에, 올바른 HTML 요소를 사용하는 것이 우선입니다.

<!-- 나쁜 예 -->
<div onclick="handleClick()">버튼처럼 보이는 div</div>

<!-- 좋은 예 -->
<button onclick="handleClick()">진짜 버튼</button>

ARIA의 핵심 역할

ARIA 사용 원칙

  1. 네이티브 HTML로 충분하면 ARIA를 쓰지 않습니다
  2. 시맨틱 의미를 변경하지 않습니다
  3. 모든 인터랙티브 요소는 접근 가능한 이름을 가져야 합니다
  4. ARIA를 추가하면 반드시 키보드 지원도 함께 구현합니다

17. 색 대비와 시각 접근성

대비 검사 도구

색각 이상을 위한 디자인

Part 5: 모바일 UX

18. 엄지 영역(Thumb Zone)

스마트폰 사용 패턴

Steven Hoober의 연구에 따르면, 사용자의 약 75%는 한 손으로 스마트폰을 사용합니다. 이에 따라 화면을 세 구역으로 나눕니다.

모바일 UX 가이드라인

19. 제스처와 인터랙션

일반적인 모바일 제스처

제스처일반적 용도
탭(Tap)선택, 활성화
더블 탭확대/축소
길게 누르기컨텍스트 메뉴, 미리보기
스와이프페이지 전환, 삭제, 보관
핀치확대/축소
드래그이동, 재정렬
풀 투 리프레시콘텐츠 새로고침

제스처 디자인 원칙

20. 반응형 디자인

모바일 퍼스트 접근

왜 모바일 퍼스트인가

반응형 디자인의 핵심 기법

Part 6: UX 메트릭과 개발자를 위한 UX

21. UX 메트릭

SUS(System Usability Scale)

10개의 표준화된 질문으로 시스템의 사용성을 0-100점으로 평가합니다.

SUS의 장점은 빠르고 간단하며, 산업 평균과 비교할 수 있다는 것입니다.

NPS(Net Promoter Score)

"이 제품을 친구/동료에게 추천하시겠습니까?" (0-10점)

태스크 성공률(Task Success Rate)

사용성 테스트에서 참가자가 주어진 태스크를 성공적으로 완료한 비율입니다.

기타 핵심 메트릭

22. 개발자를 위한 UX 실전 가이드

코드 리뷰에서 UX 체크하기

기능 코드 리뷰 시 다음 UX 체크리스트를 추가합니다.

로딩 상태

폼 처리

접근성

성능

디자인 시스템 활용하기

디자인 시스템은 일관된 UI를 효율적으로 구축하기 위한 재사용 가능한 컴포넌트와 가이드라인의 집합입니다.

디자인 시스템의 핵심 구성 요소

  1. 디자인 토큰(Design Tokens): 색상, 간격, 타이포그래피, 그림자 등의 값을 변수로 관리합니다
/* 예시: CSS Custom Properties로 디자인 토큰 관리 */
:root {
  --color-primary: #2563eb;
  --color-error: #dc2626;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --font-size-body: 16px;
  --font-size-heading: 24px;
  --border-radius-md: 8px;
}
  1. 컴포넌트 라이브러리: 버튼, 입력 필드, 카드, 모달 등 재사용 가능한 UI 블록
  2. 패턴 라이브러리: 로그인 폼, 검색, 테이블 필터 등 반복되는 UI 패턴
  3. 가이드라인 문서: 각 컴포넌트의 사용법, Do/Don't, 접근성 주의사항

인기 있는 오픈소스 디자인 시스템

23. UX와 개발의 협업

디자인 핸드오프 체크리스트

디자이너로부터 디자인을 받을 때 확인해야 할 사항:

  1. 모든 상태가 정의되어 있는가: 기본, 호버, 활성, 비활성, 에러, 로딩, 빈 상태
  2. 반응형 명세가 있는가: 모바일, 태블릿, 데스크톱 각각의 레이아웃
  3. 인터랙션 명세가 있는가: 전환 애니메이션, 제스처, 마이크로 인터랙션
  4. 에지 케이스: 텍스트가 매우 긴 경우, 데이터가 없는 경우, 권한이 없는 경우

개발자가 UX에 기여하는 방법

마무리

디자인 씽킹과 UX는 "디자이너의 영역"이 아닙니다. 사용자에게 가치를 전달하는 소프트웨어를 만드는 것이 모든 개발자의 궁극적 목표라면, UX에 대한 이해는 선택이 아니라 필수입니다.

이 글에서 다룬 내용을 한 줄로 요약하면 다음과 같습니다.

사용자를 관찰하고, 문제를 정의하고, 빠르게 시도하고, 배우고, 다시 시도하라.

오늘부터 할 수 있는 세 가지:

  1. 닐슨의 10가지 휴리스틱으로 현재 프로젝트를 평가해 보세요 - 가장 쉬운 첫걸음입니다
  2. 키보드만으로 자신의 앱을 사용해 보세요 - 접근성 문제가 바로 드러납니다
  3. 코드 리뷰에 UX 체크리스트를 추가해 보세요 - 팀 전체의 UX 의식 수준이 올라갑니다

좋은 UX는 거창한 혁신이 아니라, 사소한 배려의 축적입니다.

참고 자료

퀴즈: 디자인 씽킹 & UX 이해도 점검

Q1. 디자인 씽킹 5단계를 순서대로 나열하세요.

A1. 공감(Empathize) -> 정의(Define) -> 아이디어 도출(Ideate) -> 프로토타입(Prototype) -> 테스트(Test)

Q2. 닐슨 노먼 그룹의 연구에 따르면, 사용성 문제의 약 85%를 발견하려면 최소 몇 명의 테스트 참가자가 필요합니까?

A2. 5명

Q3. 피츠의 법칙의 핵심 원리를 설명하세요.

A3. 대상까지의 거리가 짧을수록, 대상의 크기가 클수록 클릭(선택)하기 쉽다.

Q4. WCAG 2.1의 POUR 원칙 네 가지를 나열하세요.

A4. 인식 가능(Perceivable), 운용 가능(Operable), 이해 가능(Understandable), 견고함(Robust)

Q5. 밀러의 법칙에서 말하는 작업 기억의 한계는 몇 개입니까?

A5. 7(플러스마이너스 2)개. 즉 5-9개

Q6. SUS(System Usability Scale)의 평균 점수와 우수 기준 점수는?

A6. 평균 68점, 80점 이상이면 우수

Q7. 모바일 터치 타깃의 최소 권장 크기는?

A7. Apple 기준 44x44pt, Google Material Design 기준 48x48dp

Q8. 60-30-10 법칙에서 각 비율이 의미하는 색상 역할을 설명하세요.

A8. 60%는 주요 색상(배경 등 넓은 영역), 30%는 보조 색상(카드, 섹션 구분), 10%는 강조 색상(CTA, 중요 링크)

Q9. ARIA를 사용하기 전에 가장 먼저 해야 할 것은 무엇입니까?

A9. 올바른 시맨틱 HTML 요소를 사용해야 합니다. 네이티브 HTML로 충분하면 ARIA를 사용하지 않는 것이 원칙입니다.

Q10. 고객 여정 맵의 5가지 구성 요소를 나열하세요.

A10. 단계(Stages), 행동(Actions), 생각(Thoughts), 감정(Emotions), 접점(Touchpoints). 여기에 기회(Opportunities)를 추가하면 6가지가 됩니다.

원문 보기: https://www.youngju.dev/blog/culture/2026-04-13-design-thinking-ux

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다