Adobe XD로 목업을 처음 만들던 날, 제 디자인이 개발자에게 전달되는 순간 절반 이상의 의도가 사라졌습니다. 색상 코드는 맞는데 간격이 달랐고, 버튼 상태는 하나만 전달됐으며, 접근성 요구사항은 아예 누락됐습니다. 와이어프레임에서 목업으로, 목업에서 프로토타입으로 진화하는 과정에서 UX 디자이너가 놓치기 쉬운 것들이 생각보다 많습니다. Adobe XD는 이러한 격차를 줄이는 강력한 도구지만, 도구만으로는 충분하지 않습니다.
Adobe XD 목업 제작의 핵심 기능
와이어프레임과 목업의 차이를 제대로 이해하지 못하면 디자인 과정 자체가 비효율적으로 흐릅니다. 와이어프레임(Wireframe)이란 페이지의 핵심 요소 구조와 배치를 보여주는 기본 레이아웃으로, 보통 그레이스케일로 표현되며 시각적 스타일은 배제합니다. 쉽게 말해 건축의 청사진과 같은 역할입니다. 반면 목업(Mockup)은 실제 제품의 고충실도(High-Fidelity) 표현으로, 색상·타이포그래피·이미지 등 모든 시각 요소를 포함하여 최종 결과물에 가까운 모습을 보여줍니다(출처: Nielsen Norman Group).
제가 처음 Adobe XD를 열었을 때 가장 먼저 만난 것은 아트보드 선택 화면이었습니다. 데스크톱과 모바일 아트보드 중 하나를 선택하는 단순한 과정이지만, 이 선택이 이후 모든 디자인 결정의 출발점이 됩니다. 네비게이션 바를 만들기 위해 직사각형 도구를 사용하고, 속성 패널에서 채우기 색상을 변경하는 과정은 직관적이었습니다. 하지만 실무에서는 이 단순한 작업에도 함정이 있습니다. 색상 하나를 선택할 때도 WCAG(Web Content Accessibility Guidelines) 기준의 색상 대비 비율을 고려해야 합니다. 일반 텍스트의 경우 최소 4.5대 1의 대비 비율이 필요한데, 이는 시력이 낮은 사용자도 텍스트를 읽을 수 있도록 보장하는 기준입니다.
반복 그리드(Repeat Grid) 기능은 Adobe XD의 가장 강력한 시간 절약 도구입니다. 제품 카드나 리스트 항목처럼 반복되는 요소를 일일이 복사하지 않고, 한 번의 클릭으로 수평·수직 배열을 만들 수 있습니다. 저는 이 기능을 처음 써봤을 때 전자상거래 사이트의 제품 그리드를 30분 만에 완성했습니다. 하지만 여기에도 주의할 점이 있습니다. 반복 그리드로 생성한 요소들의 간격과 정렬은 나중에 CSS Grid나 Flexbox로 구현될 때 그대로 반영되므로, 디자인 단계에서 정확한 간격 값을 설정해야 합니다.
에셋 패널(Assets Panel)은 디자인 시스템의 기초를 구축하는 곳입니다. 색상·텍스트 스타일·컴포넌트를 저장하고 재사용할 수 있는데, 이는 디자인 일관성을 유지하는 핵심 메커니즘입니다. 디자인 시스템(Design System)이란 UI를 디자인하기 위한 표준과 지침의 모음으로, 구글의 Material Design이나 애플의 Human Interface Guidelines가 대표적인 예시입니다. 여기서 디자인 시스템이란 단순한 스타일 가이드를 넘어, 컴포넌트·패턴·원칙을 포함한 포괄적인 프레임워크를 의미합니다.(출처: InVision).
컴포넌트(Component) 기능은 제가 실무에서 가장 자주 사용하는 기능입니다. 버튼 하나를 컴포넌트로 만들면, 그 사본을 디자인 전체에서 사용할 수 있고, 기본 컴포넌트를 수정하면 모든 인스턴스가 자동으로 업데이트됩니다. 한 번은 프로젝트 중반에 버튼 스타일을 전면 변경해야 했는데, 컴포넌트 덕분에 5분 만에 100개 이상의 버튼을 일괄 수정했습니다. 만약 컴포넌트를 쓰지 않았다면 하루 종일 걸렸을 작업입니다.
주요 기능을 정리하면 다음과 같습니다:
- 반복 그리드: 동일 요소의 배열 자동 생성
- 에셋 패널: 색상·스타일·컴포넌트 중앙 관리
- 컴포넌트: 재사용 가능한 디자인 요소로 일관성 유지
프로토타입과 웹 접근성 구현
프로토타입(Prototype)은 목업에 상호작용을 추가하여 사용자가 실제로 클릭하고 탐색할 수 있게 만든 대화형 버전입니다. Adobe XD에서 프로토타입 탭을 클릭하면 트리거(Trigger)와 액션(Action)을 설정할 수 있습니다. 트리거란 사용자의 특정 동작(탭, 드래그, 호버 등)을 의미하고, 액션은 그 동작에 따라 발생하는 결과(화면 전환, 오버레이 표시 등)를 뜻합니다. 저는 버튼에 '탭' 트리거를 설정하고, '아트보드로 전환' 액션에 '슬라이드' 전환 효과를 적용했을 때, 디자인이 비로소 살아 움직이는 느낌을 받았습니다.
오버레이(Overlay) 기능은 햄버거 메뉴나 모달 다이얼로그를 구현할 때 유용합니다. 현재 화면 위에 새로운 레이어를 띄우는 방식이라 페이지 이동 없이도 추가 정보를 보여줄 수 있습니다. 하지만 여기서 웹 접근성 문제가 발생합니다. 오버레이가 나타났을 때 키보드 포커스가 오버레이 안으로 이동하지 않으면, 키보드 사용자는 오버레이 뒤의 요소를 계속 탭하게 됩니다. 목업을 디자인할 때 이러한 포커스 관리(Focus Management) 시나리오를 주석으로 명시해야 개발자가 올바르게 구현할 수 있습니다.
반응형 웹 디자인(Responsive Web Design)은 하나의 디자인이 데스크톱·태블릿·모바일 등 모든 화면 크기에서 적절하게 보이도록 조정하는 접근 방식입니다. 여기서 반응형이란 디바이스의 화면 너비에 따라 레이아웃이 유동적으로 변화한다는 의미입니다. Adobe XD에서 데스크톱 아트보드를 복제하고 모바일 크기로 조정할 때, 단순히 축소하는 것이 아니라 레이아웃 자체를 재구성해야 합니다. 예를 들어 데스크톱에서 가로로 나열된 카드는 모바일에서 세로로 쌓아야 하고, 네비게이션 바는 햄버거 메뉴로 전환해야 합니다. 제가 모바일 버전을 처음 디자인했을 때는 텍스트 크기를 줄이지 않아 가독성이 떨어졌고, 사용성 테스트에서 즉시 피드백을 받았습니다(출처: W3C).
웹 접근성(Web Accessibility)은 장애가 있는 사람들도 웹사이트를 사용하고 탐색할 수 있도록 보장하는 설계 원칙입니다. WCAG는 세 가지 적합성 수준(A, AA, AAA)로 나뉘며, 대부분의 기업은 AA 수준을 목표로 합니다. 색상 대비는 그중 가장 기본적인 요소입니다. 저는 WebAIM 대비 검사기로 네비게이션 바의 진한 파란색 배경과 흰색 텍스트 조합을 테스트했는데, 다행히 AA 기준을 충족했습니다. 하지만 연한 회색 텍스트를 사용했을 때는 대비 비율이 3.2대 1에 불과해 불합격 판정을 받았고, 즉시 더 어두운 회색으로 변경했습니다.
계층적 제목(Hierarchical Headings)은 HTML의 H1부터 H6까지 여섯 단계로 구성되며, 페이지 구조를 논리적으로 조직화합니다. H1은 페이지의 메인 제목으로 한 번만 사용하고, H2는 주요 섹션, H3는 하위 섹션을 나타냅니다. 화면 판독기 사용자는 제목을 탐색 포인트로 활용하므로, 시각적 크기만 크게 만들고 실제 HTML 태그는 div로 처리하면 접근성이 완전히 무너집니다. 저는 목업에 주석을 달 때 "이 텍스트는 H2 태그로 구현" 같은 메모를 추가하여 개발자가 의미론적 HTML(Semantic HTML)을 사용하도록 유도합니다. 의미론적 HTML이란 태그 자체가 콘텐츠의 의미를 전달하는 방식으로, nav·header·main·article 같은 태그를 활용합니다.
대체 텍스트(Alternative Text, Alt Text)는 이미지를 설명하는 텍스트로, 화면 판독기가 시각 장애 사용자에게 읽어줍니다. 제가 전자상거래 목업에 제품 이미지를 추가할 때는 "파란색 러닝화, 옆면 보기, 흰색 밑창"처럼 구체적으로 작성했습니다. "신발 이미지"처럼 모호한 설명은 사용자에게 아무 정보도 주지 못합니다.
접근성 체크리스트:
- 색상 대비 비율 4.5:1 이상 확인
- 모든 이미지에 대체 텍스트 추가
- 계층적 제목 구조 설계
- 키보드만으로 모든 기능 접근 가능하도록 설계
Adobe XD로 목업과 프로토타입을 만드는 것은 단순히 예쁜 화면을 그리는 작업이 아닙니다. 디자인 시스템을 구축하고, 사용자의 실제 경험을 시뮬레이션하며, 접근성 요구사항을 문서화하는 전 과정입니다. 제가 가장 뼈저리게 느낀 것은 목업 단계에서 접근성을 고려하지 않으면 개발 단계에서 두 배의 시간이 소요된다는 점입니다. 디자인 전달 시 상세한 주석과 디자인 시스템 문서를 함께 제공하면, 개발자와의 커뮤니케이션 비용이 극적으로 줄어듭니다. 지금 당장 여러분의 목업에 색상 대비를 검사하고, 키보드 네비게이션 시나리오를 추가해보시기 바랍니다.