웹디자인 프론트엔드 개발자 국비지원 도전기 - 4

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

 

웹디자인 프런트엔드 개발자가 되기 위한 도전을 한 지 이제 딱 두 달이 넘었네요. 두 달 동안 하루 8시간씩 학원에서 시간을 보내면서(물론 매일 8시간을 집중하진 않음) 나름 열심히 했다고 말은 못 하겠지만, 최근 들어 다행히도 재미를 붙여 html과 css를 활용해 웹페이지를 야무지게 만들어보고 있습니다.

 

제가 이번에 만들어 본 웹페이지는 https://dribbble.com/shots/15826286-Wine-shop-Just-relax 이 웹사이트에서 해외 개발자분이 올려놓은 걸 연습 삼아 따라 해 봤습니다.

Wine shop Just relax

해외 개발자 웹

이 개발자분이 만들어 놓은 사이트는 반응형까지 구현을 하셨는지는 모르겠지만, 저는 아직까지 반응형 구현을 제대로 하지 못하기 때문에 width 값이 100%, height 값이 100%인 것을 기준으로, 화면이 꽉 찼을 경우에 사용자들이 보이는 모습을 구현하는 데 그쳤습니다.

 

언제나 그렇지만, 웹사이트를 가장 먼저 구현할 때 제가 가장 고민을 많이 하는 건 어떻게 레이아웃을 최대한 동일하게 구현할 수 있을지를 생각하는 거였습니다. 물론, 제가 수준이 낮기 때문에 구현하기 쉬운 홈페이지들만 따라 해보고 있지만, 레이아웃을 동일하게 짜려고 하는 것 자체도 생각보다 많이 어렵기 때문에 초보자분들에겐 꽤 좋은 연습 상대가 되곤 합니다.

 

내가 만든 연습용 웹

제가 위 사지만 가지고 어떻게 구현할 수 있을지 같은 고민을 한 끝에 동일하진 않지만, 그래도 꽤 비슷하게 만들어 보았습니다. 물론 원본에 비해 제가 만든 웹은 허접한 감이 없지 않아 있지만, 그래도 '와인'이 소개되는 란에는 나름 동일하게 슬라이드 기능도 추가하고, 거의 비슷하게 구현해낸 것 같다고 스스로는 느낍니다. 그래도 꽤 뿌듯한 작업물이었어요.

 

VS Code - html

VS code - css

위 사진은 Visual Studio Code html과 css 작업창입니다. 사실 두 달 전만 해도 아니 이주 전만 해도 코딩 창에 아무것도 적을 수 없었습니다. 그냥 학원 가서 수업만 듣고, 한 귀로 듣고 한 귀로 흘리고 그랬는데 어느새 시간만 주야장천 흘려보내는 듯하여 이렇게 살면 안 되겠다 싶어서 주위 개발자 친구한테도 매주 주말 질문하고, 공부하고 직접 스스로 만들어봄으로써 그래도 나름 발전했다고 생각이 듭니다.

 

나름 이렇게 쉬운 마우소 호버(:hover effect)도 주고, 메뉴 내비게이션 부분에도 효과를 주고, 이렇게 하나하나 배워가는 맛이 쏠쏠한 요즘입니다.

 

물론, 아직 자바스크립트(Javascript)를 아예 할 줄 몰라 고민이지만, html과 css도 그랬던 것처럼 저는 분명 잘할 수 있을 거라 생각이 듭니다.

 

아무쪼록 다시 유튜브도 시작해서 웹디자인 코딩에 대해 정보도 남기고 싶기도 한데, 아직 제 수준이 그렇게 미치지 못해서 좀 더 나은 사람이 되면 정보를 나눌 수 있는 시간을 가져보도록 하겠습니다.

 

감사합니다.