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 재설계의 기준: "지금 비어있는 회의실이 어디야?"
  • 리서치 전문가와 협업 시 태스크 중심→의도·경험 파악 중심으로 질문 구조 전환 필요
  • 백엔드 테스트 코드 작성 + 리팩터링 → 사이드 이펙트 즉시 확인하는 환경 구축이 중요
  • 기획·디자인 단계 없이 개발부터 시작해도 팀 브레인스토밍과 반복 UT로 정보 구조를 재설계하며 완성도를 높일 수 있음(Firewatch 사례)
  • 정보 밀도가 높은 데이터는 테이블 셀 하나에 여러 정보를 압축해 표현하는 것도 유효한 정보 디자인 전략

Firewatch 프로젝트 사례 — 기획/디자인 없이 시작한 애자일 개발

Firewatch(산불감시) 프로젝트는 조직·개인·프로젝트별 실시간 근무량을 파악해 매니저의 팀원 피로도 관리를 돕는 사내 도구로, 'FED로 UX하기' 시리즈의 실전편 사례다. The0 프로젝트와 달리 기획·디자인 단계 없이 곧바로 개발을 시작했다는 점이 특징이다. 인트라넷 주간보고 데이터를 API로 조회해 별도 외부 사이트로 구축하는 방향을 잡고, 짧은 개발 주기로 프로토타입을 자주 만들어 화면을 개선해나가는 애자일 방식으로 진행했다.

초기 화면은 데이터를 단순 나열하는 수준이어서 "누적된 근무 피로를 알아볼 수 없다"는 자체 평가를 받았다. 이후 그룹장·팀장·수석·선임·이사 등 여러 구성원이 브레인스토밍에 참여해 화면을 재설계했고, 핵심 목표—"매니저가 팀원 피로도 관리에 유용한 도움을 얻는다"—를 다시 세워 정보 표현 방식을 바꿨다. 주요 테이블 구조에 정보를 압축해 담는 방식을 택해 셀 하나에 한 주간의 근무 데이터를 시각화했고, 다크·라이트 모드 가독성까지 검증했다.

The0 사례와 마찬가지로 개발자가 직접 UT(User Test)를 수행해 필요성과 목적 적합성을 검증했다. 저자는 "요구사항대로 기능만 구현하면 된다"는 인식에서 "개발자도 UT를 통해 놓친 관점을 발견할 수 있다"는 인식으로 바뀌었다고 밝힌다. 이는 FED가 기획·디자인 단계 생략 여부와 무관하게, 사용자 검증 단계를 스스로 내재화할 때 더 나은 결과물에 도달한다는 점을 보여주는 두 번째 사례다.

관련 개념

출처

최종 업데이트: 2026-07-19 | 출처 2개