[UX UI 디자인 부트캠프 #2] 제네시스 클론코딩
안녕하세요
UX UI 디자이너 댄비입니다
제네시스 클론 코딩 회고글을 작성해보려고 합니다
클론 코딩을 진행하며 느꼈던 포인트를 담아보겠습니다 ო̤̮
목표: https://www.genesis.com/kr/ko/main.html
퍼블리싱 연습을 위해 제네시스 메인 페이지를 클론코딩 해봤는데요.
디자인적으로도 완성도가 높고, 섹션 구조가 명확해서 연습용으로 좋은 것 같습니다.
HTML 구조 → CSS 레이아웃 → 반응형 대응까지 구현하는 것을 목표로 했습니다.
작업 구조
이번 작업에서는 CSS를 기능별로 분리해서 관리했습니다.
main.css
reset.css
responsive_pc.css
responsive_tablet.css
responsie_mobile.css
하나의 CSS 파일에 모두 작성하기도 하지만
반응형을 연습하는 목적이 있었기 때문에 디바이스별 CSS를 분리하는 방식으로 작업했습니다.
섹션 구조 설계
제네시스 홈페이지는 생각보다 구조가 단순합니다.
Header
Section01 - Hero
Section02 - 차량 라인업
Section03 - 빠른 기능 (견적, 상담, 시승)
Section04 - 어워드
Section05 - 콘텐츠
Section06 - 이벤트
Section07 - 연관 콘텐츠
Section08 - 앱 다운로드
Footer
HTML 구조를 만들 때는 섹션 단위로 나누는 것을 가장 신경 썼습니다.
<section class="section01"></section> <section class="section02"></section> <section class="section03"></section>
이렇게 나누어두면 나중에 CSS 관리나 반응형 작업이 훨씬 쉬워진다고 하더라고요.
퍼블리싱에서 레이아웃 구조 설계가 절반이라는 말을 조금 이해하게 됐습니다.
Hover 인터렉션 구현
버튼 hover 효과도 구현해봤습니다.
이 방식은
가상 요소(::after)를 이용해서 배경이 채워지는 효과입니다.
처음에는 단순 hover만 쓰다가
이런 방법을 알게 되니까 인터랙션 구현이 훨씬 재밌어졌습니다.
가장 어려운 반응형
사실 클론코딩 자체는 크게 어렵지 않았습니다.
문제는 반응형이었습니다.
1️⃣ 네비게이션 구조
PC에서는 텍스트 메뉴가 보이고 Tablet에서는 일부 아이콘으로 바뀝니다.
그래서 HTML 구조를 이렇게 만들었습니다.
display: none;
2️⃣ 이미지 교체
섹션5에서는 PC / Tablet 이미지를 따로 사용했습니다.
결과물
클론코딩을 하면서 느낀 건 디자인을 보는 눈과 구현하는 눈은 다르다는 것입니다.
평소에는 그냥 보던 홈페이지도 막상 구현하려고 보면
왜 이 레이아웃인지, 왜 padding이 이렇게 잡혀있는지, 왜 absolute를 썼는지.. 고려해야 합니다.
잘 구현할 수 있는 디자인을 만드는 디자이너가 되어가고 싶습니당 ㅋ.ㅋ