[진로부트캠프 1주차 by 코멘토] 웹 페이지 개발 배워보기

 
4차 산업 혁명과는 거리가 먼 삶을 살아왔던 나.
놀랍게도 다음 학기부터 빅데이터 전공을 복수전공으로 이수하게 되었다.
그만큼 이 분야의 기초 지식이라고는 아무 것도 없었기에 겨울 방학 동안 직무 이해도를 높이고 싶었다.
그러던 중 학교 공지사항에서 발견한 것이 바로 코멘토의 진로부트캠프!
 
(동영상으로 진행되는 현직자 특강+과제+피드백)*3개 직무로 총 3주 과정의 구성.
코멘토에서 제공하는 여러 진로캠프 중 3개를 선택해 참여하면 된다.
학교에서 수강권을 제공해 비용이 무료라는 점이 매력적이었다. 
 

---

 
코멘토에서는 '직무'부트캠프와 '진로'부트캠프 두 가지 트랙을 나누어 운영하는데,
'직무'부트캠프는 한 분의 멘토와 5주 간 Zoom 화상강의를 통해 실시간 수업을 진행한다. (5회 차)
화상강의 특성 상 실시간 피드백이 가능하다는 점, 한 주제를 5주 간 다뤄 깊게 배울 수 있다는 점이 특징.
 
반면 내가 참여한 '진로'부트캠프는 정말 체험에 의의를 두는 프로그램이다.
앞서 소개한 5주 차 캠프의 1주 차 강의만 총 3개를 골라 들어볼 수 있는 것. 말 그대로 맛보기.
(이미 Zoom으로 진행했던 수업을 녹화해 재활용한다는 점에서 기분이 썩 좋진 않더라.)
피드백은 내가 과제를 업로드하면 추후 멘토님께서 코멘트를 달아주시는 식이다. (공지는 각 캠프 별 오픈채팅방으로 확인한다.)
 
내가 어떤 직무를 선택하면 좋을지 결정에 어려움을 겪는 대학생들이 찍먹해보기 좋다는 건 장점.
하지만 진지하게 실무 과제 체험을 해보고 싶다면 비추천한다.
 
* 참고로 진행 중인 캠프 분야는 IT/SW, MD/상품기획, PM, 건설/기계/기술, 경영/사무/행정, 광고/홍보, 구매, 금융/은행/보험, 기획, 디자인, 마케팅, 미디어, 생산/제조, 연구개발, 영업/고객상담, 유통/물류/무역, 인사총무, 품질이 있다.

---

 
내가 선택한 1주 차 캠프는 IT/SW 분야의 기획 및 개발 강의이다.
멘토님은 현직 개발자로, 웹 페이지를 만드는 과정을 기획부터 개발까지 소개해주셨다.
개발자가 되기까지의 과정, 개발자의 하루 일과, 실제로 하는 업무 등에 대해 간단한 설명을 듣는 시간.
강의 내용 자체는 학창 시절 듣던 진로 수업의 심화 버전? 현실판? 이라는 느낌.
 
그리고 여기서부터가 중요한데, 갑자기 나에게 웹 페이지 화면설계서 과제가 떨어졌다.
앞서 설명했다시피 나는 지금까지 이 분야와 동떨어진 삶을 살아왔다. UX? UI? 모른다.
게다가 무슨 사이트를 만들어야 하는지도 제시되지 않아 자유도가 매우 높은 과제였다.
그래도 한 번 시작한 캠프인데 수료증을 무조건 발급 받겠다는 생각으로 미친듯이 구글링을 시작했다.
 
태어나서 처음으로 메뉴구조도라는 것을 검색해보았다. flow chart나 UX/UI 설계라는 것도 처음 들어본다.
알고 보니 flow chart는 사이트 사용자들이 버튼을 누르며 따라가는 흐름을 그린 지도 같은 것이었다.
웹 사이트의 구성에 따라 아주 단순할 수도 있고, 아주 어려울 수도 있다.
위키백과 '순서도': https://ko.wikipedia.org/wiki/%EC%88%9C%EC%84%9C%EB%8F%84

순서도 - 위키백과, 우리 모두의 백과사전

 
메뉴구조도만 들어가면 되는 게 아니다. 각 화면이 어떻게 구성되어 있는지 시각적으로 제시해야 한다.
이때 직접 그림을 그려서 보여줄 수도 있고, 아니면 템플릿을 사용할 수도 있다.
중요한 건 화면 속 각 버튼이 무슨 기능을 하는지 자세하게 설명해야 한다는 거다.
요즘 IT '화면설계서란?': https://yozm.wishket.com/magazine/detail/227/

화면설계서(Wireframe)란? 평생 써먹는 제작 꿀팁! | 요즘IT

 

---

 
아마 손으로 그려도 괜찮겠지만, 나의 경우 carrd와 evernote를 사용했다.
carrd의 경우 보통 프로필 제작에 쓰이는 사이트로, 온라인 명함 만들기 같은 곳이다.
다양한 디자인의 무료 템플릿이 제공된다. 확실히 예쁘다는 느낌!
아주 쉽게 있어 보이는 웹사이트를 만들 수 있다는 게 최고의 장점. 유료 플랜도 있다.
carrd 사이트: https://carrd.co/

Carrd - Simple, free, fully responsive one-page sites for pretty much anything

 
carrd로 사이트를 만들면서 느낀 건, 만드는 그 과정 자체를 정리하면 메뉴구조도가 된다는 것이다!
나는 지금까지 carrd를 사용하면서 자연스럽게 메뉴구조도를 익히고 있었던 것이다. 자각하지 못했을 뿐.
덕분에 구조도를 만드는 건 아주 쉬웠다. 그냥 했던 과정을 다시 쓰면 된다.
 

 
평소 노래 듣는 걸 좋아해 가상의 음원 스트리밍 회사를 만들어 기업 소개 페이지를 구상해보았다.
이 녀석을 만들기 위해 spotify와 melon을 얼마나 여러 번 들락거렸는지! (모방은 창조의 어머니라고 하던데.)
한 번 사이트의 틀을 잡고 나니 자신감이 생겼다. 이제 디테일을 잡으면 된다.
 

---

 

실제 사이트 홈 화면

화면 스토리보드

 
솔직하게 고백하겠다. 과제 제출 당시에는 버튼을 누를 때마다 나와야 하는 모든 페이지를 ppt에 담지 않았다.
기획 단계니까 스크롤로 이동하게 될 화면만 담고 세부 내용은 빼도 괜찮지 않을까? 하는 안일한 생각.
그리고 당연히! 피드백에서 지적 받았다. 기획자는 버튼을 누르면 나오게 될 모든 화면을 기획서에 넣어야 한다.
결국 피드백을 받은 후 혼자서 사이트를 수정했다. 검사할 사람은 없었지만 스스로에게 떳떳한 결과물을 만들고 싶었으니.
 

---

 

carrd에서 결제창을 구현한 모습.

 
사이트를 만들면서 가장 어려웠던 건 바로 결제창 구현이었다.
'대체 내가 왜 음원 스트리밍 회사를 선택했을까!' 후회했을 정도다.
결제 과정에서 생기는 수많은 옵션과 그에 따르는 모든 화면을 구현해야 한다니.
살면서 온라인 결제를 수도 없이 해봤는데 막상 내가 하려니 어려웠다.
결국 능력 부족으로 아주 단순한 결과물이 나왔는데, 이 부분은 내 깜냥을 기르고 다시 보완해보고 싶다.
 
그리고 회사 홈페이지를 구현할 때 꼭 들어가야 하는 것들이 있다.
푸터(하단)에는 대표 번호와 사업자등록번호 등 회사에 대한 정보가 기재되어 있어야 한다.
또한, 결제 창이 있다면 이용 약관도 함께 제시되어야 한다.
아임웹 '하단 설정하기': https://imweb.me/faq?mode=view&category=28&category2=31&idx=5926

하단 설정하기

 
나는 한다면 하는 여자. 기왕 만드는 사이트 제대로 하고 싶었다.
그래서 여러 사이트의 푸터와 약관 정보를 종합하는 것도 모자라(?) 공정거래위원회까지 찾아 보았다.
덕분에 전자상거래 표준 약관을 찾았다! 이를 일부 수정해 나만의 약관을 만들었다.
공정거래위원회 '표준약관': https://www.ftc.go.kr/www/cop/bbs/selectBoardArticle.do?key=201&nttId=82530&bbsId=BBSMSTR_000000002320&bbsTyCode=BBST01
 

---

 
하나의 사이트를 기획하기까지 정말 긴 시간이었다.
사실 기획안이니 carrd를 이용해 직접 데모 사이트를 구현할 필요는 없었다. 손으로 그려도 되는 과제였다.
하지만 기왕 하는 거 제대로 된 디자인으로, 내가 해보고 싶어서 좀 더 고생해보았다.
그렇게 만든 나의 사이트 데모. >>> https://sounded.carrd.co/

SoundeD

 
아쉬운 점이 있다면 세부 화면은 만들 때 시간이 부족하다는 이유로 evernote를 썼다는 점. (ㅋㅋ...)
내가 노션을 쓸 줄 알았다면 더 좋았을 텐데. 지금 생각해보니 구글 문서를 사용해도 되지 않았을까 싶다.
이 부분도 결제창과 마찬가지로 노션 사용법을 익힌 후 같이 보완해보고 싶다.
 

---

 
직무 소개에서 그칠 수도 있는 강의였다.
어쩌면 자유도 높은 과제에 질겁하고 도망갈 수도 있었는데, 이렇게 해낸 내가 자랑스럽다.
결국 프로그램을 200% 활용하는 건 수강자의 몫에 달려있는 것 아닐까!
다음 포스팅은 2주 차 캠프 후기로 돌아오겠다.