최성재

프론트엔드 엔지니어

About Me

웹 표준·접근성을 기반으로 UI를 구현해온 경험을 바탕으로, React/Next.js와 TypeScript 환경에서 프론트엔드 개발을 해왔습니다.
컴포넌트 설계와 상태 관리, API 연동을 기본으로 하되, 성능 최적화와 테스트·문서화를 함께 적용해 제품 품질과 개발 생산성을 높이는 데 집중합니다.

현재 리턴플러스에서 한조각 홈페이지·WebView 앱·관리자 대시보드와 지도 기반 부동산 플랫폼 Prime의 프론트엔드 개발을 맡고 있습니다. 아키텍처 설계와 기능 개발부터 기존 코드의 마이그레이션, 유지보수와 기능 확장까지 서비스 전반의 개발을 담당합니다.

한조각의 3개 프로젝트는 Next.js 15 기반으로 설계와 개발을 리딩하며, 이미지·폰트 최적화와 SEO를 적용했습니다. 역할 기반 권한·라우팅과 TanStack Table 기반 관리자 화면을 구현해 운영에 필요한 기능을 제공했습니다.

이와 함께 Prime의 기존 JavaScript 코드를 FSD·TypeScript 구조로 전환해 도메인 모델·API·화면 조합의 책임을 정리했습니다. 지도 마커와 데이터 동기화 문제를 개선하고, 개발구역·교통망 편집 기능을 확장하며 기존 서비스의 구조 개선과 기능 개발을 이어가고 있습니다.

Claude Code를 활용해 LLM 기반 개발 워크플로우를 설계·운영하며, 요구사항을 분석·설계·구현·검증 단계로 구조화하고 Subagents와 Agent Teams를 활용해 작업 분배와 협업 프로세스를 체계적으로 관리합니다.
특히 자동 검증과 피드백 루프를 통해 품질 기준을 반복적으로 만족시키는 방식으로, 코드 생성에 그치지 않고 “프로세스”를 자동화해 개발 생산성과 결과 품질을 안정적으로 끌어올리는 데 강점이 있습니다.

Skills

  • Core
    • React, Next.js (App Router), TypeScript, Tailwind, Zustand
  • Production Experience
    • TanStack Table, Framer Motion/GSAP, React Hook Form, Axios, Storybook, Jest/RTL
  • Familiar
    • Redux, SCSS, Styled-components, Supabase, Prisma, Docker
  • LLM Workflow
    • Claude Code, OpenAI, Prompt Engineering(Cookbook), Sub-agent(Feedback Loop)

Projects

  • 지도 기반 부동산·개발사업 플랫폼

    Prime

    • React 18, TypeScript, Redux Toolkit
    • Naver Maps API, Tailwind CSS, Axios

    토지 실거래, 매물, 개발구역과 교통망 정보를 지도에서 탐색하고 관리하는 부동산 플랫폼. 기존 JavaScript 기반 서비스의 UI와 모바일 사용성을 개선하고, FSD·TypeScript 구조로 마이그레이션. 지도 렌더링 오류와 데이터 동기화 문제를 해결하면서 개발구역 등록, 이미지 오버레이, 교통망 편집 기능을 확장.

    담당 업무 — 기존 프론트엔드 개선, FSD·TypeScript 마이그레이션, 지도 기능 및 개발사업 관리 기능 개발

    주요 기능
    • 기존 서비스 FSD·TypeScript 마이그레이션 — components, hooks, utils, redux 중심의 기존 구조를 app → pages → widgets → features → entities → shared 6개 계층으로 재구성. 도메인 모델·API·데이터 파싱과 사용자 행동·화면 조합의 책임을 분리.
    • 지도 기반 부동산 탐색 — 확대 수준에 따라 시군구·읍면동 집계와 개별 실거래 마커를 전환. 지도 범위 기반 조회, 지번 검색, 최근 검색어, 면적·거리 측정과 평·㎡ 전환 제공.
    • 토지·매물 정보 관리 — 필지 경계, 공시지가 이력, 실거래 내역과 매물 정보를 상세 패널에 제공. 관리자 수정 결과를 지도 마커와 상세 화면에 동기화.
    • 개발구역 관리 — 경계점 선택을 통한 개발구역 등록과 사업정보 수정·삭제 구현. Polygon·MultiPolygon을 지원하고, 사업유형과 추진단계에 따라 구역 색상과 정보를 표시.
    • 지도 이미지·교통망 편집 — 사업 이미지를 지도 위에서 이동·회전·크기·투명도 조절 후 저장. 도로·지하철 노선의 정점, 곡선, 색상, 역명과 상세정보 편집 및 임시저장·복원 제공.
    • 추진위 목록 및 회원 기능 — 도시개발·재개발·재건축 추진위 목록을 커서 기반 무한 스크롤로 조회하고 지도 위치와 연결. 이메일·소셜 로그인과 서버 회원 등급 기반 관리자 기능 제어 구현.
    트러블슈팅
    1. 기능 확장에 맞춘 기존 코드의 FSD 마이그레이션
    • [문제]지도, 인증, 토지, 개발사업 기능이 컴포넌트·유틸리티·전역 상태 폴더에 나뉘어 있어 하나의 업무를 수정할 때 여러 위치의 코드를 함께 추적해야 하는 구조.
    • [해결]공통 HTTP·유틸리티를 Shared로 구성한 뒤 사용자·토지·개발구역·교통망을 Entity로 분리. 검색·거래 수정·개발구역 등록·교통망 편집을 Feature로 옮기고, Widget과 Page에서 조합하도록 전환. 앱 진입점과 라우팅을 교체한 후 기존 모듈과 미사용 관리자·데이터·이미지 자산을 정리.
    • [결과]마이그레이션 완료 시점 기준 6개 계층, 13개 Feature, 8개 Entity로 재구성. 슬라이스 공개 진입점과 의존성 방향을 검사하는 도구를 추가해 구조 규칙을 지속적으로 확인할 수 있도록 구성.
    2. 지도 확대·이동 시 마커 깜빡임과 이전 응답 반영 문제
    • [문제]마커 갱신 과정에서 기존 마커를 일괄 정리하고, 현재 줌과 다른 단계의 데이터를 렌더링하면서 마커가 사라지거나 다시 나타나는 문제 발생. 비동기 요청의 응답 순서도 최신 지도 상태와 다를 수 있는 구조.
    • [해결]표시 단위가 바뀔 때만 전체 마커를 재구성하고, 기존 마커는 ID 기준으로 재사용하도록 개선. 현재 줌에 맞는 응답이 도착할 때까지 기존 표시를 유지하고, 요청 ID를 비교해 최신 응답만 반영. 지도 중심·줌·경계 갱신도 하나의 액션으로 통합.
    • [결과]지도 이동에 따른 마커 유지·교체 기준을 명확히 하고, 뷰포트 상태 동기화 액션을 이벤트당 3회에서 1회로 축소.
    3. 매물 수정 후 마커와 상세 패널에 이전 정보가 남는 문제
    • [문제]동일 ID의 마커를 재사용하면서 제목·가격·면적 변경이 표시되지 않고, 클릭 이벤트가 마커 생성 당시의 데이터를 참조하는 문제 발생.
    • [해결]마커 표시값으로 렌더링 키를 생성해 데이터 변경 여부를 판별하고, 변경된 마커만 갱신. 클릭 시에는 캐시에서 최신 데이터를 조회하도록 이벤트 처리 방식 수정.
    • [결과]마커 재사용을 유지하면서 수정된 매물 정보가 지도 표시와 상세 조회에 함께 반영되도록 개선.
    4. 교통망 편집 작업의 저장 실패 대응
    • [문제]다수의 좌표와 역 정보를 편집한 뒤 서버 저장에 실패했을 때 작업을 보존하고 다시 불러올 수 있는 복구 경로가 필요.
    • [해결]수동 임시저장과 서버 저장 실패 백업을 별도로 구현. 저장 데이터에 버전과 시각을 포함하고, 복원 시 노선·편집 상태를 검증하도록 구성. 서버 저장 성공 후 실패 백업을 정리하고, 브라우저 저장 실패도 구분해 안내.
    • [결과]서버 저장과 별개로 작업을 보존·복원할 수 있는 2가지 경로를 제공해 저장 실패에 대응.
    성과
    • 기존 JavaScript 애플리케이션을 FSD·TypeScript로 전환 — 84개 JavaScript 앱 파일로 구성된 기존 코드를 미사용 코드 정리와 책임 분리를 거쳐 114개 TypeScript/TSX 파일로 재구성. 마이그레이션 완료 시점의 앱 소스에서 JavaScript 파일 제거.
    • 지도 상태 동기화 액션 3회 → 1회 — 지도 중심·줌·경계를 단일 액션에서 함께 갱신하도록 변경해 동일 이벤트의 상태 동기화 dispatch 수를 약 67% 축소.
    • 회귀 테스트 5개 파일·22개 케이스 구성 — 사용자 응답, API 주소 설정, 개발구역 파싱, 사업유형·추진단계 및 필터 선택 규칙 검증.
    • 구조와 품질 검사 자동화 — FSD 의존성·포맷·린트·타입 검사를 로컬 푸시 전 실행하도록 구성. 현재 150개 소스 파일에 대한 FSD 의존성 검사 통과.
    • 공간 데이터 편집 기능 확장 — 단일 폴리곤에서 다중 폴리곤으로 표현 범위를 넓히고, 이미지 오버레이와 도로·지하철 편집을 개발사업 관리 흐름에 통합.

    ※ 파일 수는 2026.08.07 마이그레이션 전후 기준이며 테스트·타입 선언·개발 프록시 파일은 제외. 액션 감소율은 뷰포트 상태 동기화 dispatch 수 기준.

    회고
    배운 점
    • [기능의 책임을 기준으로 구조를 바꾸는 마이그레이션]기존 코드를 FSD로 옮기면서 도메인 규칙, 사용자 행동, 화면 조합의 경계를 정리. 파일 이동과 함께 공개 API·의존성 규칙·검사 도구를 갖춰야 이후 기능 추가에도 구조를 유지할 수 있음을 경험.
    • [객체 재사용과 데이터 최신성의 균형]마커 재사용을 개선한 뒤 매물 수정값이 반영되지 않는 문제를 해결하면서, 객체의 동일성과 표시 데이터의 변경을 구분해야 함을 학습. 렌더링 키와 최신 데이터 참조를 함께 적용하는 방식으로 개선.
    • [지도 상태와 비동기 응답의 일관성]지도 이동·줌·API 응답이 서로 다른 시점에 발생하는 환경에서 최신 요청 판별과 응답의 줌 단계 확인이 중요함을 경험. 연관 상태를 하나의 갱신 단위로 묶어 처리 흐름을 명확히 구성.
    • [실패 이후까지 고려하는 편집 기능]교통망 편집에 임시저장과 실패 백업을 추가하며 저장 성공뿐 아니라 작업 보존·복원·재시도까지 사용자 흐름에 포함하는 설계 경험.
    개발 방식
    • 공통 기반 → 도메인 → 사용자 기능 → 화면 조합 → 앱 진입점 순서로 마이그레이션 커밋을 분리하고, 전환 후 레거시 코드 정리.
    • 운영 중 발생한 지도 표시·데이터 동기화 문제를 수정하면서, 반복되는 줌 정책과 API 응답 변환을 공통 규칙으로 정리.
    • 외부 입력은 런타임에 검증하고, 주요 파서와 업무 규칙은 단위 테스트 및 정적 검사로 확인.
  • RAG 스터디 · 토이 프로젝트

    Document Chat

    • Next.js 15, React 19, TypeScript
    • Vercel AI SDK, Supabase, Zustand

    RAG의 동작 원리와 LLM 애플리케이션 개발 과정을 공부하고, 학습한 내용을 PDF 질의응답 웹앱으로 구현한 개인 스터디·토이 프로젝트. 문서 처리부터 검색·답변 생성까지 연결하고, 검색 설정을 바꾼 평가 실험과 저장소 전환 과정을 기록.

    학습 목표
    • 문서 임베딩과 유사도 검색으로 외부 문맥을 LLM에 전달하는 RAG 구조 이해.
    • 검색 결과와 생성된 답변을 나누어 살펴보고, 검색 개수와 대화 기록이 답변에 미치는 영향을 확인.
    • 스터디한 내용을 프론트엔드·API·데이터 저장소가 연결된 웹앱으로 구현하고 개발 과정과 실험 결과를 남기기.
    학습 내용 및 구현
    • RAG의 전체 흐름 구현 — PDF에서 페이지별 텍스트를 추출하고 임베딩을 저장한 뒤, 질문과 유사한 문맥을 검색해 LLM에 전달. 답변과 함께 페이지 번호·발췌문을 표시하며 문서 처리 → 검색 → 답변 생성의 연결 과정을 학습.
    • 벡터 저장소와 파일 저장 방식 전환 — 초기 ChromaDB 컬렉션 검색을 Supabase pgvector의 SQL RPC 호출로 변경하고, 로컬 PDF 저장을 Supabase Storage로 전환. 로컬 실습 코드를 웹 배포 환경에 맞추는 과정을 경험.
    • 대화 맥락과 상태 관리 — 세션별 대화를 저장하고 최근 메시지 10개를 기본값으로 답변 생성에 전달. Container/View 패턴과 Zustand를 적용해 업로드·임베딩·채팅 상태와 화면 표시를 나누어 구현.
    • 인증과 API 사용량 기록 실습 — Google OAuth, Supabase Auth와 RLS 정책을 연결하고, 임베딩·답변 생성 시 토큰 사용량과 비용 추정값을 기록. LLM 호출 외에 웹앱을 구성하는 인증·데이터 접근·사용량 관리 흐름까지 학습 범위를 확장.
    실습 중 해결한 문제
    1. 로컬 저장 구조를 배포 환경에 맞게 변경
    • [문제]초기 구현이 로컬 파일 시스템과 ChromaDB 서버에 의존해, 웹 배포를 위해 파일 저장과 벡터 검색 구조를 바꿀 필요가 있었음.
    • [해결]PDF는 브라우저에서 Supabase Storage로 직접 업로드하고 API에는 파일 경로와 메타데이터를 전달. 서버가 파일을 읽어 텍스트를 추출하고 pgvector에 저장하도록 전환.
    • [배운 점]로컬에서 동작하는 코드와 배포 가능한 구조 사이에는 저장 위치·데이터 접근 방식·실행 환경을 함께 고려해야 한다는 점을 학습.
    2. PDF 추출 텍스트의 null byte 처리
    • [문제]PDF에서 추출한 텍스트에 PostgreSQL이 지원하지 않는 null byte가 포함되는 저장 문제를 확인.
    • [해결]페이지 텍스트를 추출하는 단계에서 null byte를 제거한 뒤 임베딩과 DB 저장에 사용하도록 전처리 추가.
    • [배운 점]문서 파싱 결과를 그대로 저장하는 대신, 저장소가 허용하는 형식으로 정리하는 과정이 필요함을 경험.
    3. 단일 질문에서 연속 대화로 확장
    • [문제]초기에는 현재 질문과 검색 문맥만 LLM에 전달해, 앞선 대화의 내용을 이어서 질문하는 흐름을 처리하기 어려웠음.
    • [해결]저장된 대화에서 오류 메시지를 제외하고 최근 N개를 role과 함께 전달. 히스토리가 없는 첫 질문은 기존 단일 프롬프트로 처리하도록 분기.
    • [배운 점]문서에서 관련 내용을 찾는 검색 문맥과 대화를 이어가기 위한 메시지 히스토리의 역할을 구분해 학습.
    실험과 결과물
    • PDF 업로드 → 페이지별 텍스트 추출 → 임베딩 저장 → 관련 문맥 검색 → 답변·출처 확인까지 연결한 웹앱 구현.
    • 사실 확인·복합 질문·추론·문서에 없는 질문·모호한 질문의 5개 유형, 20개 질문으로 평가 스크립트와 Top-K 6·10 비교 로그 작성.
    • 질문별 검색 문맥, 답변, 근거 판정과 실패 원인을 JSON으로 저장해 실험을 돌아볼 수 있는 자료 구성.
    초기 RAG 실험 기록 비교
    지표Top-K 6Top-K 10
    자동 평가 OK 판정19 / 2020 / 20
    Hit@K85%85%
    MRR0.4940.462

    ※ 2026.01 초기 ChromaDB 버전의 동일한 20개 질문에 대한 LLM 자동 평가 기록. 제한된 질문셋의 비교 결과이며, 현재 Supabase 버전은 별도 재평가가 필요. MRR은 근거의 검색 순위를 요약한 지표.

    회고
    배운 점
    • [검색과 답변을 나누어 평가하기]답변만 읽고 판단하는 데서 나아가 검색된 문맥과 답변의 근거를 함께 확인하도록 평가 흐름을 구성. 검색 실패와 생성 실패를 구분해 기록하는 방법을 실습.
    • [검색 개수 증가와 품질 개선 구분하기]Top-K 6·10 비교에서 자동 평가의 OK 판정 수는 늘었지만 Hit@K는 같고 MRR은 낮아짐. 검색량을 늘리는 것만으로 품질 개선을 단정할 수 없으며, 여러 지표와 실제 답변을 함께 확인해야 한다는 점을 정리.
    • [학습 결과의 검증 범위 남기기]20개 질문과 LLM 자동 평가 기록은 해당 실험을 돌아보는 자료로 활용. 질문셋 확장, 평가 기준 검토, 저장소 전환 후 재평가를 통해 추가로 확인할 부분을 구분.
    AI 도구를 활용한 개발 실습

    Claude Code에 작업 조율·스키마·백엔드·프론트엔드·리뷰의 5개 역할을 정의하고, 요청 분석 → 구현 → 리뷰 → 수정 흐름을 실습. PDF 업로드와 대화 히스토리 작업에서 입력값 검증·예외 처리를 보완한 과정과 작업별 요청 분석·최종 결과 문서를 기록.

  • 의료기기 투자 플랫폼

    한조각 홈페이지

    • Next.js 15, React 19, TypeScript, Tailwind CSS 4
    주요 기능
    • GSAP ScrollTrigger 활용 시네마틱 스크롤 애니메이션 (9개 섹션)
    • Zustand 기반 다단계 본인인증 시스템 (KCP PASS 연동)
    • 동적 메타데이터, JSON-LD, Sitemap.xml 서버사이드 SEO
    • Sharp/AVIF 이미지 최적화 (75% 감소), 폰트 서브셋 자동화 (70% 감소)
    트러블슈팅
    • [문제]이미지 파일 용량 과다(평균 3.2MB), Pretendard 폰트 2MB로 초기 로딩 시간 평균 3-5초 소요
    • [해결]Sharp를 활용한 WebP/AVIF 자동 변환 스크립트, subset-font로 폰트 서브셋 자동 생성. 이미지 75% 감소(800KB), 폰트 70% 감소(600KB). 이미지/폰트 최적화로 모바일(4G) 기준 초기 로딩 체감 시간을 약 5초 → 1.5초로 단축했고, 프로덕션 Lighthouse 성능 점수를 72 → 95로 개선했습니다
    • [문제]KCP PASS 본인인증 완료 후 부모 창으로 결과 전달 안 됨, iOS/Android WebView에서 회원가입 중단
    • [해결]팝업 윈도우(window.open) + URL 폴링 방식으로 전환. 인증 완료 시 콜백 URL 파라미터로 결과를 전달받아 setInterval로 팝업 URL 변화를 감지하는 구조로 변경. iOS/Android WebView 환경에서도 인증 결과 전달 정상화
    • [문제]검색엔진이 SPA 동적 콘텐츠 크롤링 실패, 네이버/구글 검색 결과 미노출
    • [해결]Next.js Metadata API로 서버사이드 메타데이터 생성, JSON-LD 구조화 데이터 구현, 동적 Sitemap.xml 자동 생성. 구글 "한조각" 브랜드명 검색 시 상위 노출 (Search Console 기준, 2026년 10월)
    성과
    • 초기 화면에 필요한 핵심 데이터는 서버에서 렌더링(SSR/RSC)하여 첫 로딩을 안정함
    • Lighthouse SEO 점수 95/100
    • 구글 "한조각" 브랜드명 검색 시 상위 노출 (Search Console 기준, 2026년 10월)
    회고
    배운 점
    • [GSAP ScrollTrigger의 강력함]scrub 옵션으로 부드러운 스크롤 동기화, 60fps 애니메이션 구현
    • [성능 최적화의 중요성]번들 크기 50% 감소로 TTI 34% 개선, 이미지 최적화가 LCP에 큰 영향
    • [Next.js 15 App Router]Server Component로 초기 로딩 속도 향상, 동적 메타데이터로 SEO 최적화
    • [Zustand의 효율성]Redux보다 간결한 문법, 번들 크기 최소(1KB), 복잡한 다단계 폼 상태 관리에 적합
  • WebView 기반 모바일 앱

    한조각 앱

    • Next.js 15, Zustand, Framer Motion, Recharts
    주요 기능
    • KCP PASS 본인인증, 간편 로그인 (PIN), 생체 인증 (WebView Bridge)
    • 투자 모집중 상품 관리, 상세 페이지, 투자하기, 결제
    • 마이페이지 (투자 현황, 배당금, 입출금 내역, 계좌 관리)
    • 1대1 문의, FAQ, 공지사항, 알림 센터 (푸시 알림)
    트러블슈팅
    • [문제]Next.js의 서버사이드와 클라이언트사이드에서 API baseURL이 달라야 하는 문제 (서버는 직접 백엔드 호출, 브라우저는 CORS 우회 필요)
    • [해결]getBaseURL() 함수로 환경 자동 감지, 서버사이드는 직접 백엔드 URL(NEXT_PUBLIC_API_BASE_URL) 사용, 클라이언트는 Next.js rewrites를 통한 /api 프록시 사용. Axios 인터셉터로 헤더 자동 추가 및 응답 데이터 unwrap 처리
    • [문제]iOS/Android 모바일 브라우저에서 키보드가 올라올 때 하단 고정 버튼이 가려져 사용자가 조작 불가
    • [해결]모바일에서 키보드가 올라오면 하단 버튼이 가려지는 문제 해결. visualViewport API로 키보드 높이를 실시간 감지하고, 하단 고정 버튼을 키보드 위로 자동 이동. iPhone 홈바(Safe Area)도 함께 대응
    • [문제]본인인증(X-ENCRYPTED-AUTH) → 로그인(AUTH-TOKEN) 2단계 인증 시스템에서 각 페이지별 접근 권한이 달라 라우팅 로직이 복잡해짐
    • [해결]Next.js middleware로 서버사이드 인증 검증 및 자동 리다이렉트 구현. 쿠키 기반 인증 상태 확인 후 미인증은 /auth, 본인인증만 완료는 /auth/login, 전체 인증 완료는 정상 접근. 게스트 모드(/auth/guest) 별도 처리
    • [문제]다른 디바이스에서 중복 로그인 시 기존 세션이 유지되어 보안 이슈 발생
    • [해결]Axios 응답 인터셉터에서 duplicated_login 플래그 감지 시 모든 쿠키 자동 삭제, 로그인 페이지로 강제 리다이렉트. 클라이언트사이드에서 자동 처리되어 사용자 혼란 최소화
    • [문제]Flutter WebView와 웹 간 양방향 통신 시 타입 안정성 부재, 액션별로 다른 payload/response 타입 관리 어려움
    • [해결]TypeScript 조건부 타입(PayloadByAction<T>, ResponseByAction<T>)으로 액션별 타입 자동 추론 구현. 함수 오버로딩으로 각 액션(toFlutterBio, toFlutterRegister 등)마다 정확한 타입 체크. requestFlutterData() 함수 하나로 모든 브릿지 통신 타입 안전하게 처리
    성과
    • getBaseURL() 함수로 SSR/CSR 환경 자동 감지, API 통신 에러율 0% 달성
    • middleware 기반 인증 상태 검증으로 잘못된 페이지 접근 방지, 라우팅 정확도 100%
    • Axios 인터셉터로 duplicated_login 플래그 감지 시 자동 세션 정리, 보안 강화
    회고
    배운 점
    • [WebView 통신의 이해]iOS와 Android의 Bridge API 차이 학습, 플랫폼별 예외 처리의 중요성
    • [Framer Motion을 활용한 고성능 애니메이션]AnimatePresence와 z-index 동적 할당으로 여러 페이지가 스택처럼 쌓이는 네이티브 앱 전환 효과 구현, 60fps 부드러운 슬라이드 애니메이션으로 웹과 앱의 경계 제거
  • 백오피스 관리 시스템

    관리자 대시보드

    • Next.js 15, TanStack Table, Lexical, Recharts
    주요 기능
    • 권한 기반 멀티 대시보드 (중앙, 병원, 장비 관리자)
    • TanStack Table v8 고급 데이터 테이블 (서버사이드 페이지네이션, 컬럼 리사이징)
    • Lexical Rich Text 에디터 (약관, 뉴스, FAQ 작성)
    • Recharts 대시보드 시각화 (KPI 카드, 투자 트렌드, 파이 차트)
    • 31개 모듈화된 API Hooks, 10개 이상 도메인 관리
    트러블슈팅
    • [문제]중앙 관리자, 병원 관리자, 장비 관리자 등 3가지 권한에 따라 서로 다른 레이아웃과 메뉴 필요, 단일 레이아웃 + 조건부 렌더링은 복잡함
    • [해결]권한별 레이아웃 분리를 Route Groups + 서버 권한 확인으로 설계하여, 발생하던 hydration 이슈를 구조적으로 제거하고 레이아웃/메뉴 코드의 복잡도를 낮췄습니다
    • [문제]10개 이상 도메인에 대해 일관된 테이블 UI 필요, 페이지네이션/정렬/필터링/행 선택/컬럼 리사이징 등 복잡한 기능 요구, 도메인마다 새로 만들면 중복 코드 과다
    • [해결]TanStack Table v8 Headless UI 선택, 범용 DataTable 컴포넌트 설계, TypeScript 제네릭 활용. 서버사이드 페이지네이션으로 평균 로딩 0.5초 이내, 컴포넌트 재사용률 95%, 개발 속도 3배 향상
    성과
    • 풀 CRUD 기능, Excel 다운로드, 실시간 대시보드
    • 관리자 작업 효율성 60% 향상 (기존 수동 작업 대비)
    회고
    배운 점
    • [복잡한 권한 시스템 설계]라우트 그룹을 활용한 권한별 레이아웃 분리, RBAC(Role-Based Access Control) 구현
    • [대규모 폼 상태관리]Zustand를 활용한 복잡한 폼 상태 관리, 원본 데이터 추적을 통한 변경 감지
    • [고성능 테이블 구현]TanStack Table의 유연한 API 활용, 서버사이드 페이지네이션, 가상화
    • [모듈화 및 재사용성]Custom hooks, Container 패턴, 범용 컴포넌트 설계로 개발 속도 향상
  • UI 컴포넌트 라이브러리

    Surromind Monorepo

    • React, TypeScript, Styled Components, Storybook
    주요 기능
    • 재사용 가능한 UI 컴포넌트 라이브러리 구축 (26개 컴포넌트)
    • 메뉴, Breadcrumb, AutoComplete, Badge, Modal 등 핵심 컴포넌트 리팩토링
    • Jest + React Testing Library 기반 단위 테스트
    • Storybook을 활용한 컴포넌트 문서화 및 시각적 테스트
    트러블슈팅
    • [문제]메뉴와 Breadcrumb 컴포넌트의 과도한 useEffect 사용으로 불필요한 리렌더링 발생, 디버깅 어려움
    • [해결]메뉴는 useEffect 제거 및 초기 상태 설정 방식으로 변경, Breadcrumb은 내부 상태 관리를 완전히 제거하고 Props 기반 완전 제어 컴포넌트로 전환.
    • [문제]interface와 type import 간 순환 참조로 인한 빌드 에러 발생
    • [해결]공통 interface를 별도 types.ts 파일로 분리, interface extends 활용하여 타입 재사용, import 구조를 단방향으로 재설계. 빌드 에러 완전 해결, 타입 재사용성 및 유지보수성 향상
    성과
    • useEffect 제거 및 Props 기반 제어 컴포넌트 전환으로 불필요한 리렌더링 제거
    • 순환 참조 해결로 빌드 안정성 확보
    회고
    배운 점
    • [체계적인 컴포넌트 설계]상태 관리를 최소화하여 예측 가능성을 높이고, Props 인터페이스를 직관적으로 설계하며, 컴포넌트 책임을 명확히 분리하는 "좋은 컴포넌트"의 원칙 학습
    • [테스트 주도 개발의 가치]테스트 코드 작성으로 버그 조기 발견, 대규모 리팩토링 시 안전성 확보, 테스트가 컴포넌트 사용 방법을 명확히 문서화하는 효과 체감
    • [TypeScript 타입 안정성]interface extends를 통한 타입 재사용, 순환 참조 문제 해결, 런타임 에러를 컴파일 타임에 잡아 장기적으로 유지보수 비용 절감
  • AI OCR 문서 처리

    AIOCR

    • Next.js 14, Zustand, Alova, Ant Design
    주요 기능
    • 문서 업로드 및 OCR 처리 관리 (다중 파일, 실시간 진행률 표시)
    • 한글 검색 정규화(NFD 방식), 다중 조건 필터, 디바운스 검색(300ms)
    • 계정 및 권한 관리 (USER ↔ MANAGER 역할 변경, 활성/비활성 관리)
    • AI 키워드 관리 시스템 (동의어 그룹, 드래그앤드롭 우선순위 조정)
    • 목록 상태 유지 기능 (URL 쿼리, sessionStorage 스크롤 복원)
    트러블슈팅
    • [문제]목록에서 상세 페이지를 거쳐 돌아올 때 처음으로 초기화 (페이지, 필터, 스크롤 위치 모두 리셋)
    • [해결]useQueryString 커스텀 훅으로 URL 기반 페이지 상태 관리, useScrollMemory 훅으로 sessionStorage에 스크롤 위치 저장/복원. 상세에서 돌아올 때 이전 상태 정확히 복원, Work 목록과 계정관리 목록 모두 적용
    • [문제]한글 검색 시 자모 분리 문제로 특정 조합에서 검색 실패
    • [해결]검색어 전송 전 NFD(Compatibility Decomposition) 정규화 적용. 모든 한글 검색이 일관되게 작동, 자모 분리 문자도 정확히 검색
    성과
    • 5개의 독립적인 Zustand 스토어로 관심사 분리, 확장 가능한 아키텍처 구축
    • 사용자 경험 중심 개발, 보일러플레이트 90% 감소, 타입 안정성 확보
    회고
    배운 점
    • [사용자 경험 중심 개발]단순히 기능을 구현하는 것을 넘어 실제 사용자의 불편함을 발견하고 해결. URL 쿼리와 sessionStorage를 조합하여 SPA에서도 브라우저 네이티브 동작처럼 자연스러운 UX 제공
    • [현대적인 기술 스택 활용]Zustand의 간결한 API로 Redux 대비 보일러플레이트 90% 감소, Alova의 선언적 API로 직관적인 데이터 페칭 구현
    • [한글 처리의 특수성]한글 유니코드 정규화 방식(NFC vs NFD)의 차이를 이해하고, 서버-클라이언트 간 인코딩 일관성 확보의 중요성 학습

Career

(주)리턴플러스

  • 2025.05 - 2026.10
  • 개발팀 - 전임(프론트엔드 리드)

Next.js 15 기반의 한조각 홈페이지·WebView 앱·관리자 대시보드 3개 프론트엔드를 리드하며, 인증/권한/테이블/브릿지 같은 핵심 공통 영역을 모듈화해 제품 간 재사용 구조를 만들었습니다. 이미지·폰트 최적화로 초기 로딩 체감 성능을 개선했고, 메타데이터·구조화 데이터·사이트맵 자동화로 검색 노출 기반을 구축했습니다. 또한 SSR/CSR 환경 분리를 통한 API 통신 안정성 확보, middleware 기반 다단계 인증 플로우 구현, visualViewport API를 활용한 모바일 키보드 대응, TypeScript 조건부 타입 기반 타입 안전한 브릿지 통신 등 WebView 앱 특성에 맞는 아키텍처를 설계해 안정성과 UX를 확보했습니다.

기존 담당자가 개발한 지도 기반 부동산 플랫폼 Prime을 인수해 유지보수와 기능 확장도 담당했습니다. 기존 코드의 구조와 데이터 흐름을 파악한 뒤 FSD·TypeScript로 마이그레이션하고, 지도 데이터 동기화 개선과 개발구역·교통망 편집 기능 개발을 진행했습니다.

주 업무내용
의료기기 투자 플랫폼 한조각
역할

프론트엔드 리드로서 기술 스택 선정, 공통 아키텍처/컨벤션 수립, 핵심 공통 모듈(인증·권한·테이블·브릿지) 설계, 코드 리뷰 기준 정립을 담당했습니다. 또한 3개 제품(홈·앱·어드민)의 개발 우선순위를 조율하고, 운영/런칭을 위한 성능·SEO·안정성 요구사항을 정리해 팀과 합의된 기준으로 구현했습니다.

주 업무내용
  • 프론트엔드 아키텍처 설계 및 기술 스택 선정 (Next.js 15, React 19, TypeScript, Tailwind CSS 4)
  • 홈페이지, WebView 앱, 관리자 대시보드 3개 프로젝트 전담 개발
  • GSAP ScrollTrigger 활용 시네마틱 스크롤 애니메이션 구현 (홈페이지)
  • Flutter WebView Bridge 통신 구조 설계 및 구현 (앱)
  • 권한 기반 멀티 대시보드 설계 및 TanStack Table 기반 데이터 테이블 구현 (관리자)
  • Sharp/AVIF 이미지 최적화, 폰트 서브셋 자동화로 초기 로딩 시간 70% 개선
  • Next.js Metadata API, JSON-LD, Sitemap.xml 활용 SEO 최적화
성과
  • 홈페이지 Lighthouse 성능 점수 72 → 95점, SEO 95/100 달성
  • 구글 "한조각" 브랜드명 검색 시 상위 노출 (Search Console 기준, 2026년 10월)
  • 관리자 대시보드 31개 모듈화된 API Hooks, 10개 이상 도메인 관리
  • 런칭 준비 완료 (투자 유치 진행 중)
지도 기반 부동산·개발사업 플랫폼 Prime
역할

기존 담당자가 개발한 React·JavaScript 프론트엔드를 인수해 유지보수, 구조 개선과 기능 확장을 담당했습니다. 지도 렌더링·Redux 상태·API 연동 흐름을 파악하고, 도메인과 기능별 책임을 정리하며 FSD·TypeScript 마이그레이션을 진행했습니다.

주 업무내용
  • 컴포넌트·유틸리티·전역 상태 중심의 기존 구조를 FSD 6개 계층으로 재구성하고, 도메인 모델·API·데이터 파싱과 화면 조합의 책임 분리
  • Naver Maps 기반 지도에서 줌 단계별 데이터 조회, 최신 요청 반영, 마커 재사용과 수정 정보 동기화 개선
  • 개발구역 등록·수정·삭제, Polygon·MultiPolygon 표시, 사업 이미지 오버레이 이동·회전·크기 조절 기능 개발
  • 도로·지하철 노선과 역 정보 편집, 수동 임시저장 및 서버 저장 실패 시 작업 복원 기능 구현
  • FSD 의존성·포맷·린트·타입 검사를 로컬 푸시 전 검증에 연결하고, 주요 API 파서와 업무 규칙의 회귀 테스트 구성
성과
  • 기존 JavaScript 애플리케이션을 TypeScript 기반 FSD 구조로 전환하고, 공개 진입점과 계층별 의존성 규칙을 검사하는 개발 기준 마련
  • 지도 중심·줌·경계 갱신을 하나의 액션으로 통합해 뷰포트 상태 동기화 dispatch를 이벤트당 3회에서 1회로 축소
  • 매물 수정 후 마커에 이전 정보가 남는 문제를 해결하고, 사용자 응답·API 설정·개발구역 규칙 등 22개 회귀 테스트 케이스 구성

(주)서로마인드

  • 2025.01 - 2025.05
  • DX팀 - 연구원
주 업무내용
Surromind MonorepoUI 컴포넌트 라이브러리 개발(2025.01.08 ~ 2025.04.03)
주 업무내용
  • 재사용 가능한 UI 컴포넌트 라이브러리 구축 및 유지보수 (26개 컴포넌트)
  • 메뉴, Breadcrumb, AutoComplete, Badge, Modal 등 핵심 컴포넌트 리팩토링 및 개선
  • 상태 관리 최적화, 디버깅 시간 단축
  • TypeScript interface 순환 참조 문제 해결 및 타입 안정성 강화
  • Jest + React Testing Library 기반 단위 테스트 작성
  • Storybook을 활용한 컴포넌트 문서화 및 시각적 테스트
성과
  • 총 119개 커밋, 7개 주요 이슈 해결
  • 컴포넌트 재사용성 향상, 개발 생산성 증가
AIOCRAI 기반 문서 OCR 처리 시스템 프론트엔드(프로젝트 참여 기간)
주 업무내용
  • Next.js 14 App Router 기반 문서 OCR 처리 시스템 프론트엔드 개발
  • Zustand 상태 관리 및 Alova HTTP 클라이언트로 API 통신 구조 설계
  • 문서 업로드, OCR 처리 관리, 계정 및 권한 관리, AI 키워드 관리 기능 구현
  • 한글 검색 정규화(NFD 방식), 디바운스 검색, 다중 조건 필터링 구현
  • 목록 상태 유지 기능 구현 (URL 쿼리 기반 페이지 관리 + sessionStorage 스크롤 복원)
  • @dnd-kit을 활용한 드래그앤드롭 우선순위 관리 인터페이스 구현
성과
  • 5개의 독립적인 Zustand 스토어로 관심사 분리 및 확장 가능한 아키텍처 구축
  • 커스텀 훅(useQueryString, useScrollMemory)을 통한 비즈니스 로직 재사용성 향상

(주)하이브랩

  • 2021.09 - 2023.11
  • UX/UI 인터렉티브팀 - 전임
주 업무내용
NHN페이코 모바일 이벤트 프로모션 매니징(2021.08.11 ~ 2021.12.31)
주 업무내용
  • 앱 할인 프로모션 이벤트 페이지 마크업 제작, 검수, 배포 및 매니징
  • Notion을 활용하여 월말 기준 70~100건 이상의 고객 요청 내용을 체계적으로 관리하고 우선순위를 정해 팀원들에게 분배함으로써 요청 사항을 효과적으로 처리
  • 제작된 마크업 페이지를 꼼꼼히 검수하고 수정 사항을 반영하여 페이지 품질 보장
  • 쿠폰 마크업 페이지 제작을 위한 자동화 툴 점검 및 보안으로 작업 효율성 향상
성과
  • 클라이언트 요청 사항 100% 정확히 완료, 신뢰 구축
  • 이벤트 페이지 품질 보장 및 안정적 배포로 사용자에게 긍정적인 경험 제공
  • 자동화 툴 개선으로 작업 속도를 30% 단축, 요청 처리 효율 증가
NHN페이코 PC, 모바일 상시 운영(2022.01.01 ~ 2023.06.30)
주 업무내용
  • 클라이언트 기획 및 디자인 요구 사항에 따라 PC 및 모바일 마크업 페이지 제작 및 수정
성과
  • 정해진 일정보다 신속한 제작으로 클라이언트 요구 조기 충족
  • 추가적인 운영 업무 수주로 회사 수익성 향상
NAVER실시간 협업 프레임워크 yorkie 프로젝트(2022.08.17 ~ 2022.12.23)
주 업무내용
  • 웹 관리자 및 서비스 페이지 마크업 제작
  • 컴포넌트 단위 퍼블리싱으로 개발팀에 전달 및 협업
  • 웹 표준 및 시멘틱 마크업 준수
성과
  • 웹 표준 및 시멘틱 마크업 준수로 높은 품질의 웹 페이지 제공
  • Git을 활용한 협업 중 발생한 Git 충돌 문제 해결 및 커밋 히스토리 정리로 코드 관리 효율성 향상
OLIVE YOUNG올리브영 PC, 모바일 이벤트 마크업 페이지 제작(2023.07.01 ~ 2023.11.30)
주 업무내용
  • 클라이언트와의 월 단위 회의를 통해 업무 배정, 일정 산정, 기획, 디자인 후 이벤트 페이지 마크업 제작
  • 마크업 페이지 검수 및 배포
성과
  • 모든 작업을 기한 내 완료하여 이벤트 일정에 맞춘 정확한 배포 실현
  • 철저한 검수와 품질 보증으로 오류 없는 안정적 운영 및 긍정적 클라이언트 피드백 획득
앞으로 이곳을 함께 채워나가고 싶어요.