인프런 커뮤니티 질문&답변

[강의 수강 직후 작성한 초안]

서비스 개발 초기에는 가설 검증을 위해 빠르게 기능을 구현하는 것이 팀 목표였습니다. 하지만 화면 설계의 기준점이 될 공통 패턴과 가이드라인이 부재하여 화면마다 UI/UX를 새롭게 정의하는 방식으로 진행되었고 이로 인해 의사결정 시간이 길어지고 결과물의 일관성도 떨어지는 문제가 있었습니다. 이를 해결하기 위해 공통 가이드라인 안에서 필요한 기능과 형태를 선택해 활용할 수 있도록 디자인 시스템 구축을 제안하고 직접 설계·도입했습니다. 리소스가 부족한 상황에서 자칫 오버 엔지니어링이 될 수도 있었지만, 기능마다 UI/UX를 조율하는 방식이 오히려 전체 개발 속도를 저하시킬 수 있다고 판단했습니다.

디자인 토큰 정의, 컴포넌트 별 기능과 형태를 표준화하고, 이를 기획·디자인이 기준 문서로 활용할 수 있도록 배포했습니다. 

그 결과 한정된 선택지를 활용함으로써 디자인 의사결정 시간을 줄일 수 있었고, 재사용 가능한 컴포넌트 중심으로 개발 구조를 전환해 기능 개발 소요기간도 기존대비 평균 50% 이상 단축했습니다.

--

[수정]

프로젝트 개발 초기에 화면 설계 가이드라인 부재로 화면마다 UI/UX를 개별 설계하는 방식으로 진행되어, 의사결정 시간이 길어지고 코드 재사용성이 떨어지는 비효율이 발생했습니다. 이 방식을 지속한다면 화면이 늘어날수록 UI 조율과 중복 구현 비용이 누적되는 구조였기 때문에, 디자인 시스템을 먼저 구축하고 정해진 범주 안에서 기획과 디자인을 하도록 제안했습니다.

디자이너와 상의하여 디자인 토큰과 컴포넌트의 기능·형태를 정의한 뒤, Panda CSS를 활용해 토큰을 primitive, semantic 구조로 구현하고 컴파일 단계에서 유효성을 검증할 수 있도록 했습니다. 컴포넌트는 radix, base-ui를 기반으로 웹 접근성과 기능 안전성을 확보하되, 다양한 조합이 필요한 경우 컴파운드 패턴으로, 사용성이 중요한 경우 단일 구조의 prop 확장 방식으로 구현해 컴포넌트별 추상화 수준을 분리했습니다. 파운데이션 가이드와 컴포넌트 스토리는 별도 웹으로 배포하여 디자이너·기획자가 직접 스펙을 확인할 수 있도록 했습니다.

그 결과 한 화면을 기획부터 개발까지 평균 2주 소요되던 기간이 4-5일로 단축되었습니다.

작성 시 고려한 것

1. 배경과 상황(스토리)을 제시

2. "배경/상황 -> 문제 -> why?(문제원인) -> how?(어떻게 했나?) -> 결과" 구조로 접근

주요 수정 부분

1. 첫번째 문단의 "상황,배경"의 내용을 간략화

2. 두번째 문단에서 "어떻게"를 구체적으로 추가

3. 세번째 문단 "결과"를 조금 더 상세한 수치로 수정

질문

1. 수정전과 수정후의 차이가 "검토자 입장에서 느껴질만한 정도"인지 궁금합니다.

2. "배경"을 항상 강조하시는 것 같았습니다. 수정 후의 글에서 배경이 너무 부족한건 아닐지 궁금합니다.

3. 전체 글의 양이 너무 긴건아닌지 궁금합니다. C님의 조언후 이력서를 주로 참고하고 있는데 대부분 10줄 이내로 끊어내시는 것 같아, 더 줄여야하는건 아닌지 고민입니다. (과한 축약은 안티패턴이라고하셨지만..)

4. 10점 만점이라면, 이 글의 점수는 대략 몇점 정도 될지 궁금합니다.

너무 질문을 크게 드려서 죄송합니다.

하지만 이 질문 하나로 모든 방향성을 잡을 수 있을 것 같아.. 부끄럽지만 이렇게 질문을 드립니다.