디자인 아틀라스⟳디자인 프로세스
와이어프레임, 디자인 토큰, 더블 다이아몬드, 사용성 테스트 — 디자인이 만들어지는 과정의 용어. — 20개 항목
와이어프레임Wireframe
레이아웃과 정보 구조만 회색 상자로 표현한 저충실도 초안. 색·타이포·이미지는 아직 정하지 않습니다.
목업Mockup
실제 색·타이포·이미지를 입힌 정지 화면. 눌러도 반응하지 않는, "그림"으로서 완성된 디자인입니다.
프로토타입Prototype
화면과 화면을 실제로 연결해 눌렀을 때 흐름이 이어지는, 동작을 검증하기 위한 가짜 제품.
디자인 시스템Design system
컴포넌트·토큰·가이드라인을 한 곳에 모아 여러 제품·팀이 같은 부품으로 화면을 짜게 하는 살아있는 규격.
디자인 토큰Design token
색·간격·폰트 같은 디자인 결정을 이름 붙인 하나의 값으로 저장해, 그 값을 쓰는 모든 컴포넌트가 한 번에 바뀌게 하는 최소 단위.
아토믹 디자인Atomic design
원자(atom)·분자(molecule)·유기체(organism) 화학 비유로 인터페이스를 작은 부품부터 조립해 올라가는 브래드 프로스트의 방법론.
퍼소나Persona
리서치로 모은 실제 사용자 패턴을 이름·사진·목표를 가진 가상의 한 사람으로 압축한 도구.
사용자 여정 지도User journey map
사용자가 목표를 이루기까지 거치는 단계를 시간순으로 늘어놓고, 각 단계의 감정 기복을 함께 그린 지도.
카드 소팅Card sorting
콘텐츠 항목을 카드로 하나씩 써서 참가자가 직접 분류하게 하는, 사용자 머릿속 분류 체계를 캐내는 리서치 방법.
A/B 테스트A/B test
같은 화면의 두 버전을 실제 사용자에게 무작위로 나눠 보여주고 지표 차이를 통계로 비교하는 실험.
휴리스틱 평가Heuristic evaluation
실제 사용자 없이, 검증된 사용성 원칙 목록(주로 닐슨의 10가지 휴리스틱)에 비춰 전문가가 화면을 점검하는 방법.
사용성 테스트Usability test
실제 참가자에게 과제를 주고 프로토타입이나 제품을 직접 써보게 하며 어디서 막히는지 관찰하는 리서치 방법.
더블 다이아몬드Double diamond
발산과 수렴을 두 번 반복하는 마름모 두 개로 디자인 과정을 그린 영국 디자인 카운슬의 모델.
디자인 스프린트Design sprint
5일 동안 문제 정의부터 프로토타입 테스트까지 끝내는, 구글벤처스가 정리한 압축된 협업 프로세스.
정보 구조Information architecture
콘텐츠를 어떻게 분류하고 이름 붙이고 계층으로 연결할지 설계하는, 사이트·앱의 뼈대를 짜는 작업.
사용자 흐름User flow
한 과제를 시작부터 끝까지 완료하기까지 사용자가 거치는 화면과 결정 지점을 순서도로 그린 다이어그램.
무드보드Moodboard
색·질감·이미지·타이포 조각을 콜라주처럼 모아, 아직 이름 붙이기 전의 분위기를 눈으로 보여주는 초기 리서치 산출물.
스타일 타일Style tile
색상 팔레트·폰트·버튼 샘플을 한 장에 정리해 "실제 화면을 그리기 전, 스타일에 먼저 합의"하는 산출물.
핸드오프Handoff
디자인이 확정된 뒤 개발자가 그대로 구현할 수 있도록 치수·색상·폰트·에셋을 정리해 넘기는 과정.
레드라인Redlines
요소 사이의 간격·크기를 빨간 선과 숫자로 표시해, 개발자가 CSS 값을 추측하지 않고 그대로 옮기게 하는 측정 주석.