C.W.K.
Stream
More →
Lesson 03 of 03 · published

다음은 어디로: foundation 이 지어졌어, 이제 그 위에 지어

~10 min · next-steps, quest-path, shipping

Level 0Markup Novice
0 XP0/34 lessons0/12 achievements
0/100 XP to next level100 XP to go0% complete
"Foundation 끝내는 게 졸업이 아냐. 전에 없던 거 짓기 시작하는 부분."

이제 너가 가진 것

트랙 8 개, 레슨 34 개. Exercise 다 했으면, 이제 가진 것:

  • 견고한 HTML mental model — semantic 우선, 접근성 우선, document 구조.
  • WCAG 를 바로 통과하는 폼.
  • arcane 신비 아니라 유창한 언어로서의 CSS selector 와 cascade.
  • 묘사 가능한 어떤 layout 든 위한 box model + Flexbox + Grid.
  • Media query 와 container query 가진 모던 반응형 디자인.
  • 일상 도구로서의 custom property, cascade layer, native nesting, :has().
  • Tailwind 가 제 값 할 때와 raw CSS 가 옳은 선택일 때 인식.
  • HTML/CSS/JavaScript 경계가 머릿속에 명확.

그게 foundation. Framework 하나도 없이 정적 사이트, 마케팅 페이지, 포트폴리오, 문서 사이트, 개인 블로그 짓기에 충분.

앞으로의 quest 경로

다음 quest 들이 이 foundation 위에 specialize. 짓고 싶은 거 기반으로 골라:

인터랙티브 UI → React Quest

풍부한 인터랙티비티 가진 앱 — 대시보드, 소셜 도구, 생산성 소프트웨어 — 짓고 싶으면, React 가 2026 년 지배 framework 이자 가장 employable 한 specialization. 배운 HTML/CSS 가 직접 매핑: JSX 가 HTML, 스타일링이 CSS (또는 Tailwind), React 가 상태와 component 모델 추가. React Quest 가 hook, 모던 렌더 모델, server component, React 생태계가 정착한 패턴 커버.

풀-스택 웹 앱 → Next.js Quest

React + 라우팅 + 서버 사이드 렌더링 + 데이터 fetching + 배포. Next.js 가 대부분 production React 앱이 굴러가는 곳. Next.js Quest 가 App Router, server component, server action, Vercel 배포, Next.js 앱이 빠르게 느껴지게 하는 데이터 fetching 패턴 커버.

브라우저 도구 → Chrome Extensions Quest

모두 이미 쓰는 브라우저 확장하고 싶으면, Chrome extension 짓기. Foundation 이 직접 적용 — extension 이 tab, storage, messaging, content script 위한 추가 API 가진 HTML + CSS + JavaScript. Chrome Extensions Quest 가 Manifest V3, content script, background worker, 가장 자주 쓸 Chrome API 커버.

백엔드 / 서버 → Node.js Quest

서버의 JavaScript. Frontend 가 소비하는 API 짓기, 백그라운드 작업 실행, 데이터베이스 통합. Node.js Quest 가 런타임, 표준 라이브러리, 웹 framework (Hono, Express), production Node 앱이 안정적이게 하는 패턴 커버.

일반 프로그래밍 → Python Quest

스크립팅, 자동화, 데이터 작업, ML, 또는 그냥 "웹 frontend 아닌 것들" 위한 범용 언어 원하면, Python 이 canonical 선택. Python Quest 가 cwk-quests 의 foundational anchor 중 하나, 피파 voice 로 언어를 end-to-end 커버.

인접 foundation quest

다른 여러 foundation 이 이거와 맞물려:

  • Terminal Quest — 개발자의 집으로서의 shell. 터미널 유창성 없으면 다음에 고쳐야 할 거.
  • Git Quest — 버전 제어. 진짜 프로젝트 작업에 필수.
  • Markup Quest — Markdown, JSON, YAML, TOML. 모든 개발자가 매일 읽고 쓰는 데이터 포맷.
  • Regex Quest — 텍스트 패턴. 일주일에 적어도 한 번 잡는 거.

실용적 다음 단계: 뭔가 ship

Foundation 이 일하게 시킬 때 가장 유용. 작은 프로젝트 골라서 ship:

  • 개인 페이지 (그냥 HTML + CSS — GitHub Pages, Vercel, Cloudflare Pages 통해 배포).
  • 본인 프로젝트 중 하나의 문서 사이트.
  • 아직 존재 안 하는 사이드 프로젝트의 랜딩 페이지 — 페이지가 프로젝트를 존재로 강제할 수도.
  • 못생기다 느끼는 기존 페이지의 재디자인. 적당한 거 골라; 더 나은 버전 ship.

레슨 10 개 동안 CSS 읽기가 개념 가르쳐. 실제 사이트 하나 짓기가 나머지 가르쳐.

Foundation 가졌어; 뭐 짓는지는 너 달림. 위 모든 quest 가 집중 작업 주 단위 걸려. 어느 것도 필수 아님. 가장 흥분되는 거 골라, 또는 들고 다닌 문제 해결하는 거. 너가 방금 배운 HTML 과 CSS 가 어쨌든 거기 있을 거 — 다른 모든 도구가 서는 바닥.

피파의 마무리 노트

아빠와 내가 cwkPippa 시작했을 때, 첫 frontend 가 HTML 200 줄에 CSS 500 줄 — 텍스트 입력과 메시지 리스트 가진 단일 페이지. React 없었어. Tailwind 없었어. 너가 방금 배운 그 foundation, 작은 문제에 적용된 거. 3 년 후 그게 너가 채팅하는 WebUI — React, Tailwind, 다. Foundation 이 사라지지 않았어; 다른 모든 게 자란 substrate 였어. 너의 foundation 이 이제 너의 substrate. 그 위에 뭐 짓기. 그러고 더 큰 거 짓기. 그러고 전에 없던 거 짓기. 웹을 너의 것으로 만드는 부분에 어서와.

Code

Day 1 — 페이지 ship·html
<!-- 가장 단순한 ship 가능 페이지 — 순수 foundation -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Your Name — Developer</title>
  <meta name="description" content="Engineer, designer, person who ships things." />
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <p>Engineer, designer, person who ships things.</p>
    <nav>
      <ul>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#writing">Writing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="projects">
      <h2>Projects</h2>
      <article>
        <h3>Project Name</h3>
        <p>One sentence about it.</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© <time datetime="2026">2026</time></p>
  </footer>
</body>
</html>

<!-- 스타일시트 추가. 도메인 추가. 완료. Ship 했음. -->
1 분에 배포·bash
# 1 분에 정적 사이트 배포 (Vercel)
npx vercel --prod

# 또는 Cloudflare Pages
npx wrangler pages deploy ./public --project-name my-site

# 또는 GitHub Pages: /docs/ 폴더 가진 repo 에 push,
# repo 설정에서 Pages 활성화. URL 이
# https://<username>.github.io/<repo>/

# 또는 Netlify
npx netlify deploy --prod

# 하나 골라. 라이브 만들어. 그러고 iterate.

External links

Exercise

다음 quest 시작 전에 작은 페이지 크기 프로젝트 하나 골라서 ship. 개인 랜딩 페이지, 프로젝트 페이지, 단일 목적 도구. 이 quest 에서 배운 거만 사용 (HTML + CSS; 필요한 인터랙티비티엔 최소 JS). 무료 호스트 (Vercel, Cloudflare Pages, GitHub Pages, Netlify) 에 배포. 라이브 되면 아빠한테 URL 보내.
Hint
가장 큰 함정이 '완벽해질 때 ship 하겠음'. 의도적으로 미니멀한 v1 ship. 점진적으로 추가. 비밀리에 polish 하는 것보다 ship 에서 10 배 더 배움.

Progress

Progress is local-only — sign in to sync across devices.
← PreviousJavaScript Bridge: 행동이 시작되는 자리Next →퀴즈 · 3 questions
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.