막막함을 작동하는 코드로.

웹이 움직이는 구조 읽기

기초 체력

주소창에 URL을 넣은 뒤 화면이 그려지기까지의 흐름을 직접 설명할 수 있습니다.

• HTML 문서 구조와 시맨틱 태그
• CSS 레이아웃과 반응형 기준점
• 브라우저 개발자 도구 사용법
• 요청과 응답, 상태 코드 읽기

미션

반응형 소개 페이지 만들기 — 모바일과 데스크톱에서 모두 읽히는 페이지를 직접 만들고 첫 배포까지 진행합니다.

산출물

접속 가능한 정적 페이지 URL

체크포인트

내가 쓴 태그와 스타일을 다른 사람에게 설명할 수 있다

• VS Code
• Chrome DevTools
• Git
• Vercel

<main class="layout">
  <h1>이름과 한 줄 소개</h1>
  <section aria-label="작업">...</section>
</main>

JavaScript로 화면을 움직이기

기초 체력

값이 바뀌면 화면이 바뀌는 구조를 만들고, 작업 과정을 Git으로 남깁니다.

• 변수·함수·배열과 객체 다루기
• 이벤트와 DOM 조작
• 비동기 처리와 fetch API 호출
• Git 브랜치와 커밋 메시지

미션

공개 API를 붙인 검색 화면 — 외부 데이터를 불러와 목록으로 보여주고 검색과 로딩·실패 상태까지 처리합니다.

산출물

데이터를 불러오는 인터랙션 페이지와 커밋 히스토리

체크포인트

오류 메시지를 읽고 어디를 봐야 하는지 스스로 찾는다

• JavaScript
• Git · GitHub
• 터미널

const res = await fetch(url);
if (!res.ok) throw new Error(res.status);
render(await res.json());

AI에게 일을 맡기는 법

AI 페어 코딩

요구사항을 AI가 바로 실행할 수 있는 작업 단위로 쪼개 전달합니다.

• 프로젝트 컨텍스트 문서 작성
• 요구사항을 작업 단위로 분해
• 제약 조건과 완료 조건 명시
• Claude Code · ChatGPT 작업 환경 설정

미션

내 프로젝트용 지침과 요청 템플릿 — 매번 처음부터 설명하지 않도록 프로젝트 규칙과 반복 사용할 요청 형식을 정리합니다.

산출물

프로젝트 지침 문서와 재사용 가능한 요청 템플릿

체크포인트

같은 요청을 다시 했을 때 비슷한 품질의 결과가 나온다

• Claude Code
• ChatGPT
• Cursor

# 프로젝트 지침
- 확인 명령: npm run lint && npm test
- 변경 전 관련 테스트를 먼저 읽기
- 생성 파일과 사용자 데이터는 수정하지 않기

생성된 코드를 검증하기

AI 페어 코딩

AI가 준 코드를 그대로 믿지 않고 읽고, 재현하고, 테스트로 확인합니다.

• 코드 읽고 설명하기
• 오류 재현과 로그 설계
• 테스트로 동작 고정하기
• 리팩터링을 요청하는 기준

미션

깨진 코드베이스 진단하기 — 의도적으로 문제를 심어둔 저장소에서 원인을 좁혀 가며 수정하고 재발 방지 테스트를 남깁니다.

산출물

원인과 해결 과정을 정리한 기록, 통과하는 테스트

체크포인트

문제의 원인을 추측이 아니라 근거로 설명한다

• Vitest
• Chrome DevTools
• Claude Code

it("빈 검색어는 전체 목록을 반환한다", () => {
  expect(search(items, "")).toHaveLength(items.length);
});

Next.js로 제품 구조 세우기

제품의 뼈대

화면 하나가 아니라 여러 화면이 연결된 애플리케이션 구조를 만듭니다.

• React 컴포넌트와 상태 관리
• Next.js 라우팅과 서버 컴포넌트
• 폼 처리와 입력 검증
• 재사용 가능한 UI 설계

미션

내 서비스 핵심 화면 3개 — 직접 고른 주제로 목록, 상세, 작성 화면을 만들어 라우팅으로 연결합니다.

산출물

라우팅이 연결된 Next.js 애플리케이션 골격

체크포인트

화면과 데이터의 경계를 나눠서 설명한다

• React
• Next.js
• TypeScript
• Tailwind CSS

데이터와 사용자를 기억하기

제품의 뼈대

새로고침해도 남아 있는 데이터와, 본인만 볼 수 있는 영역을 구현합니다.

• 데이터 모델링과 스키마 설계
• PostgreSQL 연동과 마이그레이션
• 회원가입·로그인과 세션
• 권한과 접근 제어

미션

로그인한 사용자만의 공간 — 가입한 사용자가 자기 데이터만 읽고 쓰는 흐름을 처음부터 끝까지 연결합니다.

산출물

데이터베이스에 저장되는 인증 기반 기능 한 세트

체크포인트

내 서비스의 데이터 구조를 그림으로 설명한다

• PostgreSQL
• Drizzle ORM
• Zod

export const posts = pgTable("posts", {
  id: serial("id").primaryKey(),
  userId: integer("user_id").notNull(),
});

실제 사용자에게 내보내기

출시와 개선

내 컴퓨터에서만 되는 상태를 벗어나 누구나 접속하는 주소를 만듭니다.

• 운영 환경 변수와 비밀 관리
• 배포 파이프라인 구성
• 도메인과 HTTPS 연결
• 배포 전 보안 점검

미션

도메인 연결까지 배포하기 — 운영 환경을 분리하고 실제 주소로 서비스를 공개한 뒤 접속 문제를 직접 해결합니다.

산출물

실제 도메인으로 접속되는 서비스

체크포인트

배포가 실패했을 때 로그에서 원인을 찾는다

• Vercel
• Docker
• GitHub Actions

관찰하고 다음 버전 만들기

출시와 개선

출시를 끝이 아니라 첫 버전으로 두고, 관찰한 문제를 다음 개선으로 연결합니다.

• 로그와 오류 모니터링
• 사용자 피드백 수집과 우선순위
• 성능과 접근성 점검
• 기술 의사결정 기록과 발표

미션

피드백을 반영한 개선 배포 — 실제 사용자 피드백을 모아 개선 항목을 정하고 다음 버전까지 배포합니다.

산출물

개선 기록이 담긴 포트폴리오와 데모 발표

체크포인트

무엇을 왜 만들었는지 5분 안에 설명한다

• Vercel Analytics
• Lighthouse
• GitHub