원인을 보는 개발자, 조현돈입니다.
About Me
배운 내용과 시행착오를 기록하고 공유합니다.
- •IT 동아리에서 Git 협업에 어려움을 겪는 부원들을 위해, 직접 경험한 시행착오를 바탕으로 Git Flow와 GitHub Flow를 비교하고 소규모 프로젝트에 맞는 브랜치 PR 활용 방법을 세션으로 공유했습니다. 현재까지 블로그 글 120편과 유튜브 쇼츠 8편을 제작하며 오류의 원인과 해결 과정, 기술 선택의 근거를 기록하고 있습니다.
AI를 검증 가능한 개발 프로세스의 일부로 활용합니다.
- •Cursor, Claude Code가 구현 계획과 변경 범위를 먼저 제시하도록 구성하고, 직접 검토하고 승인한 뒤 개발을 진행합니다.
- •AI가 수행한 UI 변경을 팀원이 빠르게 확인할 수 있도록 PR에 작업 목적과 영향 범위, 변경 전후 UI를 함께기록합니다.
- •AI가 생성한 코드가 팀 컨벤션과 어긋나지 않도록 Cursor 룰 파일(.mdc)로 커밋 컨벤션과 코드 리뷰 체크리스트를 구성해, 검토 없이 반영되는 코드가 없도록 관리합니다.
Experience
멋쟁이사자처럼 인턴십 17기
2026.02 – 2026.03
- •BlogAI를 기획부터 디자인, 프론트엔드, 벡엔드 개발까지 단독으로 진행하며 서비스 전반을 책임졌습니다.
- •중간 QA에서 발견된 사용 흐름과 UI 문제를 우선순위에 따라 개선하며, 기능 구현 이후에도 사용성을 검증하고 보완하는 과정을 경험했습니다.
스위프 웹 11
2026.01 – 2026.03
- •PM, 디자이너, 백엔드 개발자와 문서 번역 웹서비스를 개발하며, 요구사항과 구현 범위, 화면 상태와 API 응답 형식을 직군 간 조율했습니다.
- •로그인 연동 중 발생한 CORS 오류를 백엔드 개발자와 함께 네트워크 요청과 서버 설정까지 점검하며, 문제 상황과 확인 결과를 공유해 원인을 해결했습니다.
GDGoC | Core Member, Frontend Lead
2025.08 – 2026.07
- •코어 멤버와 프론트엔드 리드로 활동하며 매주 운영 회의에서 동아리 운영 방향을 논의하고, 부원들의 개발 진행 상황과 어려움을 확인해 필요한 내용을 설명하거나 자료를 공유했습니다.
- •직접 협업하며 겪은 시행착오를 바탕으로 Git Flow와 GitHub Flow를 비교하고, 소규모 프로젝트에서 활용할 브랜치 PR 방식을 정리해 세션을 진행했습니다.
멋쟁이 사자처럼 8기 프론트엔드 스쿨
2024.08 – 2025.03
- •HTML, CSS, JavaScript부터 React, TypeScript까지 학습하며 프론트엔드 개발의 기초를 익혔습니다.
- •팀 프로젝트를 통해 Git 기반 협업과 컴포넌트 설계, API 연동, 배포까지 웹서비스 개발의 전체 흐름을 경험했습니다.
블레이버스 해커톤
- •디자이너, 백엔드 개발자와 협업해 3D 공학 데이터를 웹에서 확인할 수 있는 서비스를 일주일 안에 개발하여, 예선을 통과해 본선에 진출했습니다.
- •제한된 일정에 맞춰 핵심 기능의 우선순위를 정하고 3D 화면과 주요 사용자 흐름을 먼저 완성하며, 짧은 개발 기간에는 구현 범위를 명확히 조율하는 것이 중요하다는 점을 배웠습니다.
Build with AI Seoul 2026, GDGoC 해커톤 행사 스태프
- •참가자 안내와 세션 운영을 지원하며, 대규모 AI 개발자 행사의 현장 운영과 커뮤니케이션을 경험했습니다.
Projects
BlogAi - AI 기술 블로그 작성 플랫폼
2026.01 ~ 2026.06
Next.js 16, TypeScript, Supabase, FSD
프로젝트 소개
블로그 글 120편을 쓰며 TIL, 트러블슈팅, 딥다이브 형식에 맞춰 매번 글 구조를 새로 고민하는 데 시간이 드는 걸 느껴, 주제와 키워드를 입력하면 이 3가지 형식의 기술 블로그 포스트를 AI가 자동 생성하는 Next.js 풀스택 서비스를 만들었습니다. 기획, 설계, 개발, 배포까지 단독으로 진행했습니다.
성과
- •useSyncExternalStore로 sessionStorage 기반 생성 상태를 동기화하여 SSR/CSR 하이드레이션 불일치 해결, 페이지 이탈 후에도 생성 상태를 유지해 요청당 약 2,000 토큰 낭비를 방지했습니다. (Link)
- •React 19 useOptimistic으로 글 삭제 UI 반영 지연을 2.4초에서 0.3초로 단축했습니다. (Link)
- •폰트 서브셋 분리와 favicon 경량화로 폰트 용량 4,090KB → 1,048KB, favicon 로딩 27초 → 168ms로 개선했습니다. (Link)
AI 워크플로우 설계(Claude Code)
- •FSD 아키텍처 검증, 수정 제안하는 Claude Code 스킬(fsd-check)을 설계해 cross-import 위반 6건→0건, Public API 커버리지 9.5%→100%를 달성했습니다.
- •GitHub Actions CI에 Playwright E2E와 아키텍처 검증 스크립트를 연동해 PR마다 빌드/E2E/FSD 규칙 자동 검증 체계를 구축했습니다.
사부작사부작 - 사회초년생 커뮤니티 플랫폼
2025.01 ~ 2025.04
Next.js 16, TypeScript, Supabase
프로젝트 소개
사회초년생을 위한 커뮤니티 '사부작사부작'입니다. 게시글,댓글,좋아요, 청년정책 검색 필터, 개인 캘린더, 알림 등 사용자 화면을 구현했으며, 디자이너 백엔드와 협업해 프론트엔드를 담당했습니다.
성과
- •홈 화면 금융교육, 직업정보 위젯에 Next.js fetch 캐싱(revalidate: 3600)을 적용해, 캐시 히트 시 외부 API 왕복(약 2,400ms)을 생략했습니다. (Link)
- •청년정책 API 2,000건 전체 호출 구조를 Supabase DB 동기화와 서버사이드 페이지네이션(9건/페이지)으로 전환해, 응답 시간을 2,448ms → 68ms(97% 단축)로 개선했습니다.
- •React 19 useOptimistic·startTransition으로 댓글 삭제/수정 시 UI를 즉시 반영해, 1~2초의 반응 지연을 제거하고 실패 시 자동 롤백을 구현했습니다.
AI 워크플로우 설계 (Claude Code)
- •Playwright MCP 기반 2단계 커스텀 슬래시 커맨드(/find-e2e.test, /create-e2e.test)를 설계해, 페이지 탐색→명세화→테스트 코드 생성 및 자동 반복 개선까지 자동화, 홈 화면 E2E 테스트 30건을 확보했습니다.
- •코드 변경 전 계획 제시, 승인 후 실행을 강제하는 "Plan-First Workflow" 규칙을 설계해 Claude Code, Cursor 양쪽에 적용, AI의 범위 밖 임의 수정을 차단했습니다.
Skills
- •Language: JavaScript, TypeScript
- •Framework: React, Next.js (App Router)
- •State/Data: TanStack Query, Zustand
- •Styling: Tailwind CSS, styled-components
- •Backend/Infra: Supabase, Vercel
- •Tools: Git, GitHub Actions, Playwright, Claude Code, Cursor
Education
대진대학교 경제학과 졸업(2018.03 ~ 2025.08)
Certificate
- •컴퓨터활용 능력 2급