📌 자신이 원하는 사이트 레이아웃 클론

웹사이트

• 원본 사이트: https://www.oliveyoung.co.kr/store/main/main.do?oy=0
• 클론: https://vermillion-profiterole-fcab74.netlify.app/

1. 개발 내용

근래 오프라인에서 자주 이용한 올리브영 웹사이트를 클론코딩하기로 하였다.
HTML/CSS를 위주로 하는 프로젝트라 JS는 사용되지 않았으며, VSCode를 이용하여 코드를 작성하였다.
추가로 크롬 익스텐션 Image Downloader, Color Picker for Chrome, WhatFont 3가지를 작업에 사용하였다.

구현된 내용은 다음과 같다.
1) header 영역 (서치바 포함)
2) '유사한 고객님이 많이 구매했어요/고객님을 위한 추천 상품'
3) 'Weekly Special'
4) '인기 행사만 모았어요!'
5) 'Catch Keyword'
6) '오직 올리브영에서만'
7) 공지사항/고객센터 영역
8) footer 영역 (드롭다운 메뉴 포함)

반면 시간 관계상 구현하지 못한 항목은 다음과 같다.
1) '이 상품 어때요?'
2) 'Healthy Life'
3) '주목해야 할 브랜드'
4) '실시간 View 랭킹' 총 4가지 영역
5) 웹사이트 상단 우측 팝업 배너 및 CSS 애니메이션
6) 내비게이션 버튼 '<' 와 '>' 및 클릭 시 다음 이미지로 변환되는 기능

결과적으로 본 프로젝트는 아래 필수 요구사항을 충족하였다.

• [V] 설명이 포함된 README.md 파일을 제공하세요!
• [V] 결과와 비교할 수 있는 선택 사이트의 주소를 명시하세요!
• [V] 확인 가능한 HTML, CSS 파일 등이 모두 포함돼야 합니다!
• [V] 브라우저에서 정상적으로 출력돼야 합니다!

2. 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용

고민 1. 화면 비율 100%를 벗어날 시 가운데 정렬/꽉차게 설정한 레이아웃이 망가지는 현상

이전에 개인적으로 진행한 클론코딩에서도 있었던 이슈라서 꼭 조치하고 싶었다.

한 가지 방법만 있는 것은 아니지만, 대부분 CSS에서 부모 tag에 display (flex), justify-content (보통 center, 가끔 left/right 활용), align-items (보통 center), width 값을 넣고 해당 자식 tag에도 같은 내용을 넣은 뒤 영역 확대/축소를 반복하며 세밀히 조정하는 것이 필요하였다.

한 영역에 자식 element가 2, 3가지로 나뉠 경우 각각의 width 값을 조정하고, margin이나 justify-content로 위치를 옮겨 레이아웃을 유지할 수 있었다.

+) 2022.12.31. 추가
KDT 4기 동기 분들의 작업을 봤다. 레이아웃이 깨지는 웹사이트들이 보여서 많이 안타깝다. (나도 그랬어서)
나의 경우 해상도가 다른 2개 정도의 모니터에서 번갈아가며 줌인/줌아웃 해본게 깨지는 이슈를 방지한 것 같다.

HTML도 길지만, CSS의 경우 비슷한 class명과 반복되는 코드가 많아 읽기 어려운 것이 고민이었다.
하여 1) class 명은 프로젝트 중간에 작성법을 만들어 다시 위에서부터 훑으며 규칙에 맞게 재작성하였다.

또한 2) 반복되는 코드의 경우(특히 색깔) 색 이름과 같은 class 명을 사용하여 CSS가 늘어나는 것을 줄이려 하였다. 그러나 2)의 경우 후반부터 적용한 계획이라 문서 전체에 적용되지는 못했다.

3. 특이사항

• 과제 수행 기간이 12/19 ~ 12/30으로 2주 가량의 시간이었으나, 첫 주에 과제를 늦게 시작하여 총 7일 정도에 걸쳐 과제를 수행하였다.
• Image Downloader에서 모든 이미지를 선택할 시, 전체가 받아지지는 않았다. 필요한 이미지가 다운되었는지 확인이 필요했다.

4. 회고

• 처음부터 일궈야 하는 클론 코딩 특성상, 이번이 처음하는 클론 코딩이 아니라서 다행이었다. (그랬더라면 KDT 과정을 포기ㅠㅠ했을지도 모른다.)
• 프로젝트 기간동안 열심히 임하였으나 시작시기가 늦어 많은 애로사항이 있었다.
• commit을 중간중간 더 자주 했으면 좋았을 거라는 생각이 든다.
  • 향후 프로젝트에서는 한 기능/부분을 구현할 때마다 커밋하려고 한다.
• 다음부터는 효율적인 시간 운용을 위하여:
  • 레이아웃을 먼저 충분히 탐구한 뒤
  • 그림판 등을 활용하여 각 div를 표시하고(반복 사용, 요소 위치 등)
  • 선택한 영역만큼의 HTML 구조를 먼저 짠 뒤
  • 이후 CSS를 작성하려고 한다.
• BEM 모델을 더 적극 따랐다면 시간이 아껴졌을지... 조금 후회가 남는다.

5. TO-DO-LIST

1) 추후에는 아래 선택 요구사항을 적용하여 웹사이트 리팩토링을 진행하고 싶다.

선택 요구사항

• 시멘틱 태그를 최대한 활용해보세요.
• 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
• 부분적으로 BEM 방법론을 도입해보세요.
• JS가 필요한 부분은 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
• JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
• SCSS 등의 CSS 전처리도구를 도입해보세요.
• SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.