총 경력 3.5년 · 개발 2년 차 프론트엔드 엔지니어. 경험을 설계하고 운영하며, 그로쓰와 그래픽을 공부하고 있습니다.
사용자 중심의 경험과 사고로, 가장 큰 임팩트를 만드는 것에 집중합니다.
MBC AI 전략자회사 · 디지털 에셋 마켓 도프켓 운영 · AI개발팀 · 풀스택 개발자 · 도프켓 서비스 총괄
애플펜슬로 쓴 손글씨를 한글 폰트로 만들어 주는 iOS 앱입니다.
Swift·SwiftUI·PencilKit으로 앱을 만들어 출시까지 단독으로 진행했습니다. 모델을 바꿔도 앱을 고치지 않도록 앱과 서버를 REST 계약으로 분리했고, 출시 후에도 멀티프로젝트(1.1)·공책 입력·펜 프리셋(1.5) 등 업데이트를 단독으로 이어가고 있습니다. SEO/GEO로 생성형 AI 에이전트를 통해 실제 사용자가 유입됐습니다.
지금 보고 계신 이 사이트입니다.
경력·프로젝트·교육을 생성형 AI 연표와 나란히 보여주는 타임라인형 디자인이고, 마우스를 따라다니는 포차코 커서 컴패니언이 숨어 있습니다. Next.js App Router와 TypeScript로 만들었고, 공통 컴포넌트와 자동화(ESLint·Prettier·Husky)로 코드 스타일을 통일했습니다. 이력서(HTML·PDF)도 이 저장소에서 함께 관리합니다. 날짜·수치 같은 사실을 단일 팩트 저장소에 두고 명령 한 번으로 두 문서를 재생성하며, 사이트와 이력서가 어긋나면 테스트가 실패합니다.
실제 개발에 쓰는 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)ML 연구원들과 한 저장소를 쓰며 방송용 CG 합성 도구의 프론트엔드를 재설계했습니다.
도구는 Gradio지만 일의 본질은 같았습니다. 사용자의 작업 흐름을 화면 구조로 번역하는 것. 도구 이름 기준 영문 탭을 실제 작업 순서인 1.마스크 → 2.에셋 → 3.합성으로 재구성하고, '원본+마스크+에셋=합성 결과' 썸네일 타임라인을 신설해 산출물이 다음 단계 어디에 쓰이는지 화면이 안내합니다. 클립보드에서 이미지를 붙여넣어 AI·백엔드로 바로 올리는 업로드 기능을 직접 개발했고, UI 용어 한국어화와 방송용 5GB 업로드 대응까지 함께 했습니다.
검색 엔진을 '정보 이용자에게 정보 요구 충족이라는 가치를 주는 제품'으로 정의하고, 40여 개 SEO 기법을 웹 표준·속도·신뢰성으로 묶어 정리한 라이트닝 토크입니다. 크롤링 예산과 서버 비용, 접근성 같은 검색엔진 개발자의 고민에서 거꾸로 출발하면 각 순위 기준의 이유가 보이고, 같은 원리가 LLM 시대의 GEO(Bing 인덱싱, 인용하기 쉬운 구조)로 이어진다는 내용입니다.
도스트11 데브 미팅에서 '알잘딱깔센 개발을 위한 CX 101'을 주제로 발표한 라이트닝 토크입니다. 서버 응답도 서비스직의 응대라는 관점으로, 고객이 부정적으로 반응하는 응답 3가지(손해 입히기, 맥락 무시, 아마추어의 응대)와 도서관 사서의 참고 봉사(무엇을 찾는지 함께 정의하고 단계별로 안내)를 대비했습니다. 좋은 에러 메시지는 그 자체로 DX이자 마케팅이라는 것이 핵심입니다.
AI 검색 최적화 SaaS · 인턴/수습 · 프론트엔드
체인시프트에서 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 })
}코드잇 팀 프로젝트로 만든 익명 질문·답변 서비스입니다.
무한 스크롤을 IntersectionObserver와 isHydrated 가드로 구현해, 렌더링 시점 의존으로 생기던 중복·누락 API 요청을 없앴습니다. 스크롤 끝에서 observer를 즉시 해제하고, 0개 피드·뒤로가기·URL 변경 같은 엣지 케이스에서도 오류 없이 데이터를 불러옵니다. JavaScript·React·CSS Module·Axios·Storybook으로 만들었습니다.
축구 데이터 올인원 '오코치' · FIFA Preferred Provider(FPP) · 소프트웨어개발팀 · SQA
중대형 제품 배송·설치 매칭 물류 SaaS(OMS/WMS) · 플랫폼기획팀 · SQA 매니저 · CX 매니저
대한민국 대표 통신사 · 출판국 DB센터 · 인물자료 담당
전공기초 '정보기술론'에서 Python 크롤링으로 코딩 입문 · SW프로그래밍·메타데이터 등 정보기술 교과 이수
ES6+ 문법을 기본으로 프론트엔드 개발에 사용했습니다. CommonJS와 ESM 방식의 설정 파일을 모두 다룰 수 있습니다.
도스트11에서 react-on-rails로 카테고리 에디터, 배너 캐러셀, 블로그 CMS, 정산 UI를 개발했습니다. 하이드레이션과 커스텀 훅을 다룹니다.
Next API 프록시와 NextAuth 세션으로 민감 정보 노출을 막았습니다. 비개발자가 Notion으로 관리하는 랜딩 페이지를 만들었습니다.
시맨틱 마크업으로 LCP를 줄이고, 스크립트 로드 시점을 조절하거나 무한 스크롤의 기준 요소를 잡는 데 사용했습니다.
MBC AI 전략자회사 도스트11에서 디지털 에셋 마켓 도프켓의 기획·개발·운영과 마케팅·영업 전반을 맡고 있습니다. 2025년 9월 계약직으로 입사해 2026년 1월 정규직으로 전환했고, 2026년 6월부터 도프켓 서비스 전반을 총괄하고 있습니다. 한국 시장 로컬라이제이션, 상품 대시보드, 블로그 CMS, 결제 UX를 담당했고 첫 B2B 고객사 온보딩도 진행했습니다. 회의에서 당일 제안한 포토부스 기능을 3일 만에 프로토타입으로 만들었고, ML 연구원들과 한 저장소에서 방송용 CG 합성 도구의 UI/UX를 재설계했습니다.
가장 중요하게 보는 건 팀이 같은 것을 같은 이름으로 부르는 일입니다. 용어가 어긋나는 데서 오해와 버그가 시작된다고 봐서, 어디서 일하든 말부터 맞췄습니다. 도스트11에서는 화면 라벨부터 백엔드 50여 개 파일의 에러 메시지까지 한 기준으로 통일하자고 제안하고 직접 정리했습니다. 사서가 이용자와 '무엇을 찾는지'부터 맞추듯, 협업도 거기서 출발한다고 생각합니다. 기계가 잡을 품질은 PR 기반 작업과 ESLint·Prettier·Git Hook으로 자동화해 두고, 사람은 합의가 필요한 일에 집중합니다. 그래서 제안에서 그치지 않고 끝까지 정리하며, 넘길 일도 고치지 않기로 한 일도 무엇을 왜 그랬는지 다음 사람이 바로 알 수 있게 문서로 남깁니다. 안 한 일까지 드러내는 게 협업에선 신뢰가 된다고 봅니다.
적극적으로, 특히 사고를 전개하거나 검증하는 데에 씁니다. 제 개인/업무 상의 코드 스타일과 작업 규칙을 Claude Code에 주입하는 설정을 두고 여러 기기에서 일관성 있는 결과물을 내고 있습니다. Claude Code가 출시되었을 때 체인시프트에서, 제게 낯선 D3.js를 다루어야 했으나 AI로 속도를 높여 대시보드를 완성하고 영업 데모에 기여했습니다. 반대로 한 채용 전형에서는 AI가 만든 코드를 직접 작성한 코드로 바꿔 에러 처리를 통일하고 그 과정을 분석 문서로 남겨 합격하기도 했습니다. 최근에는 few-shot 폰트 생성 파이프라인과 ML 모노레포처럼 제품 안의 AI를 경험하고 있습니다.
최고의 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 자격으로 검증받았습니다.
