박진산

프론트엔드 개발자 (3년차) | 010-2582-6608 | sanfedev@gmail.com

일하며 이런 고민을 합니다

더 나아질 수 없을까?

새로운 것을 배우고 변화하는 과정에서 재미를 찾습니다. 그래서 일할 때 더 나은 방향은 없을지 자주 고민합니다. 그 과정에서 성장을 경험하길 좋아합니다.

이것부터 해보면 어떨까?

작고 사소하더라도 개선 방향을 탐색했다면 빠르게 실행하길 좋아합니다. 자동화 도입, 리팩토링, 기능 제안 등처럼 책임 영역 안에서 최선을 다합니다.

동료는 어떻게 생각할까?

협업과 합의에 큰 가치를 둡니다. 그런 관점에서 코드 리뷰는 팀원 간 합의, 더 나은 결과를 끌어내는 협업 과정으로 이해하고 있습니다. 또한 프론트엔드는 개발 - 디자인 - 기획이 갈무리되는 지점이라 생각해, 요구사항을 명확하게 이해하고 혹시 놓친 전제는 없는지 파악하고 피드백을 얻기 위해 적극적으로 커뮤니케이션합니다.

핵심 역량

모바일 앱 내 웹뷰 서비스와 다양한 웹 기반 서비스를 개발하고 운영할 수 있습니다

MAU 40만 모바일 앱 내 웹뷰 서비스를 설계, 개발, 배포하고 1년 4개월 간 운영했습니다. 또한 모바일 환경이 아닌 실시간 채팅 서비스, 병원 SaaS, 어드민 페이지 등 다양한 웹 기반 서비스를 개발하고 운영한 경험도 있습니다. 모바일 OS에 따른 웹뷰의 차이에 대한 이해가 있으며 크로스 브라우징 경험이 있습니다. React, Next.js 등 기술적 차이를 이해하고 요구사항에 따라 적절한 기술을 선택해 코드 베이스를 구축해 작업을 완료할 수 있습니다.

프로젝트 세팅부터 배포까지 전 과정을 다루고 유지보수 할 수 있습니다

코드 베이스를 글로벌 모듈과 도메인 모듈을 구분하고, 도메인 별로 관심사를 계층화할 수 있습니다. api 인터페이스 작성, 다국어 json 파일 작성 등 개발 단계에서 일어날 수 있는 반복적인 업무를 스크립트를 통해 자동화하거나 작업 시간을 단축했습니다. 코드 품질 관리, 테스트, 배포까지 GitHub Actions 기반으로 CI/CD 파이프라인을 구성할 수 있습니다. 프로덕션 환경에서는 Sentry로 에러를 추적하고 Clarity로 사용자 행동을 분석하며, 문제가 발견되면 빠르게 원인을 파악하고 개선하는 데 기여할 수 있습니다.

디자인 시스템 개발 경험이 있습니다

디자이너와 한 팀이 되어 디자인 시스템을 구축하고 개발한 경험이 있습니다. 아토믹 디자인 개념을 차용해 조립 가능한 최소한의 컴포넌트들을 만들고 조합해 디자인 시스템을 구현했습니다. 비교적 단순한 컴포넌트는 props, children을 활용하고 조금 더 복잡한 컴포넌트는 컴파운드 패턴과 활용해 유연하게 합성할 수 있고 충분히 재사용 가능한 컴포넌트를 작성했습니다. 디자인 시스템이 예외적인 요구사항에도 대응할 수 있도록 headless ui 라이브러리처럼 외부에서 커스텀할 수 있도록 인터페이스를 구성했습니다.

경력 상세

모션랩스

프론트엔드 | 정규직 | 팀원 | 2025.03.04 ~ 2026.03.06

Nexup AI (B2B SaaS)

• 작업 내용
  • 환자 관리, 검진 기록 관리, AI 검진 리포트 생성, 검진 PDF 결과지 발급 등 건강검진 효율화 솔루션 A to Z 개발. 기여도 80%.
  • 다국어, 다국적 포맷 지원
• 응집도 높은 코드 베이스 구축하기
  • (문제) 병원 SaaS는 환자관리, 검진기록, AI리포트, 결과지 발급 등 복잡한 도메인이 얽혀있어, 코드가 여러 곳에 흩어지면 수정 시 영향 범위 파악이 어렵고 중복 코드가 증가하는 문제가 예상됐음. (해결) Feature-Sliced Design을 참고하되 덜 엄격한 방식으로 글로벌 모듈과 도메인 모듈을 분리. 각 도메인 내부를 ui[컴포넌트], service[데이터 페칭/변환], logic[비즈니스 로직] 3계층으로 구성. (성과) 참조 관계가 명확하고 응집도가 높은 코드 베이스로 신규 개발자 온보딩 시 어디에 무엇이 있는지 직관적으로 파악 가능했음. 기능 수정 시 영향 범위가 단일 도메인 내로 제한되어 사이드이펙트 감소. (레슨 런) 모듈 패턴을 더 잘 이해하고 활용할 수 있게 되었음. 그 과정에서 더 잘게 나눠 중복을 제거하고 재사용성을 개선했다고 생각했지만 실제로는 그 효과가 크지 않고 오히려 코드를 더 복잡하고 파악하기 어렵게 만든 실패 경험도 있음. 욕심내지 않고 단순함을 유지하는 게 더 나은 경우도 있었음. 이를 계기로 코드를 짤 때 항상 이게 정말 유지보수를 쉽게 만들고 더 단순하게 만드는 건지 더 고려하게 됨.
• 타입 디버깅을 줄이고 핵심 비즈니스 로직에 집중하기
  • (문제) 건강검진 관련 데이터 구조가 복잡하고 방대해, 개발 중 백엔드 api 인터페이스 변경으로 프론트엔드에서 지속적으로 인터페이스 변경 여부를 체크하고 수정해야 했음. (해결) 백엔드팀에 협조를 구해 swagger에서 json을 받아 api.d.ts 파일을 생성하는 codegen 스크립트 사용. 이 인터페이스를 원천으로 삼아 프론트엔드는 파생 인터페이스를 만들거나 확장 타입을 만듦. 프론트엔드의 유연함을 챙기는 동시에 백엔드 - 프론트엔드 모두 단일한 인터페이스를 보도록 함. (성과) 기준으로 작용해 백엔드 - 프론트엔드 간 api 커뮤니케이션이 더 원활해짐. 프론트엔드에서 단독으로 만든 인터페이스가 없기에 휴먼 에러를 막고 불필요한 타입 디버깅에서 벗어나 개발 환경이 개선됨. 코딩 에이전트에 api 인터페이스를 제공할 수 있어, 단순한 신규 api 연동과 유지보수를 자동화하기에 용이했음. (레슨 런) 인터페이스를 기반으로 동작하는 시스템에 대한 이해 향상. 백엔드 인터페이스를 기반으로 데이터 페칭 모듈의 타입을 커스텀하고 프론트엔드 인터페이스를 파생시키며 타입 추출, 유틸리티 타입을 다루며 타입 재사용 역량이 강화됨.
• 다국어 텍스트 관리 자동화 스크립트 활용하기
  • (문제) 다국어 지원으로 한국어 외 영어, 베트남어 번역이 변경, 추가될 때마다 수정 작업이 피로했고, 실수로 인해 누락도 잦았음. (해결) 번역 구글 스프레드시트에서 데이터를 csv 형태로 불러와 key-value 형식의 json을 생성하는 자동화 스크립트 작성. (성과) 개발자가 직접 번역을 수정하러 코드 베이스를 헤메는 수고를 덜고, 중복된 번역 키를 자동으로 제거하고 누락된 번역 내용을 감지하는 기능으로 개발자 - 번역 담당자 간 작업 흐름이 수월해짐. (레슨 런) 개발 비용 대비 생산성 향상 효과가 커서 만족스러웠음. 이를 계기로 자동화 스크립트를 더 많이 작성해서 비슷한 작업을 자동화하고 있음.

국가 표준 건강검진 전자 문진 시스템

• 작업 내용
  • 환자는 웹뷰 환경에서 문진을 작성하고, 병원이 웹으로 결과를 확인, 인쇄할 수 있는 서비스
• 양식 pdf 에디터로 빠르게 개발하고 유저 만족도 올리기
  • (문제) 국가 표준 양식 및 디자인을 준수해야 하는 요구사항이 있었음. 리액트로 UI를 구현했을 때 많은 시간이 들어서 표준 양식이 바뀔 때마다 유지보수 비용이 많이 들었음. 문진표 디자인 관련된 병원의 클레임도 잦았음. (해결) 환자가 제출한 내용이 자동 기입되는 양식을 만드는 문진표 웹 에디터 개발. 팀에 건의하고 핵심 로직이 담긴 프로토타입을 시연한 뒤 개발 진행하게 됨. 스캔 이미지에 canvas api로 좌표를 찍고 pdf 라이브러리를 사용해서 acroform이 내장된 pdf 양식을 생성함과 동시에 문항과 제출 내용 타입이 unique key-value 형식을 가지는 인터페이스를 정의. (트러블슈팅) 체크박스 border를 투명하게 해야 하는데 사용한 pdf 라이브러리에 기능이 없었음. 구현 코드를 보니 인터페이스에는 정의되지 않았지만, undefined를 할당하면 투명하게 만들 수 있는 것을 발견한 경험. (성과) 모바일 폼과 양식 pdf가 같은 인터페이스를 사용할 수 있어 개발 효율 향상. 신규 문진표 추가 및 기존 문진표 유지보수 속도가 2배 이상 단축됨. 잘못된 문항을 매핑하는 휴먼 에러 원천 차단. (레슨 런) 언뜻 복잡해 보이는 데이터도 인터페이스로 추상화해서 다루면 한층 단순하게 만들 수 있고, 정적 분석을 십분 활용하면 휴먼 에러를 줄이는 데 탁월하다는 점을 몸소 체험하게 됨.

닥터다이어리

프론트엔드 | 정규직 | 팀원 | 2023.06.12 ~ 2024.10.14

닥터다이어리 모바일 앱 내 웹뷰

• 작업 내용
  • next.js 기반으로 다양한 웹뷰 서비스 A to Z 개발
• 건강검진 결과 조회 서비스
  • 사용자의 진료, 처방, 건강검진 내역을 모아볼 수 있는 서비스 출시
  • 디자인 시스템을 토대로 웹뷰 공용 컴포넌트 개발
  • LCP 개선으로 유저 이탈율 방어 [7.8초 -> 1.4초]
  • android와 ios에서 호출하는 웹뷰가 가진 차이에 대한 이해
• 혈당 기록 / 관리 서비스
  • 연속 혈당 측정기를 연동하고 혈당 데이터에 인사이트를 제공하는 서비스 출시
  • UX를 위해 단순 그래프 대신 상호작용이 가능한 그래프 개발을 제안
  • 혈당 데이터 요청 및 파싱 로직을 모듈화로 회사별 측정기 대응이 가능해 추가 개발 비용 절감
  • 기존 명령형 브릿지 코드를 타입 안전한 선언형 API로 재설계. iOS/Android 플랫폼 차이를 추상화해 비즈니스 로직에서는 플랫폼 분기를 제거하고 단일 인터페이스로 호출 가능하게 개선.
• 건강보조식품 커머스 서비스
  • 쇼핑, 결제, CS 등 샵 관련 모든 페이지 개발
  • 결제 플로우 및 주문 관리 시스템 개발
  • 고객 서비스 페이지 및 문의 처리 시스템 구축
  • 결제 결과 수신과 후처리 요청을 위해 Next.js 라우트 핸들러를 활용해 서버 로직 개발
  • 영업 이익 증대 및 커머스 도메인 이해 향상

어드민 / 웹 플랫폼

• 혈당 관리 코칭 플랫폼
  • WebSocket을 이용한 실시간 채팅 클라이언트 개발
  • 혈당, 강의 진도율, 식사, 운동 등 유저가 앱에 기록한 정보를 조회할 수 있는 어드민 페이지 개발
  • 사용자 건강 데이터 시각화 및 분석 대시보드 구현
  • 강의 진도율 추적 및 학습 현황 모니터링 시스템 개발
  • 식사 및 운동 기록 관리 및 통계 기능 제공
  • 강북구 보건소에 납품, 서울대병원 협약 체결 등 영업 이익 증대에 기여
• 닥터 다이어리 어드민
  • CMS 공용 컴포넌트 개발
  • 포인트샵 카테고리, 상품 관리자 페이지 개발
  • 주문 현황, 배송, 취소-환불 및 CS 등 물류 플로우 관련 관리자 페이지 개발
  • SSR을 활용해 데이터 조회 페이지 로드 속도 개선 [3초 -> 1초]

주요 기술

• Typescript, React.js, Next.js, Tailwind-CSS, Zustand
• Axios, Tanstack-Query
• React-Hook-Form, Zod
• Vitest, React-Testing-Library, Playwright
• Eslint, Prettier, Husky
• Github Action, Docker
• Aws(S3, CloudFront, ECS, Code Deploy), Vercel

교육

• 서울예술대학교 문예창작과 졸업