선택 프로젝트 — 주요 경력 프로젝트
임상시험 디지털 동의 플랫폼
임상시험 참여자가 시험에 대한 정보를 확인하고 전자 방식으로 동의 절차를 진행하는 서비스입니다. 전문적인 임상시험 정보를 참여자가 스스로 이해하고 의사결정할 수 있도록 단계별 동의 과정과 정보 전달 방식을 설계했습니다.
프론트엔드 리드 · 전체 1,418커밋 중 923건(65%), Jira 132티켓/2023.08 – 현재/Next.js 12 / React 18 / TypeScript / React Query v3 / Recoil / @dnd-kit / @xyflow/react / Playwright
01 / 03
운영 담당자가 문항을 만드는 화면
임상시험에 쓸 동의서와 전자 일지의 문항을 만드는 빌더입니다. 왼쪽에서 문항 유형을 골라 넣고, 가운데 카드를 끌어 순서를 바꾸고, 오른쪽에서 라벨과 응답 규칙을 고칩니다. 맨 위 버전 선택에서 이미 배포된 버전을 고르면 편집이 잠깁니다 — 지금 일지를 쓰고 있는 참여자의 응답과 문항 정의가 어긋나지 않게 하기 위해서입니다. 연구명·기관·참여자 식별자는 모두 지어낸 값입니다.
해결한 문제
- 문항이 100개를 넘고 서로 조건부로 분기하는 폼 에디터인데 상태를 배열로 들고 있었습니다. 문항 하나를 넣고 뺄 때마다 O(N) 연산이 돌았고, 분기끼리 참조하는 인덱스가 어긋났습니다.
내가 기여한 것
- 불변 객체를 통째로 복제하는 대신 연결 리스트를 TypeScript로 직접 구현했습니다. 삽입·삭제·순서 변경이 O(1)이 됐고, 포인터로 참조 무결성을 보장합니다. 회귀는 Jest 단위 테스트로 막았습니다.
- Bitbucket Pipelines에서 Headless Playwright E2E를 돌리는 파이프라인을 만들었습니다. Vercel 배포가 끝나는 시점을 동적으로 계산하고, 결과는 Jira 티켓과 메일로 자동 보고합니다. 리포팅 엔진은 Python으로 직접 작성했습니다.
- FSD로 점진 전환하면서 리치 텍스트·PDF처럼 무거운 컴포넌트는 dynamic import(ssr: false)로 미뤘습니다.
- Access/Refresh 토큰 이중 쿠키를 설계하고, PWA에서 쿠키가 사라지는 경우를 localStorage로 복구합니다. 다중 기기 로그인을 감지해 세션을 끊습니다.
임팩트
O(1)
폼 조작 · 지연·인덱스 오류 0건
−40%
초기 번들
100%
동의서·일지 수기 → 디지털 전환
E2E
주간 QA 자동화로 대폭 단축