윤성국 — 프론트엔드 엔지니어 · 6년차
프론트엔드 엔지니어 · 6년차
복잡한 제품의 문제를 측정하고 검증하며, 해결 과정을 테스트·문서·도구로 남깁니다.
B2C 웹·WebView·운영 Admin과 웹 SaMD·공통 SDK를 개발합니다.
- React / TypeScript
- Next.js
- TanStack Query
- WebView Bridge
- 테스트 · CI
PROLOGUE, 경험과 개발 원칙
어떤 일을 해왔고, 그 경험이 지금의 개발 방식으로 어떻게 이어졌는지 소개합니다.
안녕하세요. React와 TypeScript를 기반으로 B2C 웹서비스를 개발해 온 6년차 프론트엔드 엔지니어 윤성국입니다. 사용자 경험을 만드는 서비스 화면과 안정적인 운영을 지원하는 관리 도구를 함께 개발해 왔습니다.
- Q1경험
회계·정산과 시스템 QA에서 시작해 B2C 웹·WebView·운영 Admin과 의료영상 제품까지 개발해 왔습니다.
개발 이전에는 야놀자와 구하다에서 회계·정산 및 시스템 QA를 담당했습니다. 작은 오류도 업무 전반에 영향을 줄 수 있었기에, 결과뿐 아니라 확인 기준과 근거를 함께 남기는 습관을 익혔습니다.
온택트헬스에서 건강리포트 어드민과 고객앱 웹뷰로 개발을 시작했고, B2C 건강 플랫폼과 운영 어드민을 거쳐 의료영상 도메인으로 이동했습니다. 현재는 심초음파 DICOM 뷰어 SDK와 이를 사용하는 웹 SaMD 제품을 함께 개발합니다.
- Q2개발 원칙
개발 → 검증 → 문서화 → 자동화 → 공유 → 재발 방지의 흐름을 지향합니다.
동작 여부만 확인하지 않고 무엇이 정상인지 먼저 정의합니다. 리팩터링 전에는 특성화 테스트와 원본 대조 기준을 만들고, CI에 새 검사를 추가할 때는 과거 파손 사례가 실제로 검출되는지 확인합니다.
운영 중 발견한 문제는 원인과 재현 조건을 기록하고 테스트와 자동화에 반영합니다. 해결 과정과 검증 방법은 문서로 남겨 재발 가능성을 줄입니다.
STATUS, 핵심 역량 요약
- 01PRODUCT DEVELOPMENT
React·Next.js·TypeScript로 사용자 화면과 운영 도구를 개발합니다
B2C 웹, WebView, 운영자용 Admin과 웹 SaMD에서 화면 설계부터 REST API 연동, 배포 이후 개선까지 담당했습니다.
- 02SERVER STATE
여러 화면의 서버 데이터가 같은 시점에 갱신되도록 설계합니다
TanStack Query의 조회·저장 로직을 분리하고 query key와 캐시 무효화 순서를 정리해 메인 화면과 팝업의 데이터를 일치시켰습니다.
- 03QUALITY SYSTEM
실제 장애를 테스트와 CI 검사로 남깁니다
실제 장애와 회귀 사례를 테스트로 작성하고 CI 검사를 10단계로 늘렸습니다. 새 검사는 과거 파손 사례를 넣었을 때 실패하고, 원복한 뒤 다시 통과하는지 확인한 후 적용합니다.
일하는 방식
정상 동작의 기준을 세우고, 변경 범위와 검증 방법을 함께 살핍니다.
- CROSS-CHECK
정상의 기준과 검증 방법을 함께 정의합니다
리팩터링 전에는 특성화 테스트와 원본 대조 기준을 마련합니다. CI에 새 검사를 추가할 때는 과거 파손 사례를 넣어 실제로 실패를 잡는지 확인합니다.
- MECHANISM
반복되는 확인 작업을 문서화하고 자동화합니다
원인·해결 방법·잔여 위험을 기록하고, 반복되는 문제는 체크리스트·공용 워크플로우·CI 검증에 반영해 개발 과정의 오류를 줄입니다.
- EVIDENCE
성능과 품질은 측정 가능한 근거로 판단합니다
렌더링 비용과 번들 구성을 측정해 실제 병목을 먼저 찾습니다. 라우트 단위 지연 로딩·동적 임포트·폰트 서브셋·이미지 최적화를 적용하고 번들 크기 변화를 계속 확인합니다.
기술 스택
- LANGUAGE
- TypeScript
- JavaScript
- FRAMEWORK & LIBRARY
- React
- Next.js
- Vite
- Vue.js
- TanStack Query
- Zustand
- Jotai
- Tailwind CSS
- Radix UI
- Emotion
- shadcn/ui
- WebGL2
- WebCodecs
- DEVELOPMENT & COLLABORATION
- GitLab
- GitHub
- npm
- Nexus
- VS Code
- WebStorm
- IntelliJ
- Notion
- Jira
- Figma
- Storybook
- ORCA
- MEDICAL IMAGING
- DICOM
- DICOMweb
- Cornerstone3D
- PACS
- WADO-RS
- WADO-URI
- TESTING & MONITORING
- Vitest
- Playwright
- Sentry
주요 기술 활용＋ OPEN
- React · TypeScript
- 10만 LOC 이상·600여 개 모듈로 구성된 웹 SaMD와 운영자용 Admin을 개발합니다. 대형 컴포넌트를 기능 단위로 나누고 TypeScript 검증 범위를 확장했습니다.
- TanStack Query · Zustand
- 서버 상태와 클라이언트 상태를 분리하고, query key·캐시 무효화·refetch 순서를 관리해 화면 간 데이터 일치를 유지합니다.
- WebGL2 · WebCodecs
- DICOM 멀티프레임 렌더러와 하드웨어 디코더를 구현합니다. WebCodecs를 지원하지 않는 브라우저와 압축 포맷은 별도 디코더로 처리합니다.
- Canvas · Measurement
- 줌·팬·회전 환경에서 측정 도구의 좌표 변환, 히트 판정과 작도 제약을 설계합니다.
- Next.js · WebView
- B2C 건강 플랫폼, 운영 어드민과 지자체 서비스의 신규 구축을 담당했고, iOS·Android 앱 브릿지 인터페이스를 통합했습니다.
- Vitest · Playwright · CI
- 리팩터링 전에 기존 동작을 기록하고, Testing Library 기반 컴포넌트 테스트와 E2E 시나리오를 여러 서비스에서 재사용할 수 있도록 설계합니다. 실제 장애와 회귀 사례는 CI 검사에 추가합니다.
- Storybook · 협업
- 재사용 가능한 UI 컴포넌트의 상태와 동작을 Storybook으로 문서화하고, 디자이너·기획자와 함께 확인해 화면 해석의 차이와 재작업을 줄입니다.
- 패키지 · 개발체계
- 뷰어 SDK를 사내 npm으로 배포하고, 버전 전파·백포트·AI 에이전트 워크플로우와 문서 SSOT를 운영합니다.
WORLD MAP, 경력
심장 초음파 AI 분석 기업으로 웹 SaMD, PACS 연동과 AI 리포트 자동 생성 제품을 국내외 대학병원·검진기관에 제공합니다. B2C 건강 플랫폼과 운영자용 Admin부터 의료기관 대상 B2B 엔터프라이즈 웹 제품, 자체 DICOM Viewer SDK까지 개발하고 있습니다.
Sonix Health — 심초음파 뷰어 SDK · 웹 SaMD
의료진의 진단을 지원하는 AI 기반 초음파 분석 기술로, 심장 진단에 필요한 81개 항목을 자동 측정하며 FDA 허가(K240645)를 받았습니다.
웹 SaMD 제품과 자체 DICOM 뷰어 SDK를 함께 개발합니다. 영상 렌더링·디코딩·측정 도구부터 제품 화면과 운영 도구까지 담당하며, 여러 서비스에서 재사용할 컴포넌트 테스트와 E2E 시나리오도 만들고 있습니다. 팀의 AI 개발 규칙과 17개 서비스 문서도 한곳에서 찾을 수 있도록 정리했습니다.
- WebGL2
- WebCodecs
- npm SDK
- CI Gate
- 문서 SSOT
17개 서비스 개발 문서 허브
2026.06 ~ 현재17개 서비스의 API 설계와 결정 근거, 정책·기능 명세, 서비스 간 의존과 변경 이력을 한곳에서 찾을 수 있게 정리했습니다. 코드가 바뀌었는데 관련 문서가 갱신되지 않으면 CI가 알려주며, 개발자용 문서와 기획·CS용 문서를 함께 관리합니다.
- ADR
- MSA 17개 서비스
- 문서 변경 검사
- 릴리즈 노트
심초음파 DICOM 뷰어 SDK
2026.03 ~ 현재 · 기여율 80% · 측정 계층 단독동시 재생 성능 저하, 장비별 압축 형식, 제품마다 달라지는 측정 규칙. 기존 오픈소스 뷰어의 확장 구조로 세 요구를 함께 수용하기 어려워, 성능과 기능 확장을 제품 요구에 맞게 제어할 기반이 필요했습니다.
WebGL2 2D Array Texture와 뷰포트별 scissor 렌더링을 적용해 여러 클립을 한 렌더링 흐름에서 재생했습니다.
- WebGL2
- GLSL
- WebCodecs
- DICOM Part 10
- npm workspace
ITEM BOX, 개인 작업
학습·계산·실시간 데이터·편집기·게임을 직접 설계하고 구현했습니다. 상세 페이지에서 주요 문제와 해결 과정을 확인할 수 있습니다.
Nihongo
PRODUCT간격 반복과 AI 튜터를 결합한 일본어 학습 PWA
간격 반복 복습, JLPT 학습, AI 회화·작문 첨삭, 오프라인 발음 재생을 제공하는 일본어 학습 프로젝트입니다.
- React 19
- Firebase
- IndexedDB
- Gemini API
Myeongri Seojae
PRODUCT10년 단위 대운을 타임라인으로 보여주는 명리 서비스
생년월일을 바탕으로 사주 원국과 대운·세운을 계산하고, 인생의 흐름을 타임라인으로 보여주는 프로젝트입니다.
- React
- TypeScript
- Playwright
- golden test
PigMa
TOOL도형·텍스트·커넥터를 편집하는 React 무한 캔버스 라이브러리
도형·리치 텍스트·커넥터·댓글을 편집하고 Figma 파일을 가져올 수 있는 React 캔버스 라이브러리입니다.
- React
- TypeScript
- Zustand
- zundo
- Tiptap
GukLabDocs
TOOL15개 프로젝트의 개발 문서와 공통 작업 방식을 연결한 지식 허브
프로젝트별 문서와 검증 방법, Agent Skill, 공통 플레이북을 한곳에서 찾을 수 있는 개발 문서 프로젝트입니다.
- Documentation
- Agent Skills
- CI
- SSOT
OFF THE CLOCK
- 게임
- 싸이클링
- 명상
- 헬스
- 여행
- 영화
- 독서
NEXT QUEST?, 연락
함께 해결하고 싶은 문제가 있다면 편하게 연락 주세요. 자세한 경력과 프로젝트 기록은 Notion에서 확인할 수 있습니다.