웹퍼블리셔 프론트엔드 개발자 국비지원 도전기-3

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

 

2021년 04월 15일부터 7일간 포토샵과 일러스트를 맛보는 시간을 거쳐, 정확히는 04월 22일부터 현재까지 약 50일 간 국비지원을 받아 웹퍼블리셔 / 프런트엔드 과정을 듣고 있습니다. 아시는 분들은 모두 아실 테지만, 사실 국비지원 과정을 통해 프런트엔드 개발자가 된다는 건 생각보다 어렵고, 국비지원과정 커리큘럼 과정 자체가 프런트엔드까지 다루기엔 굉장히 시간이 부족합니다.

 

그래서 저도 처음엔 프런트엔드 과정까지 배울 수 있겠구나 싶었지만, 생각보다 배울 컴퓨터 언어가 굉장히 많기도 하지만  HTML, CSS, JavaScript를 배우는 것도 버겁지만, 이를 최대한 활용하는 수준까지 되는 것도 힘들 것 같다는 생각이 들더라고요.

 

그래서 두 달 가까운 시간 동안 학원을 하루도 빠짐없이 최선을 다한 결과 이제 겨우 HTML이 무엇인지, CSS가 무엇인지 이해하게 되었습니다.

내가 만든 UI(User-Interface)

위 사진은 제가 만들어 본 Web-page UI(User-interface)입니다. 쉽게 이야기해서 웹페이지에 접속했을 때, 우리가 가장 먼저 바라보는 홈페이지의 모습이라고 생각하면 될 듯해요. 제가 초보자인 만큼 3일 정도 걸려서 HTML, CSS, JavaScript를 활용해서 만들어봤답니다. 비교적 단순한 UI이지만, 생각보다 머리를 많이 써야 하더라고요. 반응형 디자인까진 제가 너무 지쳐서 못하겠더라고요.

Header와 Section 1 부분입니다. 

 

비교적 시원시원한 분위기를 주고자 했습니다. 수업시간에 배운 것들을 최대한 활용하려고 했습니다. 사진엔 보이진 않지만 Menu 내비게이션에도 호버 효과와 밑줄 효과도 주었답니다. UI는 기본 레이아웃을 짠다고 생각하면 되는데 확실히 사진과 폰트만 잘 골라줘도 홈페이지의 분위기가 꽤 감각적으로 보이는 듯합니다. 물론 제가 만든 건 아니지만요. 😭

두 번째 Section 2입니다.

 

두 번째 섹션도 사실 크게 어려운 건 없었습니다. 그냥 섹션 공간을 3등분으로 나눠주고, 거기에 이미지를 삽입. 후에 텍스트와 아이콘을 넣어 블로그 스타일로 만들어 보았습니다. 확실히 첫 번째 사진 너비가 다소 눌린 게 보이네요. 수정을 해야겠어요.

 

섹션2 - HTML

섹션2- CSS

제가 처음으로 만들어 본 포트폴리오(?)라고 하긴 그렇지만, 포트폴리오라서 코드 창이 꽤 지저분합니다. 저는 div 태그만 활용했습니다. 그냥 제일 편하더라고요. 그래도 뭔가 저 혼자 막연했던 코딩을 하면서 이렇게 결과물이 나오니 엄청 뿌듯하더라고요. 역시 저는 이렇게 창작적인 일을 할 때 오는 희열감을 놓칠 수가 없어요. 코딩 창이 두서없고, 지저분하지만 지금 단계에서는 어떻게든 실행만 되면 되니까!

그리고 가장 애먹었던 이 부분 바로 Section 3.

 

이미지 20개를 좌, 우로 정렬해서 스크롤 효과를 주고 싶었는데 스크롤은 어찌어찌 구글 검색을 통해 해결했지만, 상단 내비게이션과 연동하여 스크롤 효과를 주는 데에는 성공하지 못했어요. 역시 자바스크립트를 잘해야 해요. 좀 더 공부를 해서 나중에는 더 멋진 포트폴리오를 만들 때 한 번 적극적으로 활용해 볼 생각이에요.

마지막 Section 4는 다양한 효과를 주고 싶었으나, 욕심을 잠시 뒤로하고 딱 이 정도에서 마무리하기로 했습니다.

 

그리고 git-hub(깃허브)에 잔디를 채우기 시작. 사실 그동안 2달 동안 지속적으로 해왔어야 했는데 제가 많이 게을러서 이제야 시작했네요. 너무 아쉬운 것. 깃허브는 코드 소스 파일을 공유할 수도 있지만, 성실성을 볼 수도 있는 부분이라 취준생들에겐 성실함을 증명할 수 있는 가장 쉬운 방법인데 아쉽지만 앞으로 열심히 해야겠어요.

 

오랜만에 찾아뵈었네요.

 

현생이 너무 힘들어서, 블로그를 자주 못했네요. 그래서인지 애드센스 수익도 10일 동안 3달러...

 

전멸이다.

 

그래도 멋진 프런트엔드 개발자가 되기 위해 노력 중이니 종종 더 알찬 콘텐츠로 찾아뵐게요!

 

그럼, 아디오스~