FED 프론트엔드 UX 워크플로우
FED(Front-End Developer, 프론트엔드 개발자)가 UX 프로세스 전반을 직접 수행하는 방식은 일반적인 디자인→개발 순차 방식과 다른 독특한 워크플로우를 만든다. pxd XE 그룹이 진행한 사내 회의실 예약 시스템 The0(The Zero) 프로젝트는 개발 그룹이 리서치-기획-디자인-개발의 전 과정을 직접 수행하며 얻은 인사이트를 보여주는 대표 사례다.
The0 프로젝트 배경: 구글 캘린더로 운영하던 회의실 예약 시스템의 불편함을 개선하고자 시작됐다. 프론트엔드는 Next.js, 백엔드는 Prisma ORM 기반으로 구성했으며, 기존 TypeORM 대신 Prisma를 선택해 유지보수성과 확장성을 높였다. 프로젝트 명 'The0'는 "0부터 시작"이라는 의미로 기존 시스템의 불편함을 제로에서 다시 설계한다는 철학을 담는다.
애자일 방식의 UX 프로세스: 리서치→기획→디자인→개발의 선형 방식 대신, 하나의 기능을 짧은 스프린트로 완성하는 애자일 방식으로 진행됐다. 프로세스의 각 단계는 다음과 같다. 먼저 사용자 설문조사로 기존 시스템의 페인포인트 우선순위를 파악했다—'빈 회의실 현황 파악 어려움'과 '중복 예약 발생'이 최우선 과제로 선정됐다. 이후 팀원들이 보드에 직접 화면을 그려보는 아이디어 회의를 반복하며, 시간 축(x/y축 배치), 해상도별 회의실 표현 수, 예약 플로우 간소화 방향을 결정했다.
사용자 테스트가 뒤집은 설계 가정: 1차 작업 완료 후 유저빌리티 테스팅(UT)을 실시한 결과, 예상치 못한 문제가 발견됐다. 팀이 직관적이라고 생각했던 왼쪽 현황판 중심 UI가 오히려 기존 구글 캘린더보다 사용하기 어렵다는 피드백이 나왔다. 사용자들의 핵심 질문은 "그래서 지금 비어있는 회의실이 어디야?"였다. 팀은 회의실 중심 배치에서 시간 기준 배치로 UI를 전면 재설계했다. 최종 화면에서는 현재 시간을 구분선으로 표시해 즉시 이용 가능한 회의실을 직관적으로 파악하도록 했고, 예약 패널을 제거하고 모달 형식으로 전환해 플로우를 간소화했다.
리서치팀과의 협업 학습: 개발 그룹이 자체적으로 준비한 UT 질문지는 태스크 중심("이거 해보세요")으로만 구성되어 있었다. 리서치팀의 UT 가이드에는 사용자의 의도와 경험을 파악하는 질문, 예상 답변에 따른 꼬리 질문 준비, 답변에서 인사이트를 추출하는 관점이 포함되어 있었다. 이 경험을 통해 개발 그룹은 UX 리서치 방법론의 본질—태스크 수행 관찰이 아니라 사용자의 심리와 맥락을 이해하는 것—을 깨달았다.
핵심 내용
- FED가 UX 전 과정을 수행할 때 애자일 방식이 효과적: 선형 방식보다 빠른 피드백 루프
- 기술 선택(Next.js, Prisma ORM)도 UX 목표(유지보수성, 사용자 경험 일관성)와 연결
- UT 결과가 설계 가정을 전면 뒤집을 수 있음 — 만족스러운 결과물도 사용자와 함께 검증 필요
- 사용자 핵심 질문 파악이 UI 재설계의 기준: "지금 비어있는 회의실이 어디야?"
- 리서치 전문가와 협업 시 태스크 중심→의도·경험 파악 중심으로 질문 구조 전환 필요
- 백엔드 테스트 코드 작성 + 리팩터링 → 사이드 이펙트 즉시 확인하는 환경 구축이 중요
관련 개념
- UX 리서치 유형 — 유저빌리티 테스팅(UT)을 포함한 리서치 방법론
- 사용자 중심 디자인 — 사용자 피드백이 설계 가정을 바꾸는 UCD의 핵심 원리
- 스토리북 컴포넌트 개발 — 프론트엔드 개발 워크플로우의 컴포넌트 설계 측면
출처
- The0 프로젝트 (FED로 UX하기) — hyejun.lee, UX Engineer 이야기