프론트엔드 실력을 키워줄 HTML & CSS 연습 프로젝트

프론트엔드 공부를 시작한 초보자라면 누구나 한 번쯤 이런 벽에 부딪힙니다.

튜토리얼을 아무리 봐도 머릿속이 뿌옇기만 합니다. div가 뭔지는 압니다. 다른 사람이 작성한 스타일시트를 대충 훑어보며 흐름을 따라갈 수도 있죠. Flexbox 관련 영상도 서너 개쯤 봤습니다. 하지만 막상 빈 index.html 파일을 열고 깜빡이는 커서를 마주하는 순간, 머릿속은 하얗게 변해버립니다.

또 다른 튜토리얼을 찾아 헤매는 것은 답이 아닙니다. 해답은 바로 '프로젝트'에 있습니다.

주말 동안 끝마칠 수 있을 만큼 작고, 친구에게 자랑스럽게 보여줄 수 있는 눈에 보이는 결과물 말이죠. HTML과 CSS는 직접 코드를 타이핑하고, 망가뜨려 보고, 다시 고쳐나가는 과정에서 비로소 온전히 내 것이 됩니다.

Coddy 플랫폼에서 HTML과 CSS 트랙은 가장 활성화된 코스 중 하나입니다. 그리고 프론트엔드 코드에 자신감을 가질 때까지 꾸준히 나아가는 사람들에게는 한 가지 공통점이 있습니다. 바로 작은 프로젝트를 주기적으로 완성해 나간다는 것입니다. 이들은 "충분히 알 때까지" 기다리지 않습니다. 일단 만들고, 벽에 부딪히고, 검색하고, 해결하며 앞으로 나아갑니다.

이 가이드에서는 단 한 페이지짜리 사이트부터 CSS만으로 만드는 캐러셀(carousel)까지, 난이도별로 정리된 18가지 HTML 및 CSS 프로젝트를 소개합니다. 이 프로젝트를 전부 다 만들 필요는 없습니다. 이번 주말에 도전할 딱 하나만 골라 끝까지 완성해 보세요.

튜토리얼보다 프로젝트가 백배 나은 이유

코드를 읽고 있으면 공부를 하고 있다는 느낌이 듭니다. 하지만 착각일 뿐입니다.

유튜브 영상을 한 달 동안 봐도 기본적인 랜딩 페이지 하나 제대로 만들지 못할 수 있습니다. 보는 것과 직접 쓰는 것은 완전히 다른 근육을 사용하기 때문입니다. 특히 CSS는 직접 타이핑해 봐야 손에 익습니다. 수많은 미세한 조정 작업은 오직 시행착오를 통해서만 배울 수 있기 때문입니다.

프로젝트를 하면 자연스럽게 정보를 검색하게 됩니다! 프론트엔드 개발 업무의 30%는 코드를 작성하는 것이고, 나머지 70%는 MDN을 검색하고, 공식 문서를 읽고, 왜 특정 요소가 2픽셀씩 어긋나 있는지 원인을 찾는 일입니다. 튜토리얼은 이러한 현실적인 과정을 모두 생략해 버립니다.

또한, 프로젝트는 눈으로 보여줄 수 있는 결과물을 남겨줍니다. *"나 요즘 HTML이랑 CSS 배우고 있어"*라고 말하는 것만으로는 성취감을 느끼기 어렵습니다. 하지만 *"내가 이 맛집 웹페이지 만들었는데, 링크 한번 들어가 봐"*라고 친구에게 보낼 수 있다면 이야기가 달라집니다. "내가 직접 만들었다"는 이 짜릿한 성취감이야말로 힘든 고비를 넘기며 계속 나아갈 수 있게 하는 원동력이 됩니다.

개발 환경 설정하기 (이미 완료했다면 건너뛰세요)

HTML과 CSS를 시작하는 데 거창한 준비는 필요 없습니다. 딱 세 가지만 있으면 됩니다.

1. 텍스트 에디터. 대부분의 개발자가 사용하는 VS Code를 추천합니다. 무료이며, 프로젝트를 몇 개 진행하다 보면 유용하게 쓸 수 있는 CSS 확장 프로그램도 많이 있습니다.
2. 브라우저. 평소에 사용하는 브라우저면 무엇이든 좋습니다. 마우스 우클릭 후 검사(Inspect)를 눌러 실행하는 개발자 도구는 레이아웃 문제를 해결(디버깅)할 때 필수적입니다. 이 도구를 사용하는 습관을 일찍 들여놓으세요.
3. 프로젝트별 폴더. 처음에는 index.html과 style.css 파일만 있으면 충분합니다! 첫 프로젝트부터 빌드 도구, 프레임워크, 혹은 "모범 사례(Best Practices)" 같은 복잡한 것들에 신경 쓰지 마세요.

만약 환경 설정 과정마저 건너뛰고 싶다면, 별도의 설치 없이 브라우저에서 바로 실행되는 Coddy의 HTML 레슨과 CSS 레슨을 활용해 보세요. 프로젝트를 새로 만들지 않고 특정 개념만 빠르게 연습하고 싶을 때 매우 유용합니다. 그 외의 경우에는 폴더 하나와 텍스트 에디터만으로도 충분합니다.

초급 HTML & CSS 프로젝트

이 다섯 가지 프로젝트는 제목, 본문, 이미지, 목록, 링크, 그리고 약간의 색상과 여백 설정 같은 가장 기본적인 요소들만 사용합니다. HTML과 CSS 기초 수업을 몇 번만 들었다면 누구나 몇 시간 안에 완성할 수 있습니다.

1. 인물 헌정 페이지 (Tribute Page)

자신이 존경하는 인물(뮤지션, 작가, 운동선수, 과학자 등)을 한 명 선택해 단일 페이지로 구성된 헌정 사이트를 만들어 보세요. 큰 제목 하나, 대표 이미지(Hero Image), 짧은 소개글, 연혁(타임라인), 그리고 더 많은 정보를 얻을 수 있는 링크 목록을 넣습니다. 제목, 본문, 이미지, 목록 태그와 타이포그래피 및 여백 조정을 위한 기초 CSS만 사용합니다. 첫 HTML 프로젝트의 정석으로 불리는 데는 다 이유가 있습니다. 어려운 부분이 전혀 없기 때문이죠.

2. 개인 소개 페이지 ('About Me')

자신을 소개하는 한 페이지짜리 개인 사이트입니다. 사진, 짧은 자기소개, 관심사 목록, 연락처 섹션을 포함합니다. 웹상에 직접 배포까지 해본다면 보너스 점수를 줄 만합니다. GitHub Pages를 이용하면 단 몇 분 만에 무료로 배포할 수 있습니다. 이제 친구들에게 공유할 수 있는 진짜 웹 링크가 생기는 셈입니다.

3. 레시피 카드 (Recipe Card)

요리 대표 이미지, 재료 목록, 번호가 매겨진 조리 순서, 그리고 작은 상세 정보 상자에 표시된 준비 시간으로 구성된 레시피 페이지입니다. 순서가 있는 목록(ordered list)과 순서가 없는 목록(unordered list)의 차이, 이미지 크기 조절 방법, 그리고 텍스트가 많은 페이지를 지저분하지 않고 깔끔하게 정리하는 방법을 배울 수 있습니다.

4. 문의 폼 페이지 (Contact Form)

이름, 이메일, 메시지 입력란, 그리고 전송 버튼이 있는 폼 페이지입니다. 실제로 메시지가 전송되게 만들 필요는 없습니다. 그건 JavaScript의 영역이니까요. 이번 프로젝트의 핵심은 HTML 폼 요소(input, textarea, label, button)를 다루고, 브라우저 기본 스타일의 투박함을 벗어나 예쁘게 꾸미는 것입니다. 폼은 거의 모든 프론트엔드 프로젝트에 등장하므로, 지금 익혀두면 앞으로 큰 도움이 됩니다.

5. 심플한 레스토랑 메뉴판

가상의 레스토랑을 위한 한 페이지짜리 메뉴판입니다. 에피타이저, 메인 요리, 디저트 등의 카테고리를 나누고, 각 메뉴의 이름과 짧은 설명을 적습니다. 상단에는 멋진 히어로 배너를, 하단에는 영업시간이 적힌 작은 푸터를 추가해 보세요. 콘텐츠를 섹션별로 그룹화하고, 반복되는 레이아웃을 구성하며, 조화로운 색상 조합(Color Scheme)을 선택하는 연습을 할 수 있습니다.

중급 프로젝트 (Flexbox, Grid, 레이아웃)

이제 요소를 제대로 배치하고, 여러 섹션을 조화롭게 다루며, 실제 인터넷에서 볼 법한 완성도 높은 페이지를 만들어 볼 차례입니다. 이 프로젝트들은 대부분 Flexbox나 CSS Grid를 기반으로 하므로, 레이아웃 감각을 키우기에 안성맞춤입니다.

6. 가상 제품의 랜딩 페이지

아무 제품(앱, SaaS 툴, 향초 브랜드 등 무엇이든 좋습니다)이나 하나 정해서 실제 공식 홈페이지 같은 랜딩 페이지를 만들어 보세요. 헤드라인과 행동 유도(CTA) 버튼이 있는 히어로 섹션, 그 아래에 세 가지 주요 특징을 소개하는 섹션, 고객 후기(Testimonials), 그리고 링크가 포함된 푸터로 구성합니다. 이 프로젝트는 Flexbox와 Grid를 집중적으로 훈련할 수 있을 뿐만 아니라, 여백 조절과 시각적 위계(Visual Hierarchy)를 배우는 데도 아주 좋습니다.

7. 포트폴리오 사이트

비록 지금은 내세울 "작업물"이 앞서 만든 헌정 페이지 두 개와 레시피 카드뿐일지라도, 자신의 결과물을 멋지게 보여줄 수 있는 다중 섹션 페이지를 만들어 보세요. 네비게이션이 포함된 헤더, 히어로 섹션, 프로젝트 그리드, 자기소개 섹션, 연락처 섹션으로 구성합니다. 프로젝트 레이아웃에는 Grid를 사용하고, 네비게이션과 히어로 섹션에는 Flexbox를 적용해 보세요.

아직 포트폴리오가 필요 없다고 생각할 수도 있지만, 미리 만들어두면 매우 유용합니다. 나중에 구직 활동을 시작하거나 프리랜서 일을 구하는 순간, 이미 준비된 포트폴리오가 빛을 발할 것입니다.

8. 요금제 테이블 (Pricing Table)

세 가지 요금제를 나란히 배치하고, 각 요금제 카드에 이름, 제공 기능 목록, 그리고 구매 버튼을 넣습니다. 가운데 카드에는 "가장 인기 있는 요금제" 같은 강조 표시를 추가해 보세요. 요금제 테이블은 겉보기엔 단순해 보이지만 의외로 손이 많이 갑니다. 카드의 높이를 똑같이 맞추고, 글머리 기호 목록을 정렬하고, 버튼에 마우스를 올렸을 때(hover)의 효과를 주는 등 세심한 작업이 필요합니다. Flexbox를 연습하기에 아주 좋은 프로젝트입니다.

9. 블로그 메인 페이지

블로그의 메인 화면을 만듭니다. 네비게이션과 검색창이 있는 헤더, 상단의 추천 기사, 그 아래에 배치된 최신 글 그리드, 카테고리와 최근 댓글이 있는 사이드바, 그리고 하단의 푸터로 구성합니다. 이 프로젝트를 통해 여러 영역으로 나뉜 복잡한 콘텐츠 레이아웃을 다루는 방법을 배울 수 있으며, 이는 실제 현업에서 다루는 프론트엔드 화면과 매우 유사합니다.

10. 로그인 및 회원가입 페이지

로그인과 회원가입이라는 서로 연관된 두 개의 페이지를 만듭니다. 화면 중앙에 정렬된 폼, 브랜드 로고가 들어간 헤더, 그리고 두 페이지를 서로 전환할 수 있는 링크를 포함합니다. 과하지 않으면서도 깔끔하고 세련된 디자인을 완성하는 것이 핵심 과제입니다. 훌륭한 로그인 페이지는 정렬이 완벽하고 사용자가 기대한 것보다 조금 더 세련된 느낌을 줍니다. 디자인 감각을 키우기에 아주 좋은 숨은 꿀 프로젝트입니다.

11. 대시보드 목업 (Dashboard Mockup)

정적인 대시보드 레이아웃을 만듭니다. 왼쪽에는 사이드바 네비게이션, 상단에는 사용자 정보가 있는 탑바, 메인 콘텐츠 영역에는 몇 개의 통계 카드, 차트 영역(플레이스홀더), 그리고 최근 활동 목록을 배치합니다. 상호작용(인터랙션) 기능은 아직 구현하지 않습니다. 오직 레이아웃 구성에만 집중하는 프로젝트입니다. Grid가 핵심적인 역할을 하게 될 것입니다. 이 프로젝트를 끝마칠 때쯤이면 왜 CSS Grid가 필요한지, 그리고 왜 Grid를 써보지 않은 사람들이 레이아웃 작업이 어렵다고 불평하는지 깊이 공감하게 될 것입니다.

CSS 애니메이션 및 효과 프로젝트

이제 재미있는 단계로 넘어갑니다. 규모는 작지만 CSS의 비중이 높은 프로젝트들입니다. transition, keyframes, transform, 그리고 :hover나 :focus 같은 가상 클래스(pseudo-classes)를 익히기에 아주 좋습니다.

12. 로딩 스피너 (Loading Spinner)

오직 CSS만으로 작동하는 로딩 스피너를 만듭니다. 회전하는 링, 통통 튀는 세 개의 점, 깜빡이는 원, 반복해서 채워지는 프로그레스 바 등 몇 가지 버전을 시도해 보세요. 각각 약 15줄 내외의 CSS 코드로 구현할 수 있으며, @keyframes, animation, transform 속성을 확실하게 배울 수 있습니다.

13. 호버 효과가 있는 이미지 갤러리

사진 그리드에서 각 이미지에 마우스를 올리면 부드러운 전환 효과와 함께 캡션(설명)이 나타나도록 만듭니다. 슬라이딩 오버레이, 이미지 확대(zoom), 서서히 사라지는 컬러 필터 등 다양한 효과를 시도해 보세요. 이 프로젝트를 통해 많은 사람들이 비로소 transition의 개념을 확실히 깨닫게 됩니다. 또한 position: absolute를 사용해 요소를 겹치게 배치하는 방법도 배울 수 있습니다.

14. 애니메이션 네비게이션 바

왼쪽에 로고, 오른쪽에 메뉴 항목이 있는 네비게이션 바를 만듭니다. 메뉴에 마우스를 올리면 슬라이딩 애니메이션과 함께 밑줄이 생기고, 현재 활성화된 페이지에는 밑줄이 유지되도록 합니다. 모바일 화면에서는 메뉴가 햄버거 아이콘으로 접히고, 클릭 시 드롭다운 메뉴가 열리게 만듭니다. 대화형 요소의 애니메이션 상태와 화면 크기에 따른 반응형 동작은 앞으로 평생 쓰게 될 유용한 패턴입니다.

15. CSS 카드 뒤집기 (Card Flip)

마우스를 올리면 카드가 3D로 뒤집히면서 뒷면의 내용(명언, 단어 정의, 추가 상세 정보 등)이 나타나게 합니다. 자주 쓰이지는 않지만 처음 성공했을 때 마법처럼 느껴지는 두 가지 CSS 속성인 transform: rotateY와 backface-visibility를 사용합니다. 빠르게 완성할 수 있으면서도 코딩에 대한 자신감을 크게 북돋아 주는 프로젝트입니다.

16. CSS만으로 만드는 이미지 슬라이더

이전/다음 컨트롤 버튼이 있고 가로로 스크롤되는 이미지 캐러셀을 JavaScript 없이 오직 CSS만으로 구현합니다. 화면에 보이지 않게 숨겨둔 라디오 버튼과 :checked 선택자를 활용해 표시할 이미지를 전환하는 기발한 트릭을 사용합니다. 매우 영리한 패턴이며, JavaScript를 쓰기 전에 CSS만으로 얼마나 많은 것을 할 수 있는지 깨닫게 해줍니다. 평소라면 JavaScript로 만들었을 기능이더라도 한 번쯤 직접 구현해 볼 가치가 있습니다.

고급 HTML & CSS 프로젝트

마지막 프로젝트들은 기초가 익숙해져 진짜 도전을 원하는 분들을 위한 것입니다. 여전히 순수 HTML과 CSS만 사용하지만(JavaScript 불필요), 레이아웃 구성 능력, 정밀함, 그리고 끈기를 시험하게 될 것입니다.

17. 유명 웹사이트 메인 페이지 클론 코딩

실제 운영 중인 사이트(넷플릭스 메인 페이지, 스포티파이 랜딩 페이지, 애플의 특정 제품 소개 페이지 등)를 하나 골라 눈에 보이는 부분을 HTML과 CSS로 최대한 똑같이 재현해 보세요. 기능을 구현할 필요는 없으며, 레이아웃, 타이포그래피, 여백, 색상을 완벽하게 맞추는 데 집중합니다.

"도대체 이 패딩 값은 어떻게 맞춘 거지?" 고민하며 몇 시간을 보내다 보면, 그리드가 왜 그런 방식으로 계산되는지 이해하게 되고, 방문하는 모든 사이트의 레이아웃 구조가 눈에 들어오기 시작할 것입니다. 현업 프론트엔드 개발자들도 실력 향상을 위해 수년 동안 추천하는 최고의 연습 방법입니다.

18. CSS 아트 (CSS Art)

오직 div 요소들과 CSS만을 사용해 그림을 그려보세요. 이 방식으로 만화 캐릭터, 풍경, 동물, 심지어 정교한 초상화까지 그려내는 사람들이 있습니다. 커피 한 잔, 웃는 얼굴, 단순한 로봇처럼 쉬운 것부터 시작해 보세요.

직접 해보기 전까지는 다소 엉뚱하게 들릴 수 있습니다. 하지만 막상 시작하면 position, border-radius, box-shadow, 그라디언트, 그리고 transform을 깊이 있게 공부하는 최고의 수업이 됩니다. 사각형 안에 원 하나를 그려 넣으려고 애쓰는 과정 속에서, 대부분의 초보자는 결코 도달하지 못하는 깊은 수준의 CSS 이해도를 얻게 될 것입니다.

Coddy가 도와드릴 수 있는 역할

Coddy의 HTML 레슨과 CSS 레슨은 *"이걸 배우고 싶다"*는 마음과 *"실제 프로젝트를 만들 수 있다"*는 실력 사이의 간극을 메워주기 위해 설계되었습니다. 각 레슨은 약 5분 정도 소요되며, 브라우저에서 직접 실제 코드를 작성합니다. 왜 margin: auto를 썼는데도 요소가 세로로 가운데 정렬이 안 되는지 막힐 때면, 레슨 내 AI 어시스턴트인 Bugsy가 바로 나타나 해결을 도와줍니다.

모든 커리큘럼은 매일 꾸준히 연습할 수 있도록 구성되어 있습니다. 사람들이 매일 아침 외국어 학습 앱을 켜는 것과 동일한 패턴을 코딩 공부에 적용하여, 여기서 5분, 저기서 5분씩 가볍게 학습할 수 있습니다. 만약 혼자 공부하는 인터넷 강의를 늘 30%쯤 듣다가 포기하셨다면, 여러분에게 필요했던 건 바로 이 '한입 크기(bite-sized)' 학습 방식이었을 것입니다.

HTML과 CSS의 모든 레슨은 별도의 설정 없이 무료 등급(free tier)으로 제공됩니다. 많은 분들이 이 점에 놀라곤 하죠. Flexbox를 한창 배우는 도중에 갑자기 결제창이 뜨는 일은 절대 없을 테니 안심하세요!

도움이 되는 몇 가지 습관들

프로젝트를 선택하기 전에, 실력 향상에 놀라울 정도로 큰 차이를 만들어내는 세 가지 사소한 습관을 소개합니다.

브라우저 개발자 도구를 적극 활용하세요. 아무 요소에나 마우스 우클릭을 하고 '검사'를 누른 뒤 스타일(Styles) 패널을 살펴보세요. 브라우저에서 실시간으로 CSS를 수정하며 어떻게 변하는지 바로 확인할 수 있습니다. 여러분이 사용하게 될 최고의 디버깅 도구이며, 이미 모든 브라우저에 무료로 탑재되어 있습니다.

모바일 퍼스트(Mobile-first)로 개발하세요. 먼저 작은 화면(모바일)을 기준으로 CSS를 작성한 다음, 미디어 쿼리(Media Queries)를 추가해 큰 화면에서도 보기 좋게 다듬어 나가세요. 반대로 하면 훨씬 더 까다롭습니다. 대부분의 현대 프론트엔드 개발이 이 방식을 따르고 있으므로, 지금 습관을 들여놓으면 나중에 코드를 갈아엎는 수고를 크게 줄일 수 있습니다.

일단 투박하더라도 완성부터 하세요. 임시 콘텐츠(Placeholder)와 대략적인 스타일만 적용해 페이지가 제대로 작동하게 만든 뒤, 디테일은 나중에 다듬으세요. 많은 초보자들이 완벽한 버튼 하나를 만드느라 3시간을 허비한 뒤에야 전체 레이아웃이 어긋났다는 사실을 깨닫고 모든 코드를 처음부터 다시 작성하는 실수를 범하곤 합니다.

다음에는 무엇을 만들어야 할까요?

하나의 프로젝트를 끝마쳤을 때 다음에 무엇을 만들어야 할지 자연스럽게 떠오른다면 아주 좋은 신호입니다. 준비가 되신 겁니다!

이 리스트에서 다음 프로젝트를 골라 바로 시작해 보세요. "충분히 준비되었다"고 느껴질 때까지 기다리지 마세요. 그런 순간은 영원히 오지 않으니까요. 어느 날 문득 뒤돌아봤을 때 이미 6개의 프로젝트를 완성했고, 7번째 프로젝트도 충분히 해볼 만하다고 느끼는 자신을 발견하게 될 것입니다.

다음에는 무엇을 할지 고민된다면, 약간 두렵거나 어렵게 느껴지는 프로젝트를 선택해 보세요. 실력의 비약적인 성장은 편안한 영역 안이 아니라, 그 경계선에 부딪힐 때 일어나기 마련입니다.

만약 기초적인 부분(선택자가 작동하지 않거나, 레이아웃이 깨지거나, Flexbox가 먹통이 되는 등)에서 계속 벽에 부딪힌다면, 잠시 프로젝트를 내려놓고 부족한 부분을 채워줄 집중 레슨을 가볍게 훑어보세요.

Coddy의 HTML 및 CSS 트랙은 바로 이러한 상황을 위해 설계되었습니다. 막히는 개념만 짧고 집중적으로 연습한 뒤, 다시 여러분의 프로젝트로 돌아가 막힘없이 이어나가 보세요.