추천프로젝트iOS
TappyType
2026.05 ~ 현재애플펜슬로 쓴 손글씨를 한글 폰트로 만들어 주는 iOS 앱입니다.
Swift·SwiftUI·PencilKit으로 직접 만들었고, 모델을 바꿔도 앱을 고치지 않도록 앱과 서버를 REST 계약으로 분리했습니다. 지금은 출시 준비 단계이며, 직접 브랜딩해 인스타그램으로 사전 마케팅을 하고 있습니다.
석지인 — 개발자 포트폴리오
안녕하세요. 믿을 수 있고 이해할 수 있는 경험을 위한 개발자 석지인입니다.
커리어 타임라인
커리어 타임라인
경력재직 중
MBC AI 전략자회사 · 디지털 에셋 마켓 도프켓 운영 · AI개발팀 · 풀스택 개발자 (Rails + React)
- 한국 시장 로컬라이제이션 — 전 페이지 한국어 전환과 브랜딩 교체, 상품 대시보드·CMS 블로그·결제 UX 등 신규 화면 개발
- B2B·운영 — 첫 B2B 고객사 온보딩, CRM 유저 테이블, Grafana 운영 지표 관리
- 이벤트 협업 제안 — 회의에서 당일 직접 제안해 3일 만에 포토부스 프로토타입을 완성, 정식 부가기능으로 채택
프로젝트
포트폴리오 사이트
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 개발
- Next.js + TailwindCSS로 랜딩페이지 템플릿 개발, Claude Code로 7일 내 3페이지 완성
- Nexca 콘솔 리팩토링: API route 15개를 단일 프록시로 대체, React Hook Form 일괄 적용, 에러 핸들러 공통화
업무
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 })
}2025.02Claude Code 공개
에이전틱 코딩
2024.06Claude 3.5 출시
AI 코딩 실용화
교육
코드잇 스프린트 프론트엔드 트랙 7기
2024.04 ~ 2024.10교육
코멘토 'QA 테스트 자동화 퀀텀 점프하기: Selenium with Python' 수료
2023경력
축구 데이터 올인원 '오코치' · 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대한통운 등) 온보딩 지원, 현장 인터뷰로 이슈 발굴
2022.06GitHub Copilot 정식 출시
교육
그로우앤베터 CX 101 수료
2022.04 ~ 05경력
대한민국 대표 통신사 · 출판국 DB센터 · 인물자료 담당
- 사내 웹앱 이용법 안내 및 버그 리포트로 UX 개선
- 응답 양식을 1페이지로 줄여(50% 단축) 당사자 동의 인물 DB 응답률 30% 향상
자격
KBS한국어능력시험 1급 취득
2021시작
코딩 학습
2020.09교육
연세대학교 · 문헌정보학 학사
2015 ~ 2021기술 스택
JavaScript (ES6+)
ES6+ 문법을 기본으로 프론트엔드 개발에 사용했습니다. CommonJS와 ESM 방식의 설정 파일을 모두 다룰 수 있습니다.
React.js
도스트11에서 react-on-rails로 카테고리 에디터, 배너 캐러셀, 블로그 CMS, 정산 UI를 개발했습니다. 하이드레이션과 커스텀 훅을 다룹니다.
Next.js
Next API 프록시와 NextAuth 세션으로 민감 정보 노출을 막았습니다. 비개발자가 Notion으로 관리하는 랜딩 페이지를 만들었습니다.
HTML5 / CSS3
시맨틱 마크업으로 LCP를 줄이고, 스크립트 로드 시점을 조절하거나 무한 스크롤의 기준 요소를 잡는 데 사용했습니다.
자주 묻는 질문
왜 개발자로 전향하셨나요?
문헌정보학을 전공하고 연합뉴스에서 인물 DB를, 물류 스타트업과 핏투게더에서 QA·CX를 맡았습니다. 응답 양식을 한 페이지로 줄여 응답률을 30% 올리고 용어 사전으로 소통 비용을 줄이면서, 제가 좋아하는 게 정보를 다듬어 사람이 쓰기 쉽게 만드는 일이라는 걸 알았습니다. 다만 QA·CX는 개선을 제안하고 전달하는 자리였고, 그 일을 할수록 직접 만들고 고치는 쪽을 배우고 싶어졌습니다. 코딩은 2020년부터 해 오던 터라 자연스럽게 개발로 방향을 잡았습니다.
비전공 출신인데 기초는 어떻게 다지셨나요?
문헌정보학은 정보를 분류하고 구조화하는 학문이라, 데이터 모델링과 용어 통일 감각은 오히려 전공에서 왔습니다. 부족한 부분은 직접 구현하며 채웁니다. TrueType 폰트 writer를 순수 Swift로 직접 구현했고, 공통 컴포넌트를 npm 라이브러리(formkit-react)로 배포했습니다. 품질 이론은 ISTQB·CSTS 자격으로 검증받았습니다.
SQA·CX 경험이 프론트엔드에 어떻게 도움이 되나요?
두 회사에서 SQA·CX를 하며 사용자가 어디서 헷갈리고 이탈하는지 직접 지켜봤습니다. 그 경험이 코드에 그대로 남아 있습니다. 에러를 예측 가능한 것(400·422)과 불가능한 것(5xx·네트워크)으로 나눠 정책으로 처리하고, 가상화 같은 성능 전략도 50개 임계처럼 수치 근거를 두고 적용합니다. 이슈 트래커 세팅, 용어 통일, 디자인 시스템 마련도 그때 들인 습관입니다.
지금은 어떤 일을 하고 계신가요?
MBC AI 전략자회사 도스트11에서 디지털 에셋 마켓 도프켓의 풀스택 개발을 맡고 있습니다. 한국 시장 로컬라이제이션, 상품 대시보드, 블로그 CMS, 결제 UX를 담당했고 첫 B2B 고객사 온보딩도 진행했습니다. 회의에서 당일 제안한 포토부스 기능을 3일 만에 프로토타입으로 만들었고, ML 연구원들과 한 저장소에서 방송용 CG 합성 도구의 UI/UX를 재설계했습니다.
AI 도구는 어떻게 쓰시나요?
적극적으로, 대신 검증해서 씁니다. 체인시프트에서는 Claude Code로 7일 안에 랜딩 3페이지를 완성했고, 개인 코드 스타일과 작업 규칙을 Claude Code에 주입하는 설정을 공개해 두었습니다. 반대로 채용 과제에서는 AI가 만든 코드를 직접 작성한 코드로 바꿔 에러 처리를 통일하고 그 과정을 분석 문서로 남겼습니다. few-shot 폰트 생성 파이프라인과 ML 모노레포처럼 제품 안의 AI도 다룹니다.
협업할 때 뭘 가장 중요하게 생각하시나요?
PR 기반으로 작업하고, ESLint·Prettier에 Overcommit·Husky 같은 Git Hook을 더해 코드 품질을 자동 관리합니다. UI 용어 표준화(visits/views → 조회수 등)나 반응형 가이드라인 문서화처럼 코드 밖의 품질도 챙깁니다. 도스트11에서는 연구 코드와 제품 코드가 한 저장소에서 빠르게 자라면서 화면 용어와 에러 메시지의 표기가 제각각이 되었는데, 사용자에게 보이는 텍스트를 한 기준으로 맞추자고 제안하고 화면 라벨부터 백엔드 파일 50여 개의 에러 메시지까지 직접 통일했습니다. 테스트 코드도 함께 작성합니다.