석지인
프론트엔드 개발자 — 웹 · 앱 · 어드민 / 디자인시스템 · 레거시 현대화
믿을 수 있고 이해할 수 있는 프론트엔드를 지향하는 경험 중심 개발자입니다. React·Next.js·TypeScript·TanStack Query로 웹과 어드민을 만들고, 직접 만든 폼 라이브러리를 npm에 배포했으며, 네이티브 iOS 앱을 0→1로 출시 준비 단계까지 만들어 왔습니다.
소개ABOUT
React·Next.js·TypeScript·TanStack Query를 여러 프로젝트에서 다루며 웹과 어드민을 만들어 왔습니다. 공통 모듈과 디자인 토큰, 타입과 디자인의 일관성을 직접 라이브러리로 만들어 npm에 배포했고(formkit-react), 130만 사용자·결제를 가진 JSP 레거시와 공존하는 React 화면을 점진적으로 통합했습니다(bodycodi). QA에서 시작해 품질과 테스트, 디자인의 일관성을 코드로 보증하는 일에 익숙하며, 생성형 AI는 그대로 받아들이기보다 직접 검증하고 고쳐 쓰는 방식으로 활용하고 있습니다. 의도한 대로 가치를 전하기 위해 에러 처리와 일관성 있는 인터페이스, 요구사항의 분석, 효율적인 개발 환경 구축에 집중하고 있습니다.
※ 아직 React Native로 앱을 출시·운영해 본 경험은 없습니다. 네이티브 iOS 앱을 0→1로 만들어 온 감각과 앱·서버의 경계를 설계해 본 경험을 바탕으로, React Native를 다음 목표로 익혀 가고자 합니다.
핵심 역량STRENGTHS
React · Next.js · TypeScript · TanStack Query
여러 프로젝트에서 모던 스택을 다뤘습니다. SSR과 CSR의 경계를 나누고, 낙관적 업데이트와 사용자 상태별 권한·렌더링 분기를 직접 구현했습니다.
albaform · 체인시프트 인턴 · 포트폴리오 · 도스트11
JSP 레거시의 점진적·무중단 마이그레이션
2016년부터 운영된 JSP 시스템(130만 사용자·결제를 보유한 서비스)과 공존하는 React 화면을 점진적으로 통합했습니다. 스타일 클래스가 충돌하는 문제를 tw- prefix 전략과 컨벤션 문서로 정리했습니다.
bodycodi-frontend
공통 모듈·디자인 토큰·일관성 설계
Compound Component·Zod·접근성(ARIA)·TypeScript 타입을 한 패키지로 정리해 npm에 배포했습니다. 일관성을 라이브러리 수준으로 다뤘습니다.
formkit-react (npm @jiin.seok/formkit-react) · albaform · 물류대장
앱·서버 경계 설계 — 모바일·하이브리드 감각
모델을 바꿔도 앱 코드를 고치지 않도록 앱과 서버를 REST 계약과 프로토콜로 분리했습니다. (네이티브 iOS 앱 기준이며, RN 브릿지/WebView 직접 구현 경험은 아닙니다.)
tappytype (네이티브 iOS)
운영 안정성·에러 일관성·성능 최적화
에러 처리를 한곳에 모으고 HTTP 상태코드 기준 기본 메시지를 두었습니다. 대량 리스트 조건부 가상화, 만료되는 외부 자원 장애를 배포 전략 전환으로 대처, 빌드 시간 단축을 했습니다.
bodycodi · albaform · 도스트11
품질을 코드로 보증하는 프론트엔드 — QA 출신 + 테스트
계약 가드 테스트, QA TF·디자인 시스템 구축 경험이 있습니다. ISTQB·CSTS 자격으로 품질을 코드와 절차로 보증합니다.
tappytype · 물류대장 · 핏투게더 · 자격증
생성형 AI를 검증해서 쓰는 태도
AI가 만든 코드를 직접 작성한 코드로 바꿔 에러 처리를 통일했습니다. few-shot 폰트 자동 생성 파이프라인과 ML 포함 모노레포를 다뤘고, 개인 코드 스타일·작업 규칙을 Claude Code에 규칙으로 주입하는 설정을 공개했습니다.
bodycodi · tappytype · 도스트11 · dotfiles-claude-public
이해관계자 협업 — 직군 간 소통 비용 절감
개발팀-CG팀 용어표, 전 직군 용어 사전, 사내 유저 인터뷰로 합의를 만들었습니다. 팀 협업에서 최다 수준으로 기여했습니다.
도스트11 · 물류대장 · albaform
개인 프로젝트 · 오픈소스PROJECTS
직접 만든 프로젝트들입니다. GitHub github.com/JiinSeok. (코드·문서·npm 레지스트리로 확인하실 수 있습니다.)
formkit-react npm 배포
React Hook Form · Zod · Radix UI · Tailwind · TypeScript · Vite · GitHub Actions CI · MIT
- 공통 모듈·디자인 토큰·일관성을 라이브러리로 정리해 배포 — Compound Component 패턴으로 조합 가능한 API를 만들고, 타입 안전성(Zod)·접근성(ARIA)·스타일(Tailwind)을 한 패키지로 정리했습니다.
- 릴리스 과정 직접 운영 — Vite로 ESM/CJS/타입선언을 출력하고, GitHub Actions로 검증한 뒤 npm에 배포했습니다.
bodycodi-frontend JSP 레거시 마이그레이션
React 18 · TypeScript · Vite · TanStack Query · Tailwind(tw- prefix) · react-window
- JSP 레거시의 점진적·무중단 통합 — 2016년부터의 JSP 레거시(130만 사용자·결제 보유 서비스) 위에서 React 화면을 점진적으로 통합했습니다. 충돌을 스스로 정의(JSP 전역 CSS 클래스와 Tailwind 클래스 충돌)하고 tw- prefix 전략과 컨벤션 문서로 해결했습니다.
- 운영 안정성·에러 일관성 — Pass-Through 방식의 통신과 TanStack Query로 에러 처리를 한곳에 모았습니다. UI/Service를 분리하고 레이어로 구조를 정리했습니다.
- 성능·AI 검증 활용 — 대량 리스트 조건부 가상화(50/1000개 임계). AI가 만든 코드를 직접 작성한 코드로 바꿔 에러 처리를 통일했습니다.
※ 130만 사용자·결제는 대상 서비스(바디코디)의 규모이며, 제가 직접 운영한 트래픽 지표는 아닙니다.
albaform — 알바 구인구직 플랫폼 팀 협업
albaform.usejiin.link · github.com/JiinSeok/albaform · 팀 내 최다 수준 기여
Next.js · TanStack Query · Zustand · TypeScript · AWS Amplify
- 렌더링·권한 경계 설계 — 사용자 상태 6종(로그인 여부/사장님·지원자/작성·지원)에 따라 UI와 권한을 분기하고, 비인가 접근을 렌더링 시점에서 차단했습니다.
- 검색 노출과 인터랙션 분리 — 검색 노출을 위한 SSR과 인터랙션을 위한 CSR을 나누고, 전역 설정을 분리해 SSR을 유지했습니다. 공통 컴포넌트로 화면을 통일하고 낙관적 업데이트를 적용했습니다.
tappytype — 네이티브 iOS 앱 개발 중 · 출시 준비
브랜드 tappytype(개발 리포지토리명 typetap) · github.com/JiinSeok/typetap · 단독 · 인스타그램 사전 마케팅 진행 중
클라이언트: Swift · SwiftUI · PencilKit / 서버: FastAPI · 생성형 AI
- 앱·서버 경계 설계 — 생성 모델을 바꿔도 앱 코드를 고치지 않도록 앱과 서버를 REST 계약으로 분리하고 프로토콜로 경계를 두었습니다.
- 네이티브 레이어 + 생성형 AI — 순수 Swift로 TrueType 폰트 writer를 직접 구현했고, few-shot 손글씨 폰트 생성 파이프라인을 구성했습니다.
- 제품을 끝까지 — 브랜딩·마케팅까지 — 직접 브랜딩하고 인스타그램으로 사전 마케팅을 진행하며, 기획·개발·디자인·마케팅을 혼자 끌고 가고 있습니다.
포트폴리오 사이트 단독
Next.js App Router · React · TypeScript · Tailwind · ESLint/Prettier · Husky · pnpm
- 검증된 도구로 코드 스타일을 통일하고, 공통 컴포넌트와 자동화로 유지보수하기 쉽게 정리했습니다.
경력EXPERIENCE · 총 4년
프론트엔드 개발은 도스트11·체인시프트에서 했고, QA(물류대장·핏투게더)와 자료 관리(연합뉴스) 경험은 품질과 일관성, 사용자 관점이라는 지금의 강점으로 이어졌습니다.
(주)도스트11 — 개발자 / AI 개발팀2025.09 ~ 재직 중 · 10개월
디지털 에셋 이커머스를 풀스택으로 개발하며 프론트엔드 개발 환경·성능·장애 대응을 맡았습니다.
- 디지털 에셋 이커머스 (Ruby on Rails, React, TailwindCSS, Docker, MySQL) — 포토부스 기능 프로토타입과 제안용 랜딩을 0→1로 만든 뒤 범용 기능으로 정리했습니다. 블로그·어드민(AWS S3, slug, Tiptap), Grafana 운영 지표·대시보드, 셀러 페이지 커스터마이징 데모.
- 개발 속도·테스트 개선 — 타입체크 비동기화와 SSR 빌드 설정으로 코드 변경부터 결과 확인까지의 시간을 줄였고, PR Checks에 SSR 스모크 테스트를 더했습니다.
- 기업 랜딩 (Next.js, GitHub Actions) — 비개발자가 Notion으로 관리하도록 다시 설계하고 CI/CD를 만들었습니다. 한 시간마다 만료되는 Notion 파일 URL 문제를, 배포 시점에 자료를 내려받아 WebP/WebM으로 변환하고 배포 방식을 바꿔 해결했습니다.
- 방송용 CG 디자인 AX — 사내 유저 인터뷰, 사용자 노출 메시지 번역·통일, 개발팀-CG팀 용어표를 만들었습니다. ML 포함 모노레포(Python Gradio → React 마이그레이션).
(주)체인시프트 — 프론트엔드 개발 인턴2025.04 ~ 2025.06 · 3개월
B2B 서비스 데모용 MVP 프론트엔드를 짧은 주기로 개발했습니다.
- 스택: Next.js 15 App Router · TypeScript · Tailwind CSS · TanStack React Query · Zustand · React Hook Form
주식회사물류대장 — QA 매니저 / 플랫폼기획팀2022.06 ~ 2023.08 · 1년 3개월
물류 SaaS(OMS/WMS) ‘물류대장’ QA
- 입력 컴포넌트 통합 디자인 시스템 구축 — 상태별 디자인 시스템과 UI 통일로 입력 오류와 문의를 줄였습니다.
- 유비쿼터스 사전 제작 — 전 직군 용어를 통일해 전사 커뮤니케이션 비용을 줄이고 온보딩을 개선했습니다.
주식회사핏투게더 — QA 엔지니어 / 소프트웨어개발팀2023.08 ~ 2024.02 · 7개월
축구 데이터 올인원 ‘오코치’ SW QA (Web, Windows/macOS, iPad)
- QA TF로 스펙과 지원 사양을 합의하고 테스트 벤치를 마련해 품질을 높이고 디버깅 리소스를 줄였습니다.
(주)연합뉴스 — 인물자료 담당사원 / 출판국 DB센터2021.08 ~ 2022.03 · 8개월
인물 자료 관리
- 동의 절차 간편화 — 요청 채널을 늘리고 레이아웃을 개선해 응답 양식을 50% 줄였고, 당사자 동의 인물 DB 응답률을 30% 높였습니다.
스킬 · 학력SKILLS · EDU
프론트엔드
ReactNext.js (App Router)TypeScriptTanStack Query
ZustandReact Hook FormZodTailwind CSS
Radix UICompound Component접근성(ARIA)HTML/CSS
도구 · 인프라
GitViteDockerCI/CD(GitHub Actions)
npm 패키지 배포ESLint/PrettierFigmaCLI
도메인 · 기타
이커머스/결제 맥락생성형 AI 활용 개발네이티브 iOS(Swift/SwiftUI)
디자인 시스템·용어 통일QA 기반 품질·테스트
학력 · 연세대학교 학사, 문헌정보학 (2015~2021)
자격증 · ISTQB Certified Tester Foundation · 소프트웨어테스트전문가(CSTS) Foundation
외국어 · 영어 일상 회화 가능 | 기타 · 코드잇 스프린트 프론트엔드 트랙 7기