HTML, CSS로 만들어 본 카카오 웹 퍼블리싱

안녕하세요, '손재의 파이프라인' 블로그를 운영 중인 주인장 '손재'입니다.

오늘은 학원 커리큘럼 중 현존하는 웹 페이지를 리뉴얼해보는 시간을 가졌는데요. 초보자인 저에게는 드디어 정식으로 오로지 내 실력만으로 구현할 수 있는 부분이 어느 정도인지를 가늠해볼 수 있으면서 동시에 한 단계 더 나아갈 수 있는 기회가 될 수 있기에 어떤 웹 페이지를 리뉴얼해볼까 굉장히 고민 많이 했습니다.

제가 만들어보기로 결정한 사이트는 바로 대한민국 대표 IT 기업 중 하나인 카카오(Kakao).

https://www.kakaocorp.com/page/

Kakao

언제나 그랬지만, VS code에서 제일 먼저 html 파일을 만들고 "어떻게 하나하나 작성해 나가야 할까?"라는 생각이 들 때 사실 막막하긴 합니다. 물론, 결국 html과 css를 활용하여 초기 디자인 정도는 구현할 수 있는 실력까지 도달하여 한 스텝, 한 스텝 밟아나가면 결국 너비가 100% 기준을 때 얼추 비슷하게 만들 수 있지만, 오늘은 반응형이라는 벽에 부딪혔습니다.

출처 : 카카오 공식 홈페이지

저처럼 초보자 분들께 가장 먼저 드리고 싶은 말은 레이아웃 구성을 가장 먼저 하셨으면 좋겠다는 것입니다. 저 같은 초보자들이 가장 쉽게 범하는 실수는 바로 레이아웃을 알맞게 구성하지 못했다는 것에서 반복되는 유지보수 작업이 동반하는 것입니다. 그래서 제가 생각해낸 방법은 눈으로만 레이아웃을 그려내기보다는 직접 아래처럼 선을 그려보는 것입니다.

이렇게 해보는 게 사실 너무 번거로울 수 있습니다만, 이렇게 선을 그려보는 데까지 걸리는 시간은 3분도 안 걸립니다. 그리고 이렇게 레이아웃을 선으로 그려보는 습관을 가지다 보면 자연스레 이제 레이아웃을 어떻게 짜야하는지 눈에 익혀지고, 보이기 때문에 효과는 확실하다고 생각이 들어 추천하고 싶습니다.

아무튼, 저 역시 이렇게 먼저 그려보고 나서 html과 css창에 코드를 입력하였습니다.

저는 이제 웹 퍼블리싱을 배운 지 두 달 남짓하여 작업 속도가 굉장히 더딥니다. 한 페이지를 기능을 제외한 나머지를 구현하는 데만 8~9시간 정도 걸렸고요. 이것도 틈틈이 연습을 해서 이 정도입니다. 저는 머리도 좋지 않고, 노력하지 않으면 절대 결과로 나타나지 않는 스타일이거든요. 그래서 요즘은 새벽 2-3시까지는 꼭 1시간이라도 공부를 하고 잡니다.

내가 만든 카카오 홈페이지 리뉴얼

사실 리뉴얼이라기보다 그대로 따라한 거지만, 그래도 width 값이 최대 px을 때 그래도 얼추 비슷하게 만들어진 것 같아 뿌듯합니다. 물론, 기능적인 측면을 제가 실력이 형편없이 모두 구현할 순 없었지만, 그래도 오늘부터 제대로 자바스크립트(javascript)를 공부할 계획이라 실력이 그대로 조금은 나아질 것이라 사료됩니다. 하하 :)

반응형 웹 연습

반응형 웹 연습

그리고, 첫 반응형 웹 연습이라서 꽤 오랜 시간이 걸렸지만, 당연히 모든 px에서 일정한 비율로 줄어들지 않아 결론적으로 실패했지만, 그래도 반응형을 어떻게 해야 하는지 혹은 어떤 원리로 작동되는지에 대해 이해는 조금 한 듯하여 주말 동안 고민한 시간이 아깝지 않았습니다.

반응형 웹

-나만의 정의-

클라이언트 디바이스 화면 크기에 따라 적절한 너비로 웹 페이지를 보여주는 것을 말하며, 반응형 웹 작업이란 그 웹페이지를 구현하는 작업을 말합니다.

모바일 반응형까지 연습을 해봤는데, 모바일을 가로로 회전시키면 역시나 깨졌습니다만, 세로로 봤을 때는 웬만한 모바일 기기에서는 얼추 비슷하게 예쁘게 나온 것 같아 개인적으로 50%는 성공한 듯합니다. 그래도 나날이 실력이 조금은 느는 것 같아 얼마나 다행인지 모르겠네요. 앞으로 정말 가야 할 길이 무궁무진하게 남았지만, 절대 포기하지 않고 제 입에 풀칠할 수 있을 정도의 실력까지 도달하기 위해 끝까지 달려 나가겠습니다.

파이팅!!