대시보드 디자인에서 개발팀 피드백 1위는 단연 "간격이 화면마다 다르다"입니다. 저도 프리랜서 5년 차가 되기 전까지 이 말을 귀에 못이 박히도록 들었습니다. 레이아웃 그리드 하나 제대로 안 잡고 눈대중으로 요소를 쌓아올렸던 시절 얘기입니다. 피그마로 대시보드를 처음부터 완성하는 과정을 정리하면서, 제가 실제로 겪은 시행착오와 그걸 어떻게 넘었는지 함께 풀어보겠습니다.
레이아웃 그리드와 컴포넌트 구조: 디자인 일관성의 실체
1920x1080 해상도 프레임에 레이아웃 그리드를 설정하는 것이 대시보드 작업의 첫 단추입니다. 레이아웃 그리드란 화면을 일정한 컬럼과 여백으로 나누어 요소를 정렬하는 기준 격자를 말합니다. 쉽게 말해 도화지에 미리 줄을 그어두는 것과 같습니다. 마진 32, 거터 0 설정으로 콘텐츠 영역을 명확하게 정의하면, 이후 사이드바와 메인 영역을 배치할 때 훨씬 일관된 결과물이 나옵니다.
저는 처음 B2B SaaS 대시보드를 맡았을 때 이 그리드를 생략했습니다. 결과는 참혹했습니다. 개발자가 구현한 화면과 제 디자인의 간격이 컴포넌트마다 달랐고, 수정 요청이 사흘에 한 번꼴로 들어왔습니다. 그 이후 8컬럼 그리드 기반으로 작업 방식을 바꾸고 나서야 이 사이클이 끊겼습니다.
사이드바 구성도 마찬가지입니다. 너비 260의 좌측 패널에 오토 레이아웃을 적용합니다. 오토 레이아웃이란 내부 요소들이 지정된 간격과 방향에 따라 자동으로 정렬되는 피그마의 핵심 기능입니다. 부모 프레임 크기가 바뀌거나 항목이 추가되어도 레이아웃이 자동으로 재조정되기 때문에, 메뉴 항목을 추가하거나 수정할 때 수작업이 거의 필요 없습니다. 스페이싱 규칙을 8의 배수로 통일하고 오토 레이아웃에 반영하면, 팀 전체가 동일한 기준으로 작업하게 되는 효과가 있습니다. 제 경험상 이 한 가지 규칙만 지켜도 협업 효율이 눈에 띄게 달라졌습니다.
데이터 카드 컴포넌트 설계도 짚고 넘어갈 부분입니다. 라운드 12, 이너 섀도우 효과로 입체감을 부여한 카드에 통계 수치와 증감률을 표시하는 구조입니다. 이너 섀도우란 요소의 내부에 그림자를 넣어 오목하게 눌린 듯한 입체감을 만드는 효과로, 외부 드롭 섀도우와 달리 버튼이나 입력창에 주로 쓰입니다. 제가 직접 써봤는데, 밝은 섀도우와 어두운 섀도우를 조합하면 단순 배경 카드와는 완전히 다른 질감이 나옵니다. 이 카드를 한 번 만들어 컴포넌트로 등록해두면 복사·변형만으로 반복 사용이 가능합니다. 실제로 이 방식으로 작업하면 컴포넌트 재사용률을 60% 이상 확보할 수 있다는 것을 경험으로 확인했습니다.
프레임 내 프레임(Frame in Frame) 구조도 이 단계에서 자리를 잡습니다. 부모 프레임 안에 자식 프레임을 중첩하는 방식으로, 바 차트 형태의 사각형들을 그래프 영역 안에 독립적으로 배치할 수 있습니다. 이 구조가 익숙해지면 복잡한 대시보드 레이아웃도 부분별로 쪼개서 관리할 수 있어, 대규모 프로젝트에서 특히 유용합니다.
피그마의 컴포넌트 시스템에 대한 실무 활용 방식은 다양한 UX 커뮤니티와 공식 문서에서 꾸준히 다루고 있습니다. 컴포넌트를 제대로 구성해두면 디자인 핸드오프 시 개발자가 요소를 명확히 파악할 수 있어 개발 단계의 오류도 줄어듭니다.
컬러 시스템: 디자이너와 개발자가 같은 언어를 쓰는 법
색상 정의 없이 프로젝트를 시작하면 반드시 뒤에서 고생합니다. 솔직히 이건 예상 밖이었습니다. 처음에는 "나중에 정리하면 되지"라고 생각했는데, 중반부가 되면 컬러 변수가 파일 전체에 흩어져 있어 수정이 거의 불가능한 수준이 됩니다.
대시보드 컬러 시스템의 기본 구성은 다음과 같습니다. 브랜드 컬러는 주요 액션과 강조 요소에 사용하고, 상태 컬러(성공 녹색, 경고 주황, 오류 빨강)는 데이터의 증감이나 알림에 적용합니다. 중립 컬러(그레이 스케일)는 배경, 텍스트, 구분선에 활용합니다. 이 세 축을 프로젝트 초반에 정의해두면 개발자와의 소통이 한결 수월해집니다.
색상 대비도 신경 써야 합니다. 배경색과 텍스트색의 명도 차이가 충분하지 않으면 데이터를 빠르게 읽기 어렵습니다. 이 작은 차이가 실제 사용자 가독성에 영향을 줍니다. UX 디자인에서 색상 대비(Color Contrast)는 웹 접근성 기준인 WCAG 2.1에서도 명시적으로 요구하는 항목입니다. WCAG란 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines)으로, 장애인을 포함한 모든 사용자가 웹을 사용할 수 있도록 색상 대비, 텍스트 크기 등을 규정한 국제 표준입니다. 대시보드처럼 데이터가 많은 화면일수록 이 기준을 더 엄격하게 적용해야 한다고 생각합니다.
타이포그래피도 시스템 차원에서 정의해야 합니다. 프리텐다드 폰트를 기반으로 자간 -2.5%를 적용하면 숫자가 많은 대시보드에서 데이터가 훨씬 읽기 쉬워집니다. 통계 수치에 세미볼드 28 사이즈를 쓰는 것도 같은 맥락입니다. 제 경험상 폰트 규칙을 미리 정의해두면 개발자가 CSS를 작성할 때 디자이너에게 따로 물어볼 필요가 없어 커뮤니케이션 비용이 확실히 줄어듭니다.
한 가지 아쉬운 점은 이 수준의 작업이 디자인 토큰(Design Token)과 연동되지 않는다는 부분입니다. 디자인 토큰이란 컬러, 폰트 사이즈, 스페이싱 값 등을 변수로 정의하여 디자인 파일과 개발 코드가 동일한 값을 공유하도록 연결하는 시스템을 말합니다. 피그마 Variables 기능과 함께 쓰면 테마 전환이나 다크 모드 대응을 훨씬 체계적으로 할 수 있습니다. 단순 실습을 넘어 시스템적 사고로 확장하려는 분이라면 이 부분은 반드시 별도로 학습해야 한다고 생각합니다.
대시보드 디자인은 결국 데이터를 얼마나 빠르고 정확하게 읽히게 만드느냐의 문제입니다. 레이아웃 그리드, 오토 레이아웃, 컴포넌트 재사용, 컬러 시스템 이 네 가지를 프로젝트 초반에 잡아두면 후반부의 수정 비용이 확연히 줄어듭니다. 피그마로 처음 대시보드를 시작하는 분이라면 예쁜 화면을 만들기 전에 이 구조부터 먼저 세우는 것을 권장합니다. 제가 그 순서를 거꾸로 밟아 고생했기 때문에 더 확실하게 말할 수 있습니다.