01 — Overview
앱 하나로 8년을 버틴 플랫폼에, 유일한 디자이너로 합류하다
메디스태프는 62,000명 이상의 의료진이 사용하는 국내 최대 의사 커뮤니티이자, 커리어·학술·콘텐츠를 아우르는 라이프 플랫폼입니다. 다만 8~9년간 앱 하나로만 운영되며 레거시가 누적된 상태였고, 정보 구조는 이미 과부하에 가까웠습니다.
합류 후 11개월 동안 세 가지 과제를 차례로 맡았습니다. 앱 안에 수익 모델을 만들고, 밖으로 유입 채널을 열고, 앱에 이어 두 번째 프로덕트를 세우는 일이었습니다.


02 — My Role
혼자 만들고, 함께 결정하고, 다음 사람에게 넘기는 일
세 프로젝트 모두 UI/UX를 담당하는 디자이너는 저 한 명이었습니다. 기획자와 마케팅·영업팀의 요구사항을 직접 수집해 화면 설계와 유저 플로우를 만들고, 개발 핸드오프와 배포 후 QA 검증까지 스크럼 안에서 수행했습니다.
웹 플랫폼 단계부터는 역할이 한 단계 넓어졌습니다. PO·CTO와 제품 방향을 함께 리뷰하고 QA를 주도했으며, 앱 운영을 맡은 후배 디자이너를 코칭했습니다.
100%
기획 · UX 설계 · UI 디자인 · 핸드오프 · QA
PO · CTO
제품 전략 리뷰 및 QA 주도
1인
앱 운영 담당 후배 디자이너 코칭
앱 안에 수익 모델을 만들다 — 커머스 & Admin
의료용품과 라이프스타일 상품을 앱 안에서 판매하는 커머스를 신규 구축했습니다. 기획부터 Admin까지 2개월간 혼자 진행했습니다.
이 프로젝트의 목표는 매출이 아니었습니다. 마케팅·영업팀이 클라이언트를 만나거나 투자를 유치할 때, 커머스 기능의 유무가 플랫폼의 전환율과 경쟁력을 좌우한다는 요구에서 출발했습니다. 즉 사업 경쟁력을 확보하기 위한 기능 구축이었고, 그래서 얼마나 빨리 작동하는 상태로 만드느냐가 첫 번째 기준이었습니다.
Phase 1에서 각인과 환불 정합성을 뺀 건 못 해서가 아니라, 그때는 수요를 몰랐기 때문입니다. 납품 클라이언트도 판매량도 확정되지 않은 상태에서, 당장 팔아야 할 상품 하나가 있었습니다. 클라이언트가 늘고 웹심포지엄 라이브에서도 커머스를 쓰겠다는 요구가 붙고 나서 Phase 2를 열었습니다.
일단 팔아본다
- 01PG 연동
- 02기본 옵션 기능
- 03앱 연동 후 빠른 오픈
제대로 고친다
- 011차 운영 이슈를 As-is / To-be로 정리
- 02주요 커머스 옵션 UX 레퍼런스 분석
- 03각인 주문 플로우 재설계 — 12개 상태 정의
- 04배송 상태 · 취소 · 환불 케이스 정합성 확보
Phase 2에서 실제로 해결한 것
웹뷰 이탈 방지
앱에서 커머스가 외부로 랜딩되는 구조라, 뒤로가기를 누르면 서비스가 그대로 종료됐습니다. 이탈 직전 확인 얼럿을 붙여 앱 메인으로 안전하게 돌아가도록 설계했습니다.
배송 상태 정합성
결제 이후 배송 상태값이 정확히 매칭되지 않는 문제가 있었습니다. 전환 기준을 시간으로 통일하고(주문완료: 익일 11시 이전 / 상품준비중: 익일 11시 이후), 상품준비중 단계에서의 주문취소 케이스까지 정의했습니다. 테스트에 가장 많은 시간을 쓴 부분입니다.
각인 주문 옵션
청진기 등에 이름을 새기는 각인은 의사 고객을 위한 차별화 옵션이었지만 그만큼 예외가 많았습니다. 바텀시트 하나에 12개 상태를 정의해 대응했습니다.
긴 옵션명 처리
의료 제품 모델명이 지나치게 긴 경우가 많아, 옵션명이 잘리지 않도록 2줄 처리 케이스를 별도로 설계했습니다.
환불 화면 구조
영수증 한 페이지로 이어서 보여줄지, 상품 개수 단위로 묶어서 보여줄지를 검토해 정보 구조를 결정했습니다.
각인 주문 바텀시트
옵션 하나를 위한 12개의 상태
단품과 각인 조합, 입력 검증, 토스트, 예외 케이스까지 정의했습니다. 각 화면에는 정책 주석과 간격 측정값을 함께 표기해 개발 핸드오프에 바로 쓸 수 있도록 만들었습니다.

As-is / To-be
고친 이유를 문서로 남기다
Phase 1 운영에서 드러난 문제를 화면 단위로 As-is / To-be 대조 문서로 정리했습니다. 개선의 근거가 팀 안에 남도록 하는 것이 목적이었습니다.

Result
부가 기능이 증명한, 예상 밖의 구매 수요
첫 협업 상품의 객단가는 약 8만 9천 원이었습니다. 메인 사업이 아닌 부가 기능이었던 만큼, 매출 규모보다 62,000명 의료진 네트워크 안에 9만 원대 구매 수요가 실재한다는 사실을 확인한 것이 더 큰 성과였습니다.
구조의 재사용성은 다음 달에 바로 증명됐습니다. 첫 상품은 컬러 2종 × 사이즈 8종, 총 16개 옵션 SKU를 가진 패션 카테고리였고, 두 번째 상품은 옵션이 없는 식품 카테고리였습니다. 성격이 전혀 다른 상품이었지만 커머스 구조와 Admin을 다시 뜯지 않고 그대로 올렸습니다. 처음부터 단일 상품이 아니라 범용 커머스 인프라로 설계한 결과입니다.
지금은 웹심포지엄 실시간 라이브가 이 커머스를 얹고 있습니다. 상품이 늘어난 게 아니라 다른 제품이 기능을 가져간 것이고, 커머스 쪽 가이드는 제가 넘기고 화면은 후배 디자이너가 맡았습니다.
밖으로 유입 채널을 열다 — 공식 홈페이지 & PCO
노후화된 공식 홈페이지를 SEO·마케팅 창구로 리뉴얼하고, 학술대회 사업부(PCO)의 독자 홈페이지를 처음부터 구축했습니다.
공식 홈페이지는 2017년 개설 이후 손대지 않아 노후화된 상태였고, PCO 사업부는 대표자 개인의 영업에 수주를 의존하고 있었습니다. 둘 다 밖에서 사람이 들어오는 경로지만, 들어오는 방식이 달랐습니다. 공식 홈페이지는 검색으로, PCO는 영업 자리에서 먼저 열어 보이는 화면으로.
공식 홈페이지 · 리뉴얼
SEO와 B2B 전환을 위한 창구로
콘텐츠(웹심포지엄·의학정보·토픽·의료뉴스)를 전면에 배치하고, 하단을 파트너스(의사 채용)와 PCO(학술대회) 두 갈래의 B2B 전환 동선으로 설계했습니다. 앱/웹 디자인 시스템을 분리해 웹 전용 파운데이션을 구축했고, CI 컬러를 개선하는 브랜드 리프레시를 함께 진행했습니다. 한정된 예산 안에서 생성형 AI 이미지를 활용해 비주얼을 채웠습니다.

PCO 홈페이지 · 신규 구축
첫인상만으로 경쟁력을 만드는 사이트
기하학적 도형과 공간감을 활용한 스크롤 모션으로 원페이지를 구성하고, 문의 유형을 5종으로 나눈 DB 수집 폼을 연결했습니다. 실제 학회 클라이언트의 추천사와 진행 실적을 배치해 신뢰 근거를 화면 안에 담았습니다.

Key Decision
국내 학회를 대상으로, 전면 영문 사이트
PCO 사이트는 국내 학회와 제약사를 주 고객으로 하지만 전면 영문으로 구성했습니다. 타깃인 의료진과 학회 관계자는 영어 리터러시가 높고, 이들에게 전문성과 신뢰, 독창성을 전달하는 데 영문 표기가 더 효과적이라고 판단했기 때문입니다.
B2B 수주에서는 사이트의 첫인상이 곧 경쟁력입니다. 대표자 개인의 영업에 의존하던 구조를, 사이트가 스스로 신뢰를 만들고 문의를 받아내는 구조로 바꾸는 것이 목표였습니다.
월 1~5건
PCO 신규 행사 계약 문의 유입
Inbound
대표자 중심 영업에서 웹 기반 자동 수집으로 전환
Live
medistaff.co.kr · pco.medistaff.co.kr 운영 중
두 번째 프로덕트를 세우다 — 웹 버전 신규 구축
앱 하나뿐이던 플랫폼에 웹 버전을 처음부터 만들었습니다. 그리고 웹을 신규 기능이 먼저 정의되는 리드 프로덕트로 삼아, 앱으로 이식하는 구조를 세웠습니다.
8~9년간 앱 퍼스트로 운영되며 기능이 계속 쌓였고, 정보 구조는 이미 감당하기 어려운 수준이었습니다. 반면 실제 사용자인 의사들은 진료실에서 PC를 쓰는 비중이 높았습니다. 앱에서 손대기 어려워진 구조를, 웹이라는 새 그릇에서 다시 짜야 할 시점이었습니다.
동시에 메디스태프는 면허 인증을 거친 의료진만 진입할 수 있는 폐쇄형 서비스입니다. 보안 정책을 유지하면서 웹의 접근성을 확보하는 것이 이 프로젝트 전체를 관통하는 제약이었습니다.

Key Decision 01
웹을 Upstream으로, 앱을 Downstream으로
웹을 앱의 축소판으로 만들지 않았습니다. 신규 기능을 웹에서 먼저 정의하고, 검증된 구조를 앱으로 이식하는 방향을 PO·CTO와 함께 결정했습니다. 레거시가 누적된 앱에서 새 기능을 설계하면 기존 구조에 끌려가지만, 웹에서 먼저 정의하면 기능의 이상적인 형태를 먼저 잡을 수 있기 때문입니다.
앱을 뒤로 미룬 결정이 아닙니다. 앱에서만 되는 기능은 앱이 그대로 진행하고, 웹에서 먼저 정의하는 편이 나은 기능과 정책 개선만 웹이 앞섭니다. 웹·iOS·안드로이드 개발이 각각 있어 두 축은 동시에 굴러갑니다.
이 결정으로 웹은 보조 채널이 아니라 제품 정의가 시작되는 자리가 됐고, 앱 운영을 맡은 후배 디자이너와의 협업 기준도 여기서 나왔습니다.
핵심 대메뉴 — 성격이 다른 세 서비스를 하나의 구조로
Community
게시판
의사·의대생 커뮤니티. 게시글 작성과 상세, 댓글, 투표, 북마크까지 커뮤니티 전 기능을 웹 환경에 맞춰 재설계했습니다.

Career
커리어 (초빙)
의사 채용 매칭. 초빙 공고 탐색부터 이력서 작성·미리보기, 경력 관리, 지원 이력까지 정보 밀도가 가장 높은 영역입니다.

Contents
콘텐츠
웹심포지엄, 학술대회, 의학정보, 의료뉴스를 다루는 미디어 영역. 앱보다 넓은 화면을 활용해 탐색과 열람 경험을 재구성했습니다.

Key Decision 02
같은 화면, 다른 세계 — 회원 유형별 권한 설계
메디스태프는 의사와 의대생이 함께 쓰지만 볼 수 있는 것이 다릅니다. 그리고 이 차이는 부가 기능이 아니라 핵심 대메뉴 세 곳 모두에 적용됩니다.
게시판
의사는 의사·의대생 게시판 모두 열람, 의대생은 의대생 게시판만 접근 가능
커리어 (초빙)
의대생은 초빙 공고 자체에 접근할 수 없음
콘텐츠
의대생은 전체 공개된 게시물만 열람 가능
하나의 IA 안에서 회원 유형에 따라 다른 제품을 경험하게 만드는 설계였습니다. 동시에 이는 성장 구조이기도 합니다 — 의대생이 의사로 전환되는 흐름은 꾸준하고, 그에 비례해 플랫폼 유입도 이어지기 때문입니다. 권한을 나누는 일은 보안인 동시에 파이프라인 설계였습니다.
웹 전용 디자인 시스템
메디스태프의 디자인 시스템은 앱 중심으로 구축되어 있었고, 저는 그중 절반을 동료 디자이너와 분담해 함께 만들었습니다. 웹 버전을 시작하며 이 시스템만으로는 부족하다는 것이 분명해졌습니다 — 데스크톱은 브레이크포인트가 필요했고, 게시판이나 이력서처럼 정보 밀도가 높은 화면은 모바일 컴포넌트로 감당되지 않았습니다.
그래서 앱과 톤앤매너는 공유하되, 웹 전용 컴포넌트 레이어를 별도로 세웠습니다.
Foundation
4단계 반응형 그리드
xl(1600~) · lg(1200~) · md(992~1200) · xs(~768) 네 단계 브레이크포인트를 정의해, 진료실 데스크톱부터 태블릿까지 일관된 경험을 설계했습니다.
Component
도메인별 컴포넌트 체계
Board · MyPage 등 도메인 단위로 컴포넌트를 구조화해, 화면이 늘어나도 일관성이 유지되도록 만들었습니다.
Interaction
데스크톱 사용성 원칙
얼럿과 모달의 중첩을 지양하고, 한 페이지 안에서 정보 인지가 완결되도록 설계 원칙을 세웠습니다.
핸드오프 — 기획을 화면 옆에 박아두기
화면 옆에 정책과 예외 케이스를 주석 컴포넌트로 붙여, 디자인 파일 하나만 열어도 기획 의도까지 함께 읽히도록 만들었습니다. 별도 기획 문서를 오가지 않아도 되니 개발 커뮤니케이션의 왕복이 줄었고, 이후 QA 기준으로도 그대로 쓰였습니다. 지금은 앱 운영을 맡은 후배 디자이너도 이 주석을 기준으로 화면을 봅니다.
Key Decision 03
고생한 3개월을, 다음 화면을 위한 시스템으로
초기 3개월 동안 회원가입·커리어·게시판·홈 전 영역을 혼자 설계했습니다. 힘든 기간이었지만, 그 과정에서 제 방식의 유저 플로우 문서 포맷이 정립됐습니다.
이후 이 포맷 자체를 AI에 학습시켜, 새로운 화면도 동일한 규격의 플로우 문서로 산출되도록 워크플로우를 만들었습니다. 도구를 써본 것이 아니라, 제 작업 표준을 AI에 이식해 반복 산출을 자동화한 것입니다.
8월부터 진행한 콘텐츠·마이페이지 작업에서는 문서에서 화면 초안까지의 리드타임이 절반으로 줄었습니다. 디자인 시스템과 IA가 자리잡은 영향도 있지만, 반복적인 플로우 문서 작성이 자동화된 것이 가장 컸습니다.

06 — Result
11개월, 앱 하나에서 세 개의 축으로
합류 시점의 메디스태프는 앱 하나로 운영되는 플랫폼이었습니다. 11개월 뒤에는 앱 안에 수익 모델이, 밖에는 유입 채널이, 그리고 옆에는 두 번째 프로덕트가 자리 잡았습니다.
▲50%
웹 버전 월간 유입 성장
별도 마케팅 집행 없이 매월 50% 수준의 유입 성장을 기록하고 있으며, 일 방문자 500명을 목표로 진행 중입니다.
월 1~5건
PCO 신규 계약 문의
대표자 개인 영업에 의존하던 수주 구조에서 벗어나, 웹 기반의 Inbound 문의 경로를 확보했습니다.
8.9만 원
커머스 객단가
옵션 16종을 가진 첫 협업 상품 기준. 62,000명 의료진 네트워크 안에 9만 원대 구매 수요가 실재한다는 것을 확인했습니다.
1/2
문서 → 화면 초안 리드타임
직접 정립한 유저 플로우 포맷을 AI에 학습시켜 반복 산출을 자동화했고, 문서에서 화면 초안까지의 리드타임을 약 절반으로 줄였습니다.
유일한 디자이너로서 세 프로덕트를 차례로 세우는 동안, 제 역할도 함께 옮겨갔습니다 — 만드는 사람에서, 방향을 함께 정하고 다음 사람에게 넘겨주는 사람으로.