blog

IA List & UI 가이드 시스템 구축 퍼블리싱

Nextree

08 4월 2026 • 7 min read

넥스트리에 합류한 후 기업 프로젝트에 투입되어 퍼블리싱 인수인계를 받으며 가장 먼저 든 생각은 '만들어진 컴포넌트는 많은데, 왜 개발팀에서 이를 원활하게 활용하지 못할까?' 였습니다. 에이전시에서 여러 프로젝트를 거치며 직관적인 UI 자산 관리의 중요성을 알기에, 당시의 작업 환경은 아쉬움이 컸습니다.

당시 프로젝트는 레포지토리가 존재하긴 했지만, 실제 구현된 화면을 보려면 개별 페이지 URL을 직접 찾아 들어가야 했습니다. 더 큰 문제는 공통 컴포넌트(SCSS 등)를 볼 수 있는 가이드 페이지가 없었습니다. 이로 인해 인수인계를 받는 저조차 코드를 처음부터 다시 뜯어봐야 했고, 개발자들 역시 만들어진 컴포넌트를 두고도 매번 퍼블리셔에게 클래스명이나 사용법을 묻거나 중복 코드를 작성하는 등 리소스 낭비가 발생하고 있었습니다.

저는 이 상황이 단순한 불편함을 넘어, 프로젝트 전체의 생산성을 저하시키는 지점이라고 판단했습니다.

소통 비용을 줄이고 개발팀이 자체적으로 UI를 구성할 수 있는 환경을 만들기 위해, 크게 두 가지 작업을 진행했습니다.

첫째, 작업 가시성을 높인 'IA(Information Architecture) 리스트 페이지' 구축

먼저 1, 2 depth 메뉴 트리를 기준으로 리스트를 구성하고 실제 화면 링크를 매핑했습니다. 상단 탭을 통해 카테고리(공통, 선상, 육상 등)를 분리하여 각 파트의 개발 담당자들이 필요한 화면만 직관적으로 찾을 수 있도록 했습니다. 가장 효과가 좋았던 부분은 리스트 우측에 퍼블리싱 '상태(완료/진행 중)' 컬럼을 추가한 것입니다. 작업 진척도가 투명하게 공유되면서 "이 페이지 퍼블리싱 다 됐나요?"라고 묻던 불필요한 메신저 소통이 크게 줄었습니다. 또한, 개발 전 현업 담당자와 IA 리스트의 화면을 띄워놓고 사전 리뷰를 진행할 수 있게 되어, 개발팀 입장에서도 요구사항을 명확히 확인한 후 본 개발에만 집중할 수 있는 환경이 조성되었습니다.

둘째, 디자인 토큰(Design Token) 기반의 SCSS 아키텍처 설계 및 스타일 가이드 구축

SCSS의 map과 @each 반복문 등 프로그래밍 방식으로 구성되어 있던 디자인 토큰(Design Token)을 시각화하여, 직관적인 스타일 가이드 시스템을 구축했습니다.

기존에는 색상($colors)이나 폰트 사이즈($fontSize) 등의 유틸리티 클래스가 코드 레벨에만 존재하여, 개발팀이 이를 즉각적으로 파악하고 화면에 활용하기 어려웠습니다. 이를 개선하기 위해, 아래와 같은 SCSS 로직을 통해 자동 생성되는 클래스 결과물들을 화면으로 끌어내어 전용 디자인 가이드 페이지로 시각화했습니다.

이러한 디자인 토큰 시각화 작업과 더불어, 실제 서비스 화면 구성에 필수적인 주요 UI 컴포넌트들도 가이드 시스템에 함께 구성했습니다. 버튼(Button) 가이드, 폼 요소(Input, Select, DatePicker 등), 체크박스 및 라디오 버튼 등의 구성 요소들을 각 상태(Default, Hover, Disabled, Error 등)별로 시각화하고, 조합 가능한 클래스명과 마크업 구조를 명확히 명시했습니다.

결과적으로 개발자는 복잡한 CSS 원본 파일을 직접 분석할 필요 없이, 시각화된 가이드 시스템에 정리된 직관적인 클래스명과 컴포넌트 마크업 구조만 참고하여 즉각적으로 UI를 구현할 수 있게 되었습니다.

구축 이후의 변화

IA 리스트와 스타일 가이드 구축이 가져온 긍정적인 변화는 개발팀과의 협업 효율 향상에만 그치지 않았습니다. 이 기업 프로젝트에서 검증된 이 체계적인 화면 관리 및 컴포넌트화 방식은 그 효용성을 인정받아, 이후 당사가 진행하는 주요 대규모 프로젝트 전체에 확대 도입되었습니다.

더 나아가, 구축된 UI 컴포넌트 가이드 시스템을 동료 퍼블리셔들의 업무 및 인수인계 프로세스에 적극 접목했습니다. 명확한 기준 없이 이루어지던 기존의 인수인계 방식에서 벗어나, 체계적인 문서와 가이드를 기반으로 업무를 전달함으로써 새로운 퍼블리셔가 프로젝트에 투입될 때 발생하는 학습 비용(Learning curve)과 적응 시간을 획기적으로 단축시켰습니다.

결과적으로 이 작업은 작업자 개인의 편의를 위한 단순한 산출물 정리를 넘어, 퍼블리셔 간의 파편화된 코드 스타일을 통일하고 팀 전체의 작업 효율성을 상향 평준화하는 든든한 기반이 되었습니다.

이번 경험을 통해 퍼블리셔의 역할이 단순히 화면을 예쁘게 찍어내는 것을 넘어, 구성원 모두가 쉽고 빠르게 사용할 수 있는 UI 생태계를 구축하고 표준화에 있음을 깨달았습니다. 앞으로도 파편화된 자산들을 체계적인 시스템으로 승화시켜, 개인의 성장이 곧 프로젝트와 조직 전체의 생산성 향상으로 이어질 수 있도록 끊임없이 고민하는 UI 개발자가 되겠습니다.

sangsooni