TOY 원티드 클론코딩

공부의 기록·2022년 1월 4일

Project (clone)

목록 보기

8/9

Wanted

본 클론 코딩은 2022년 1월 5일 부터 2022년 1월 78일 까지 진행하였습니다.

학원 과제로 Static Website 만드는 것을 진행하게 되었습니다.
클론 코딩 프로젝트였기 때문에 클론 대상 사이트를 선정에 고민을 하게 되었습니다.

그래서 기존 까지 혼자 진행해보았던 클론 프로젝트를 돌아보게 되었습니다.

그 외에도 Wetube (front/back) 클론코딩 및 Lifefolio (front/back) 기획 및 개발 의 과정에서 작업 프로세스를 검증하며 가이드라인을 완성하려 노력했습니다.

그리고 이번 클론코딩을 통해서 기본적인 가이드라인을 완성하고자 하였습니다.
따라서, 제가 원하는 기본 로직인 반응형, Flex, Grid 기반의 사이트를 찾아야 했습니다.
그 대상으로 가장 깔끔하게 디자인 되었다고 생각한 커리어 여정을 행복하게 :: Wanted 를 선택하게 되었습니다.

가이드라인 기획

제가 지향하는 것은 백앤드 개발자이고
프론트앤드 혹은 디자이너가 아님에도 가이드라인에 집착 한 이유는
아무리 잘 만든 서비스라고 하더라도 디자인 없이는 완성될 수 없다고 생각하기 때문입니다.

따라서 부족한 경험과 시간을 보완하기 위해서 디자이너의 의견을 뒷받침한 가이드라인 완성이 필요했습니다. 이 가이드라인의 아이디어는 웹디자인 시작한다면 이건 꼭 보세요[포토샵] 를 참고하였으며, 작업 이전에 Figma / Wanted 클론코딩 을 통해서 레이아웃 분석을 시작하고 진행하였습니다.

모든 반응형 최상위 컨테이너는 다음과 같은 로직으로 완성했습니다.

#nav { width 100% }
.nav_container {
   width: 1070px;
}
@media screen and (max-width: 1100px) {
   width: 100%;
}

또한 그리드 박스는 12칼럼 기준으로 다음과 같이 완성했습니다.
또한 내부에 넣을 컨탠츠는 3,6,9 칼럼을 차지하도록 완성했습니다.

.main_grid {
   grid-template-column: repeat(12, 1fr);
}
.main_content_small {
   grid-column: span 3;
}
.main_content_medium {
   grid-column: span 6;
}
.main_content_big {
   grid-column: span 12;
}