추천프로젝트iOS
TappyType
2026.05 ~ 현재애플펜슬로 쓴 손글씨를 한글 폰트로 만들어 주는 iOS 앱입니다.
Swift·SwiftUI·PencilKit으로 앱을 만들어 출시까지 단독으로 진행했습니다. 모델을 바꿔도 앱을 고치지 않도록 앱과 서버를 REST 계약으로 분리했고, 출시 후에도 멀티프로젝트(1.1)·공책 입력·펜 프리셋(1.5) 등 업데이트를 단독으로 이어가고 있습니다.
석지인 — 개발자 포트폴리오
프론트엔드 · 풀스택 프로덕트 엔지니어
사용자 중심의 경험과 사고로, 가장 큰 임팩트를 만드는 데 집중합니다.
- SINCE
- 2021
- NOW
- 도스트11 · 재직 중
- SHIPPED
- TappyType · formkit-react
- STACK
- React · Next.js · TS
커리어 타임라인
커리어 타임라인
경력재직 중
MBC AI 전략자회사 · 디지털 에셋 마켓 도프켓 운영 · AI개발팀 · 풀스택 개발자 (Rails + React)
- 한국 시장 로컬라이제이션 — 전 페이지 한국어 전환과 브랜딩 교체, 상품 대시보드·CMS 블로그·결제 UX·멤버십 등 신규 화면 개발
- 한국형 월간 정산 — 정책(매월 마감·스냅샷·멱등성·민감정보 경계) 설계를 주도해 정산 마일스톤 30건을 티켓화하고, 정산 페이지·설정 UI·최소 정산금 화면을 직접 구현 (설계 본인 · 구현 팀 협업)
- 개발 속도·검증 재구성 — 타입체크 비동기화와 dev SSR 빌드 분리로 콜드 빌드를 53% 단축(18.0초→8.3초)하고, pre-commit·pre-push·CI Playwright SSR 스모크의 단계별 검증을 추가
- B2B·운영 — 첫 B2B 고객사 온보딩 리드, CRM 유저 테이블, Grafana 일일 운영지표 대시보드(내부 사용자 제외) 구축·관리, 에셋 캐시 권한 오류로 인한 SSR 500 장애 진단·수정
- 이벤트 협업 제안 — 회의에서 당일 직접 제안해 3일 만에 포토부스 프로토타입을 완성, 프레임 매칭·워터마크 합성까지 정식 부가기능으로 채택
- 방송용 CG 합성 도구 UI/UX 재설계 — ML 연구원들과 한 저장소에서 협업해 워크플로우를 3단계 탭(마스크→에셋→합성)으로 재구성하고 썸네일 타임라인 헤더를 신설, 표시 라벨과 내부 키를 분리해 백엔드 50여 개 파일의 에러 메시지까지 용어를 통일하고 5GB 영상 업로드 차단 버그를 해결
- 기업 랜딩 most267.co.kr Notion 연동 재구축 — 정적 HTML을 Next.js로 전면 재구축하고 Notion CMS·DB로 비개발자가 콘텐츠를 직접 관리하게 했으며, 시맨틱 HTML·next/image로 CLS를 방지해 개편 전 대비 LCP 46% 단축·접근성 83→96 확인 (단독 수행)
프로젝트
포트폴리오 사이트
2025.05 ~ 현재지금 보고 계신 이 사이트입니다.
경력·프로젝트·교육을 생성형 AI 연표와 나란히 보여주는 타임라인형 디자인이고, 마우스를 따라다니는 포차코 커서 컴패니언이 숨어 있습니다. Next.js App Router와 TypeScript로 만들었고, 공통 컴포넌트와 자동화(ESLint·Prettier·Husky)로 코드 스타일을 통일했습니다. 이력서(HTML·PDF)도 이 저장소에서 함께 관리합니다. 날짜·수치 같은 사실을 단일 팩트 저장소에 두고 명령 한 번으로 두 문서를 재생성하며, 사이트와 이력서가 어긋나면 테스트가 실패합니다.
오픈소스AI 워크플로
Claude Code 설정 (dotfiles)
2026.06실제 개발에 쓰는 Claude Code 설정에서 민감정보를 제외한 공개판입니다.
React 30개·Python 13개 스타일 규칙을 스킬로 정리하고, .tsx·.py 수정 전에 해당 규칙을 먼저 읽도록 CLAUDE.md로 강제했습니다. 규칙은 formkit-react, albaform 등 실제 프로젝트에서 굳어진 패턴을 옮긴 것이라 코드와 가이드가 서로를 검증합니다. 설정 디렉터리 자체를 git 저장소로 두고 launchd가 1시간마다 pull 후 변경분을 자동 커밋·push해, 어느 기기에서든 같은 규칙으로 작업합니다.
# skills/seokjiin-react-style/rules — 30개 중 발췌
## component-variant-dict
변형 스타일은 딕셔너리로 관리한다 — 삼항 중첩 금지
const variantStyles = {
primary: 'bg-brand-500 text-white hover:bg-brand-600',
outline: 'border-2 border-brand-500 text-brand-500',
}
## format-comments
주석은 "what"이 아니라 "why"
// Notion 임시 URL이 1시간 후 만료되어
// 빌드 시점에 다운로드가 필요
const imageUrl = await downloadNotionImage(block.image.url)추천업무UI/UX
방송용 CG 합성 도구 — Gradio UI/UX 재설계
2026.05ML 연구원들과 한 저장소를 쓰며 방송용 CG 합성 도구의 프론트엔드를 재설계했습니다.
도구는 Gradio지만 일의 본질은 같았습니다. 사용자의 작업 흐름을 화면 구조로 번역하는 것. 도구 이름 기준 영문 탭을 실제 작업 순서인 1.마스크 → 2.에셋 → 3.합성으로 재구성하고, '원본+마스크+에셋=합성 결과' 썸네일 타임라인을 신설해 산출물이 다음 단계 어디에 쓰이는지 화면이 안내합니다. UI 용어 한국어화와 방송용 5GB 업로드 대응까지 함께 했습니다.
2026.053사 플래그십 동시 교체
발표
SEO 라이트닝 토크
2026.01검색 엔진을 '정보 이용자에게 정보 요구 충족이라는 가치를 주는 제품'으로 정의하고, 40여 개 SEO 기법을 웹 표준·속도·신뢰성으로 묶어 정리한 라이트닝 토크입니다. 크롤링 예산과 서버 비용, 접근성 같은 검색엔진 개발자의 고민에서 거꾸로 출발하면 각 순위 기준의 이유가 보이고, 같은 원리가 LLM 시대의 GEO(Bing 인덱싱, 인용하기 쉬운 구조)로 이어진다는 내용입니다.
발표
서비스직으로서의 개발자 라이트닝 토크
2025.11도스트11 데브 미팅에서 '알잘딱깔센 개발을 위한 CX 101'을 주제로 발표한 라이트닝 토크입니다. 서버 응답도 서비스직의 응대라는 관점으로, 고객이 부정적으로 반응하는 응답 3가지(손해 입히기, 맥락 무시, 아마추어의 응대)와 도서관 사서의 참고 봉사(무엇을 찾는지 함께 정의하고 단계별로 안내)를 대비했습니다. 좋은 에러 메시지는 그 자체로 DX이자 마케팅이라는 것이 핵심입니다.
2025.11Gemini 3·Claude Opus 4.5 출시
2025.08GPT-5·나노 바나나 출시
2025.05Claude 4·Claude Code 정식 출시
경력
AI 검색 최적화 SaaS · 인턴/수습 · 프론트엔드
- D3.js, rechart로 버블/트리맵 차트를 포함한 대시보드 MVP 개발, Claude Code로 대시보드 3페이지를 7일 내 완성해 영업 데모에 기여
- Next.js + TailwindCSS로 SEO(SSR) 랜딩페이지 템플릿 개발
- Nexca 콘솔 리팩토링: API route 15개를 단일 프록시로 대체, React Hook Form 일괄 적용, 에러 핸들러 공통화, middleware·NextAuth로 로그인 상태별 접근 제한 통일
업무
Nexca 콘솔 — 프론트엔드 리팩토링
2025.04 ~ 2025.05체인시프트에서 SaaS 사용량 관리 콘솔의 프론트엔드 구조를 정리했습니다.
백엔드에 전달만 하는 Next.js API route 15개를 catch-all 프록시 1개로 대체하고, react-hook-form 기반 공통 Form 컴포넌트(compound 패턴)와 HTTP status 기준 에러 핸들러 1종으로 화면마다 다르던 폼·에러 처리를 통일했습니다. 코드는 비공개이며 요청 주시면 공유드립니다.
// Before — 엔드포인트마다 전달만 하는 route 파일 15개
// app/api/apps/route.ts, app/api/accounts/route.ts, ...
// After — catch-all 프록시 1개로 대체
// app/api/proxy/[...path]/route.ts
export async function GET(
request: NextRequest,
{ params }: { params: { path: string[] } },
) {
const url = new URL(params.path.join('/'), process.env.NEXCA_API_URL)
request.nextUrl.searchParams.forEach((v, k) => url.searchParams.append(k, v))
const response = await fetch(url, {
headers: forwardAuthHeader(request), // 인증 헤더만 선별 전달
})
return NextResponse.json(await response.json(), { status: response.status })
}대외활동
이지스퍼블리싱 'Do It! Oracle로 배우는 데이터베이스 입문' 개정판 베타테스터
2025.022025.02Claude Code 공개
에이전틱 코딩
프로젝트팀
오픈마인드
2024.06코드잇 팀 프로젝트로 만든 익명 질문·답변 서비스입니다.
무한 스크롤을 IntersectionObserver와 isHydrated 가드로 구현해, 렌더링 시점 의존으로 생기던 중복·누락 API 요청을 없앴습니다. 스크롤 끝에서 observer를 즉시 해제하고, 0개 피드·뒤로가기·URL 변경 같은 엣지 케이스에서도 오류 없이 데이터를 불러옵니다. JavaScript·React·CSS Module·Axios·Storybook으로 만들었습니다.
2024.06Claude 3.5 출시
AI 코딩 실용화
교육
코드잇 스프린트 프론트엔드 트랙 7기
2024.04 ~ 2024.10교육
코멘토 'QA 테스트 자동화 퀀텀 점프하기: Selenium with Python' 수료
2023.10경력
축구 데이터 올인원 '오코치' · FIFA Preferred Provider(FPP) · 소프트웨어개발팀 · SQA
- 방치된 기술문서를 위키 형태로 정리해 개발자 온보딩에 기여
- 5개 프로덕트별 맞춤형 Jira 프로젝트 제작/관리
- 전사 QA TF로 테스트 벤치 마련, iPad 앱 패킷 수신 테스트
자격
ISTQB CTFL · 소프트웨어테스트전문가(CSTS) FL 취득
2023.08 ~ 092023.03GPT-4 출시
Cursor 등장
2022.11ChatGPT 출시
LLM 대중화
경력
중대형 제품 배송·설치 매칭 물류 SaaS(OMS/WMS) · 플랫폼기획팀 · SQA 매니저 · CX 매니저
- 이슈/버그 트래커 도입으로 개발 진행상태 시각화
- 입력 컴포넌트 디자인 시스템 마련, 서비스 용어 통일 (유비쿼터스 언어)
- B2B 고객사(CJ대한통운 등 3사) 온보딩 지원·개발 협의(지도 커스텀용 외부 API 교체·DB 연동), mySQL 물류 데이터 QA·Google Analytics 사용량 분석, End-User 베타 테스트·현장 인터뷰로 이슈 발굴
2022.06GitHub Copilot 정식 출시
교육
그로우앤베터 CX 101 수료
2022.04 ~ 05자격
2급 정사서 취득 (한국도서관협회)
2021.09경력
대한민국 대표 통신사 · 출판국 DB센터 · 인물자료 담당
- 사내 웹앱 이용법 안내 및 버그 리포트로 UX 개선
- 카카오톡·문자·팩스 등 친숙한 채널을 늘려 응답 양식을 1페이지로 줄여(50% 단축), 본인 동의 프로필 제공률 30% 향상
자격
KBS한국어능력시험 1급 취득
2021.03교육
연세대학교 · 신학(주전공)·문헌정보학(복수전공) 학사
2015 ~ 2021전공기초 '정보기술론'에서 Python 크롤링으로 코딩 입문 · SW프로그래밍·메타데이터 등 정보기술 교과 이수
기술 스택
JavaScript (ES6+)
ES6+ 문법을 기본으로 프론트엔드 개발에 사용했습니다. CommonJS와 ESM 방식의 설정 파일을 모두 다룰 수 있습니다.
React.js
도스트11에서 react-on-rails로 카테고리 에디터, 배너 캐러셀, 블로그 CMS, 정산 UI를 개발했습니다. 하이드레이션과 커스텀 훅을 다룹니다.
Next.js
Next API 프록시와 NextAuth 세션으로 민감 정보 노출을 막았습니다. 비개발자가 Notion으로 관리하는 랜딩 페이지를 만들었습니다.
HTML5 / CSS3
시맨틱 마크업으로 LCP를 줄이고, 스크립트 로드 시점을 조절하거나 무한 스크롤의 기준 요소를 잡는 데 사용했습니다.
자주 묻는 질문
지금은 어떤 일을 하고 계신가요?
MBC AI 전략자회사 도스트11에서 디지털 에셋 마켓 도프켓의 풀스택 개발을 맡고 있습니다. 한국 시장 로컬라이제이션, 상품 대시보드, 블로그 CMS, 결제 UX를 담당했고 첫 B2B 고객사 온보딩도 진행했습니다. 회의에서 당일 제안한 포토부스 기능을 3일 만에 프로토타입으로 만들었고, ML 연구원들과 한 저장소에서 방송용 CG 합성 도구의 UI/UX를 재설계했습니다.
협업할 때 뭘 가장 중요하게 생각하시나요?
가장 중요하게 보는 건 팀이 같은 것을 같은 이름으로 부르는 일입니다. 용어가 어긋나는 데서 오해와 버그가 시작된다고 봐서, 어디서 일하든 말부터 맞췄습니다. 도스트11에서는 화면 라벨부터 백엔드 50여 개 파일의 에러 메시지까지 한 기준으로 통일하자고 제안하고 직접 정리했습니다. 사서가 이용자와 '무엇을 찾는지'부터 맞추듯, 협업도 거기서 출발한다고 생각합니다. 기계가 잡을 품질은 PR 기반 작업과 ESLint·Prettier·Git Hook으로 자동화해 두고, 사람은 합의가 필요한 일에 집중합니다. 그래서 제안에서 그치지 않고 끝까지 정리하며, 넘길 일도 고치지 않기로 한 일도 무엇을 왜 그랬는지 다음 사람이 바로 알 수 있게 문서로 남깁니다. 안 한 일까지 드러내는 게 협업에선 신뢰가 된다고 봅니다.
AI는 어떻게 활용하시나요?
적극적으로, 특히 사고를 전개하거나 검증하는 데에 씁니다. 제 개인/업무 상의 코드 스타일과 작업 규칙을 Claude Code에 주입하는 설정을 두고 여러 기기에서 일관성 있는 결과물을 내고 있습니다. Claude Code가 출시되었을 때 체인시프트에서, 제게 낯선 D3.js를 다루어야 했으나 AI로 속도를 높여 대시보드를 완성하고 영업 데모에 기여했습니다. 반대로 한 채용 전형에서는 AI가 만든 코드를 직접 작성한 코드로 바꿔 에러 처리를 통일하고 그 과정을 분석 문서로 남겨 합격하기도 했습니다. 최근에는 few-shot 폰트 생성 파이프라인과 ML 모노레포처럼 제품 안의 AI를 경험하고 있습니다.
SQA·CX 경험이 프론트엔드에 어떻게 도움이 되나요?
최고의 UX는 버그가 없는 것이고, 최고의 UI는 일관된 것입니다. QA·CX 시절에서 그대로 가져온 원칙입니다. 두 회사에서 SQA·CX를 하며 사용자가 어디서 헷갈리고 이탈하는지 직접 지켜봤고, 그때 본 것들이 지금 코드를 짜는 방식에 남아 있습니다. 에러를 예측 가능한 것(400·422)과 불가능한 것(5xx·네트워크)으로 나눠 정책으로 처리하고, 가상화 같은 성능 전략도 50개 임계처럼 수치 근거를 두고 적용합니다. 이슈 트래커 세팅, 디자인 시스템 마련도 그때 들인 습관입니다.
왜 개발자로 전향하셨나요?
문헌정보학을 전공하고 연합뉴스에서 인물 DB를, 물류 스타트업과 핏투게더에서 QA·CX를 맡았습니다. 응답 양식을 한 페이지로 줄여 본인 동의 프로필 제공률을 30% 올리고, 용어 사전으로 소통 비용을 줄였습니다. 그러면서 제가 좋아하는 일이 정보를 다듬어 사람이 쓰기 쉽게 만드는 거라는 걸 알게 됐습니다. 다만 QA·CX는 개선을 제안하고 넘기는 자리였고, 할수록 직접 만들고 고치고 싶어졌습니다. 코딩은 2020년부터 해 오던 터라 자연스럽게 개발로 방향을 잡았습니다.
비전공 출신인데 기초는 어떻게 다지셨나요?
문헌정보학은 정보를 분류하고 구조화하는 학문이라, 데이터 모델링 감각은 오히려 전공에서 왔습니다. 코딩 기초도 정보기술론(Python)·SW프로그래밍에서 시작했고, 디지털도서관구축론 수업에선 RFP 작성과 기술 선정까지 소프트웨어 프로젝트를 직접 기획했습니다. 부족한 건 만들면서 채웁니다. TrueType 폰트 writer를 순수 Swift로 직접 구현했고, 공통 컴포넌트를 npm 라이브러리(formkit-react)로 배포했습니다. 품질 이론은 ISTQB·CSTS 자격으로 검증받았습니다.