버튼이 1px 어긋나면 잠을 못 잔다. 디자이너보다 더 예민하고, 사용자 경험이 곧 존재 이유다.
UI 퍼펙셔니스트 유형은 개발자이기 이전에 시각적 완성도를 추구하는 예술가입니다. 이들에게 코드는 아름다운 인터페이스를 만들기 위한 도구이고, 사용자가 화면을 마주하는 순간의 경험이 가장 중요한 결과물입니다. 피그마 파일을 받아서 구현할 때, 이들은 단순히 레이아웃을 복사하는 것이 아니라 의도된 여백, 타이포그래피 리듬, 색상 뉘앙스까지 하나하나 살려냅니다. 디자이너가 "이 정도면 됐어요"라고 해도 혼자 더 다듬고 있는 사람이 바로 이 유형입니다.
이 유형의 개발자는 호버 효과 하나에도 수십 번의 시도를 합니다. 트랜지션 속도가 200ms인지 250ms인지에 따라 느낌이 완전히 달라진다는 것을 알기 때문입니다. 모바일에서 터치 반응이 0.1초 늦어지면 즉시 수정하고, 스크롤 애니메이션의 이징 함수가 ease-in-out인지 cubic-bezier인지 고민하다가 저녁이 되는 일도 잦습니다. 크로스 브라우저 호환성은 당연하고, WCAG 접근성 지침도 꼼꼼하게 지킵니다. 갤럭시 폴드처럼 특수한 화면 크기도 직접 테스트합니다.
백엔드 로직에는 상대적으로 관심이 적고, API 연결은 "데이터만 주면 나머지는 내가 알아서 예쁘게 보여줄게"라는 태도를 보입니다. 다크모드 지원, 반응형 레이아웃, 다국어 텍스트 오버플로우 처리 같은 엣지 케이스도 미리 고려합니다. 로딩 스피너 하나도 그냥 쓰지 않고 브랜드 색상에 맞게 커스터마이징합니다. 에러 상태, 빈 상태(empty state), 스켈레톤 UI까지 모두 디자인하고 구현합니다. 이들이 만든 인터페이스를 처음 보는 사람은 "개발자가 만든 게 맞아?"라는 말을 하게 됩니다.
CSS를 단순히 스타일링 언어로 보지 않고, 시각적 커뮤니케이션 도구로 봅니다. CSS Grid, Flexbox, Custom Properties, CSS Animation, Clip-path, Backdrop-filter 같은 현대적 CSS 기능을 자유자재로 다룹니다. 디자인 시스템 구축도 이들의 영역입니다. 색상 토큰, 타이포그래피 스케일, 컴포넌트 변형(variant), 간격 체계를 코드로 체계화하여 팀 전체의 UI 일관성을 높이는 데 기여합니다.
"사용자는 코드를 보지 않아요. 화면만 봐요. 화면이 구리면 아무리 코드가 훌륭해도 사용자는 그냥 닫아버립니다. 첫인상은 두 번 없어요."
— UI 유형 프론트엔드 개발자디자인 핸드오프부터 배포까지, UI 유형의 꼼꼼한 여정입니다.
제품의 첫인상과 사용성을 결정하는 핵심 역량을 보유하고 있습니다. 디자이너와 개발자 사이의 간극을 메우는 존재로, 디자인 의도를 코드로 완벽하게 재현합니다. 접근성을 고려한 개발로 더 많은 사용자가 서비스를 이용할 수 있게 합니다. 반응형 처리가 꼼꼼해 다양한 디바이스에서 일관된 경험을 제공합니다. 디자인 시스템을 구축하면 팀 전체의 UI 개발 속도가 올라가고 일관성이 확보됩니다. 애니메이션과 트랜지션으로 서비스에 생동감을 불어넣습니다.
완벽을 추구하다 보니 "충분히 좋은" 상태에서 멈추지 못하는 경향이 있습니다. 마감이 다가올 때 1px 수정에 집착하기보다 전체 기능 완성도를 우선하는 판단력이 필요합니다. 백엔드나 인프라에 대한 이해도 높이면 풀스택 관점에서 더 효율적인 UI 설계가 가능합니다. 성능 최적화(번들 크기, 렌더링 최적화) 지식도 함께 키우면 PERF 유형과의 협업이 훨씬 부드러워집니다.