2026.01 — 현재 · 운영 중 · Frontend 기여도 40%
어르다
상담 수련 및 실무 지원 플랫폼
개요
수련기관 · 슈퍼비전 매칭부터 AI 축어록 · 가계도까지, 상담 수련생과 실무자의 정보 탐색 및 반복적인 기록 업무를 지원하는 통합 플랫폼입니다. Frontend 2명(본인 포함), Backend & Infra 1명, Marketing 3명으로 구성된 창업동아리에서 Frontend Developer로 참여했습니다. 사용자 행동 데이터로 AI 축어록의 UX를 개선하고, 서비스 확장에 맞춰 메인 랜딩의 정보 구조와 반응형 경험을 다시 설계했으며, 내부 운영을 위한 Back Office와 알림 자동화를 만들었습니다.
문제와 개선
데이터 기반 AI 축어록 UX 개선
AS-IS
GA4 · GTM 기반 퍼널 분석에서 AI 축어록 분석 완료 후 내보내기 단계의 이탈률이 48.9%로 나타났습니다. 내보내기 기능이 더보기 메뉴 내부에 있어 사용자가 기능의 존재를 쉽게 인지하지 못한다(Low Discoverability)는 가설을 세웠습니다.
TO-BE
더보기 메뉴에 포함되어 있던 내보내기 기능을 상단 독립 버튼으로 분리하고, 한글 · 워드 · 엑셀 등 파일 형식을 선택할 수 있는 다운로드 UI를 구현했습니다. 분석 완료 → 파일 다운로드 미전환율은 개선 전 48.9%(n=47, 2026.05.27~07.30)에서 개선 후 30.6%(n=62, 2026.08.01~10.14)로 18.3%p 낮아졌습니다.
서비스 확장에 대응한 메인 랜딩 전면 개편
AS-IS
수련기관 · 슈퍼비전 매칭 중심이던 서비스가 AI 축어록 · 가계도 등으로 확장되었지만, 랜딩은 기존 매칭 기능 위주의 콘텐츠로 구성되어 핵심 가치 전달이 부족하다는 팀 내부 피드백이 있었습니다.
TO-BE
AI 축어록 등 신규 기능과 서비스 가치를 함께 소개하도록 정보 구조를 재설계하고, 디자인 완성도와 모바일 사용성을 함께 개선했습니다.
공통 데이터 기반 반응형 UI
AS-IS
데스크톱의 공간적인 인터랙션을 좁은 화면과 터치 환경에 그대로 쓰기 어려웠고, 레이아웃마다 콘텐츠를 따로 정의하면 기기별 정보가 어긋날 수 있었습니다.
TO-BE
데스크톱에서는 CSS 3D Transform 기반 Orbit과 스크롤 인터랙션으로 주요 콘텐츠를 시각화하고, 모바일에서는 같은 콘텐츠를 세로 카드형 UI로 재구성했습니다. 두 레이아웃은 하나의 React 컴포넌트에서 Tailwind CSS 반응형 클래스로 전환하며 동일한 콘텐츠 데이터를 공유해, 중복 정의를 줄이고 디바이스별 정보의 일관성을 유지했습니다.
내부 Back Office와 알림 자동화
AS-IS
인터뷰 섭외와 일정을 PM이 수동으로 공유해 배정 · 변경 내역을 놓치기 쉬웠습니다.
TO-BE
인터뷰 섭외 · 일정 배정을 관리하는 내부 Back Office를 만들고 Discord Webhook을 연동해 배정과 변경 사항이 자동으로 공유되도록 했습니다.
설계에서 남긴 판단
기능보다 발견 가능성
기능이 있어도 사용자가 찾지 못하면 없는 것과 같습니다. 이탈 지점을 퍼널로 먼저 확인하고, 원인을 가설로 세운 뒤 개선 전후를 같은 지표로 비교했습니다.
하나의 데이터, 두 개의 경험
데스크톱과 모바일의 인터랙션은 다르게 설계하되 콘텐츠 데이터는 하나로 두어, 화면이 달라도 전달하는 정보는 같도록 했습니다.
화면
회고
좋은 기능을 만드는 것만큼 사용자가 그 기능을 찾을 수 있게 하는 것이 중요하다는 것을 퍼널 데이터로 확인했습니다. 감으로 우선순위를 정하는 대신 이탈 지점을 측정하고 가설을 세워 개선하는 흐름을 팀에 정착시켰고, 서비스가 확장될 때 랜딩과 정보 구조도 함께 다시 설계해야 한다는 점을 배웠습니다.