[0] 더프텔 - 라프텔 클론 코딩 프로젝트

 

깃허브 : https://github.com/Thedum2/Theftel

웹 개발 공부를 시작하면서 HTML과 CSS의 기초를 익혔다. 처음에는 수많은 HTML 태그와 CSS 속성을 외우려 했지만, 현실적으로 모든 것을 기억하는 것은 불가능하다는 걸 느꼈다. 그래서 중요한 것은 

모든 걸 다 외우는 것보다 기본기를 이해하고 직접 구현해보는 것임을 깨달았다.

그래서 선택한 방법은 바로 클론 코딩이었다. 내가 좋아하는 웹사이트를 직접 따라 만들어보면서 실제 적용되는 HTML/CSS 구조와 스타일링을 익히는 것이 목표였다. 그 첫 번째 프로젝트로 라프텔 페이지를 클론하기로 했다.

왜 클론 코딩을 선택했나? 직접 안만들고?

라프텔

디자인 할 줄 몰 라 / 바빠 임마

완벽하게 똑같이 만들 필요는 없었고, 내가 구현하면서 부족한 부분이나 새롭게 배운 점들을 반영하는 것이 핵심이었다.

라프텔 페이지는 콘텐츠 배치와 UI가 훌륭하게 구성되어 있어 다양한 레이아웃과 스타일링을 배울 수 있는 좋은 기회라고 판단했다.

---

오직 HTML/CSS로 구현하기

이번 프로젝트에서는 JavaScript나 다른 프레임워크를 사용하지 않았다. 현재까지 배운 HTML과 CSS 기본기만으로 웹사이트를 구성해보는 것이 목표였기 때문이다.

---

클론 코딩을 통해 얻어야 만 하는 것

이 프로젝트를 진행하면서 단순한 문법 습득을 넘어, 실제 웹사이트에 적용되는 다양한 레이아웃 기법을 직접 체험할 수 있을 것이다.

얻어가야 할 것	설명
CSS Normalize와 Reset의 차이	웹사이트를 구현할 때 브라우저마다 기본 스타일이 다르다는 것을 깨닫게 됨 이를 통일하기 위해 Normalize.css와 Reset.css를 사용하게 되는데, 이 둘의 차이를 이해하는 것이 중요
Margin Collapse	클론 코딩을 하면서 이러한 문제를 정확히 이해하고, padding이나 다른 CSS 속성을 통해 해결하는 방법을 익힐 수 있음
BEM(Block, Element, Modifier) 방법론	HTML/CSS 프로젝트가 커질수록 클래스 네이밍의 중요성은 커짐 BEM 방법론을 사용하면 클래스 네이밍을 체계적으로 관리할 수 있어, 코드의 가독성과 유지보수성이 크게 향상
폰트 파일 최적화 및 구글 폰트 활용	웹 페이지 성능 향상을 위해 폰트 파일을 관리하는 방법도 필수적인 기술 TTF, OTF, WOFF 등 다양한 폰트 형식을 이해하고, WOFF 파일을 사용해 웹에 최적화된 폰트를 제공하는 방법을 익히는 것이 중요 더불어 구글 폰트 같은 CDN 서비스를 사용
레이아웃 구성 능력(+ Box 모델의 이해)	웹사이트를 구성하는 데 있어 레이아웃을 설계하는 능력은 매우 중요 Flexbox와 Grid 같은 CSS 레이아웃 기술을 사용해 화면의 구성 요소를 유연하게 배치
반응형 웹디자인과 미디어 쿼리	현대 웹 개발에서는 반응형 웹디자인이 필수적 클론 코딩을 통해 미디어 쿼리를 활용해 다양한 화면 크기에 맞춰 레이아웃을 조정하는 방법을 익히는 것이 중요 모바일, 태블릿, 데스크탑 환경 모두에서 자연스럽게 동작하는 페이지를 구현함으로써 사용자 경험을 극대화

---

끝으로

이번 라프텔 클론 코딩 프로젝트는 이제 막 첫걸음을 뗐다. HTML과 CSS의 기본기를 다지면서 배운 내용을 직접 적용해보는 이 과정은 단순한 따라 하기가 아니라, 나만의 방식으로 구현하며 성장하는 시간이다. 완벽하지 않더라도, 클론 코딩을 통해 내가 가진 기술과 부족한 부분을 스스로 점검하고 보완해 나가는 것이 목표다.

앞으로도 이 프로젝트를 꾸준히 진행하면서 블로그에 틈틈이 진행 상황을 기록할 예정이다. 그 과정에서 배운 것들과 깨달은 점들을 공유하며 더 많은 웹 개발 지식을 쌓아갈 계획이다.

완벽하지 않아도 괜찮다. 중요한 것은 꾸준히 도전하고 배우는 과정이다. 나는 이제 시작했을 뿐이고, 앞으로 갈 길이 멀지만, 그만큼 가능성도 무궁무진하다. 배움은 멈추지 않을 것이고, 더 나은 결과물을 만들어가겠다는 다짐으로 이 프로젝트에 임할 것이다.

나 자신에게 화이팅! 💪

지켜봐주세용~