Figma 중심 워크플로
Figma Community는 템플릿과 컴포넌트를 공유하는 생태계입니다. 빠른 시안과 패턴 탐색에 유용합니다. 뷰패턴 스페이스 디지털은 레퍼런스를 그대로 쓰지 않고 간격과 색상 토큰, 버튼 규격으로 바꿔 시스템에 넣습니다. 그래야 개발에서 스타일이 어긋나지 않습니다.
협업 초기 리서치와 레퍼런스 수집에 도움을 줍니다.
작업대 위에서 프로젝트를 먼저 봅니다
개발로 바로 이어지는 웹디자인과 UI 설계
시안만 받고 개발이 막혔던 팀을 위한 안내입니다. Figma와 Adobe XD 기반 UI/UX 설계가 와이어프레임에서 프로토타입까지 어떻게 이어지는지, 그리고 그 결과물이 개발로 어떻게 넘어가는지 정리했습니다. 운영 시간은 평일 오전 10시부터 오후 6시까지입니다.
Figma · Adobe XD · 와이어프레임 · 반응형 1440 / 360 검수
도구 레일
두 도구를 고르는 기준부터 정합니다
사내에 쌓인 파일 형식과 협업 환경을 먼저 봅니다. 새로 시작하면 Figma 중심이 빠르고, Adobe XD 자산이 많으면 유지를 비교합니다.
FIGMA · 실시간 협업
WIREFRAME · 배치 확인
PROTOTYPE · 클릭 흐름
ADOBE XD · 기존 자산
모바일 앱 개발 확장
FIGMA COMMUNITY
레일은 좌우로 밀어 볼 수 있습니다. 불이 들어온 판이 이 화면의 기준 도구입니다.
진단 원장
정보 구조부터 잡습니다
디자인 전에 메뉴와 화면 순서를 정합니다. 사용자가 어디에서 들어와 어디에서 문의하는지 흐름을 그리고 문구 길이를 함께 고정합니다. 이 단계가 없으면 시안이 예뻐도 개발 단계에서 화면이 늘어납니다.
FLOW
유입에서 문의까지 흐름을 한 장으로 그립니다. 수도권 기업 사이트 개편에서는 기존 메뉴를 절반으로 줄이는 경우도 많습니다.
1 화면 1 행동
COPY
메뉴 이름과 버튼 문구 길이를 먼저 고정합니다. 문구가 줄면 검색 노출용 내부 링크도 단순해집니다.
문구 고정
WIREFRAME
와이어프레임은 배치 확인용입니다. 박스와 순서만 보고 색과 이미지는 미룹니다.
PC 1440 / 360
PROTOTYPE
프로토타입은 클릭 흐름 확인용입니다. Adobe XD는 디자인과 인터랙션 시연에 오래 쓰였고, Figma는 공유 링크 검수가 빠릅니다.
클릭 흐름
세 가지 깊이
Figma 중심, XD 자산, 반응형 확장
같은 화면을 세 깊이로 봅니다. 새 흐름, 묵은 자산, 그리고 그것이 깨지지 않고 퍼지는 법.
Adobe XD 자산을 가진 팀
쌓인 화면이 있으면 버리지 않습니다. 화면별 컴포넌트와 인터랙션 메모를 정리해 Figma 이전 범위를 정합니다. XD 흐름을 유지하는 경우도 있습니다. 기준은 사내 디자이너 환경과 개발 전달 방식이며, 화면 이름 규칙과 버전 기록은 통일합니다.
이전 범위부터 정하고, 이름 규칙을 먼저 맞춥니다.
반응형과 모바일 확장
웹디자인 결과물은 반응형 기준으로 검수합니다. PC 1440px와 모바일 360px에서 표와 이미지, 버튼 간격을 봅니다. 앱 확장이 예정되면 버튼과 입력 폼 규격을 앱 기준에 맞추고, 웹과 앱이 색상과 서체 토큰을 공유합니다.
토큰을 공유하면 나중에 따로 노는 화면이 줄어듭니다.
작업 지시서
문구, 전달, 오래 가는 규칙
문구와 접근성 정리
버튼 문구는 동사로 끝내고 한 화면에 한 가지 행동만 둡니다. 대비와 초점 표시, 키보드 이동 순서를 점검합니다. 장식용과 정보용 대체 텍스트를 나누고, 폼 오류에는 무엇을 고쳐야 하는지 구체적으로 씁니다. 이 규칙은 Jira 검수 티켓의 체크 항목으로 들어갑니다.
전달 파일과 검수 방식
Figma 링크, 화면별 스펙 메모, 아이콘과 이미지 원본을 넘깁니다. 간격과 서체, 색상 값을 토큰으로 정리해 개발자가 바로 씁니다. 테스트 주소와 시안을 나란히 놓고 화면 단위로 티켓을 만들고, 캡처에는 주소와 화면 이름, 브라우저 너비를 남깁니다. 변경 이력은 티켓 댓글에 날짜와 함께 적습니다.
웹디자인이 오래 가는 조건
유행 장식보다 그리드와 여백 규칙이 오래 갑니다. 완성형 시안을 빨리 만드는 일도 중요하지만 규칙 없는 시안은 업데이트마다 깨집니다. 컴포넌트 수가 적고 이름 규칙이 단순할수록 유지가 쉽습니다. 분기별로 깨진 화면과 안 쓰는 컴포넌트를 정리하면 2년 뒤에도 손볼 수 있습니다.
시안만 받고 개발은 따로 진행할 수 있습니다. 토큰 정리와 스펙, 인수인계 메모를 함께 넘겨 다른 팀에서도 이어받기 쉽게 합니다.
자주 묻는 점
도구 선택을 쉽게
Figma와 Adobe XD 중 무엇을 써야 하나요?열기
사내에 쌓인 파일과 협업 환경을 보고 정합니다. 새로 시작하면 Figma 중심이 빠르고, Adobe 자산이 많으면 XD 유지를 비교합니다.
시안만 받고 개발은 따로 해도 되나요?열기
가능합니다. 토큰 정리와 화면 스펙이 포함되어 있으면 다른 개발팀에서도 이어받기 쉽습니다. 인수인계 메모를 함께 넘겨드립니다.
규칙 있는 화면이 오래 갑니다
그리드와 토큰, 이름 규칙이 서 있으면 다음 개편이 수월합니다. 지금 화면 상태를 보내주시면 어디부터 정리할지 답을 드립니다.
뷰패턴 스페이스 디지털 · Ilia Chavchavadze Avenue 37 Tbilisi 0179 Georgia · 월요일–금요일 09:00–18:00