커피창고 심리테스트 작업기

 

홀홀 오늘은 디자인부터 배포까지 모든 걸 한 얘기를 해주도록 하겠어요

심리테스트 작업 의뢰는 방명록이나 비밀댓글로 이메일 주소 남겨 주시면 연락드리겠습니다.

 

커피 유형 테스트 with 커피창고

 

 

기

추석이 가까워오는 9월의 어느 날..

저는 항상 인터넷을 할 때 깃허브와 티스토리를 켜놓는데요, 그 날따라 티스토리 종모양 알림 버튼에 주황색으로 뭔가 있더라구요.

저 같은 변방의 블로거에겐 알림 하나하나가 귀하거든요. ㅋㅋㅋ

뭘까 하고 열어 봤는데, 누군가 방명록에 심리 테스트 의뢰를 원하신다는 글을 남기고 가셨습니다.

그걸 본 순간 심장이 빠운스빠운스

 

사실 프로그래밍 시작하고 이걸로 수익을 낸 적은 없습니다. 뭐 학식봇할 때도 돈 한 푼 안 받았고 후원받거나 한 것도 없구요. (애초에 돈 벌려고 시작한 게 아니었습니다 ㅋㅋㅋ)

아직 취업도 안 했고, 이렇다할 인턴이나 그런 것도 안 했고 (3학년이라 이제 슬슬 준비해야하는데.. -_-) 그래서 처음엔 걱정이 좀 됐습니다. 과연 할 수 있을까?

근데 그 걱정 오래 하진 않았습니다. 일단 하면 미래의 내가 어떻게든 하겠지? 라는 다소 가벼운 마음과 어차피 막상 시작하면 제가 더 몰입해서 할 거라는 사실을 그냥 저 스스로 이미 알고 있었기 때문입니다. 중간고사 기간도 점점 가까워왔고, 노드 수업도 진행해야 하는 등 바쁜 일이 많았지만 결국엔 하기로 했습니다. 안 하면 더 후회할 것 같아서요.

 

 

승

컨택과 계약, 작업 진행 과정 공유 및 피드백 등은 거의 이메일로 하고, 카카오톡 메신저도 이용했습니다.

전화로 하면 상당히 길어질 이야기였고, 처음에 의뢰하셨을 때는 윤곽이 거의 잡히지 않은 기획 상태에서 전달만 받았기에 유선상으로 컨택해도 할 이야기가 그다지 많지 않았을 것 같습니다.

사실 제가 전화를 별로 안 좋아하기도 합니다. ^^; 이메일로 하면 기록이 남는다는 것도 장점이구요.

일단 견적서 쓰고 계약서까지 다 쓴 다음에 일을 진행했는데요. 심리테스트의 내용이야 어찌됐든 페이지별 디자인 작업이 우선이었습니다. 솔직히 구현이나 그런 건 구현하는 사람 입장에서 중요한 거지 어찌 보면 사용자 입장에서는 디자인이랑 사용자 경험이 제일 중요한 거 같더라구요.

제가 기존에 그냥 공부하려고 만든 이미지 테스트는 디자인이 솔직히 별로입니다.

그 땐 몰랐는데 지금 보니까 이건 뭐.. 왜 그렇게 크게 만든 걸까요? ㅋㅋㅋ 이래서 다른 사람 피드백이 중요한가봐요.

 

저는 원래 와이어프레임을 그냥 A4 용지 가로로 놓고 손으로 대충 그립니다. 저에게 이 작업은 세부적이고 굉장히 완성도가 높은 디자인을 위한 것이라기보다 HTML 웹문서 구조를 잡고 어떻게 스타일을 줄지 정도만 생각하는 것이라서 손으로 그리는 것만으로도 충분했는데요.

하지만 노임 받고 하는 일에 아 이렇게 할 수는 없다 싶은 생각이 들어 '피그마'를 쓰기로 했습니다.

 

제플린이나 스케치 같은 다른 제품도 있었지만 피그마를 쓰기로 한 이유는 친구의 추천 덕분입니다.

스케치 툴이 과연 뭐가 좋은가 싶어 오랫동안 쓰기를 거부했는데, 막상 써보니 굉장히 좋았습니다.

구체적으로 뭐가 좋았는지는 다른 스케치 툴을 안 써봐서 콕 집어 말할 수는 없는데, 일단 종이로 하는 것보다 다른 사람에게 더 자신감있게 공유할 수 있다는 점이 좋습니다. 게다가 작업 공유자를 추가할 수 있어서 나중엔 담당 대리님도 직접 시안에 메시지 남기는 식으로 피드백을 주실 수 있었습니다.

 

디자인은 여러 버전으로 준비했지만 많이 버렸고, 하나 고른 것도 수정을 꽤 많이 했습니다.

사실 개인적으로는 개발보다 디자인이 더 힘들었습니다. 저를 잘 아는 사람들은 알겠지만 제가 PPT에 도라에몽만 안 넣을 뿐이지 미감이 그렇게 뛰어난 편이 아니거든요. 그래서 디자인까지 한 번에 맡기시는 데에 약간 부담됐는데, 담당 대리님께서 대략적인 디자인 틀은 주셨고 저도 이렇게 하면 어울리겠다~ 싶은 것들을 몇 가지 버전으로 준비해서 보여 드리는 과정에서 무리 없이 나름 알흠다운 디자인이 나왔습니다.

카드형으로 예쁘게 뽑혀 나온 것을 보니 우와 이걸 내가 했다니! 나도 이제 어엿한 일반인(?)의 미감을 얻게 되었군! 싶어 뿌듯했답니다. 하하하

 

 

시작 페이지

질문지 페이지

결과 페이지

 

 

전

사실 피그마 단계에서 디자인을 저렇게 디테일하게 꾸미지는 못했습니다. 디자인이 완료될 때까지도 자료를 다 못 넘겨받았기 때문이죠.

실질적으로 작업은 추석이 지난 10월 5일부터 디자인+배포까지 총 1주일이 걸렸습니다. 저 디자인이 나온 게 목요일이었고요.

금요일이 한글날이라 그 전날인 목요일에 디자인 컨펌을 무조건 받아야 주말 땡겨서 일을 할 수가 있었습니다.

그래서 목요일에 인공지능 강의만 듣고 거의 손에 신들린 수준으로 빠르게 작업해서 목요일 오후 6시쯤 최종 컨펌! 받았습니다. 하지만 실제 웹페이지에 올리기 전까지 디자인 작업은 끝나지 않습니다. 끝날 때까지 끝난 게 아니라는 말이 있는 것처럼 배포 전까지도 자잘자잘하게 계속 바뀌는 게 디자인 아니겠습니까? (아님)

시험이 열흘 정도 남았는데 한글날에는 팔자 좋게 친구와 함께 공원 산책하고 밥 먹고 영화를 봤답니다. 이렇게 하루 쉬어주는 날이 있어야 또 다음날 일이 잘 되더라구요.

 

주말에는 정말 밥만 먹고 계속 일만 했습니다.

왜 주말에 일했냐? 하면... 아마 이 때쯤이었던 거 같은데 자료 찾고 쇼핑몰 구경도 할겸 몇 번 들어갔다 나오니까 제가 커피에 관심 있는 줄 알고 광고 계정이 추천에 막 뜨기 시작하더라고요.

그래서 봤는데... 이걸 보고... 일을 안 할 수가 없었습니다...

 

 

그리고 뭐 프리랜서 좋다는 게 뭐겠어요. 평일에 공부도 하고 강의도 들으려면 주말 시간 조금 반납하고 일해야죠 하하

사실 일정을 재촉당하거나 그런 건 절대 없었는데, 시험 공부를 할 시간을 빼려면 가급적 단시간에 집중해서 퀄리티 좋게 만들어서 얼른 납기하는 게 유리해서 주말에 어차피 공부도 안 되는 거 그냥 코딩 열심히 했습니다.

 

마치 이 짤이 된 기분이었어요

 

사실 저의 개인 프로젝트는 HTML+CSS+JS만 사용했는데 이번 프로젝트에서는 Vue.js + Nuxt.js 조합으로 한 번 만들어 봤습니다. 뭐 특별히 소스 코드를 숨겨달라 이런 조건이 있지는 않았지만, 마침 Vue를 조금 배우고 있던 터라 좋은 기회다 싶어서 Vue로 했습니다. Vue, 쉽다면 쉽고 어렵다면 어려운... 쉬운 건 아마 제가 뉴비의 입장에서 썼기에 쉬운 것이겠지요... 여튼 Vue가 좋더군요. 전 Vuex까지 다룰 시간은 없어서 Vue에서 정말 간단하게 상위-하위 컴포넌트 간 props 주고 emit 붙여서 데이터 전달하는 방식으로 코딩했는데 Vuex까지 썼다면 정말 확실하게 공부했을 것 같지만 시간이 부족한 관계로... ㅎ 그래도 구현에 모자람은 없었습니다.

여기에 정적 호스팅을 위해 Nuxt.js까지 붙여 봤는데요. Vue-cli로 배포 파일을 만들 수 있었던 것 같은데 굳이 Nuxt를 선택한 건 어차피 나중에 Vue로 프로젝트할 때도 Nuxt를 쓸 확률이 높은데 그냥 지금부터 써보자 하는 생각이었습니다.

처음에는 Nuxt 구조를 파악하느라 시간을 좀 썼습니다. Nuxt 가이드도 읽어보고 검색도 해보고... Github Pages에 배포가 잘 안 돼서 여러 가지 방법을 찾다가 뜻밖에 nuxt.config.js에 신경을 더 많이 썼습니다. 여기서 메타 태그도 넣을 수 있고 SEO에 필요한 모든 걸 할 수 있어서 참 잘 썼습니다.

이 때 바빠서 삽질한 걸 기록으로 많이 남겨두지 못했는데 좀 아쉽네요. 지금 개발일지가 거의 초등학생 일기 수준으로 전락하고 있는 거 같은데 ㅎㅎ; 여튼, 심리테스트 페이지 작업이 그렇게 어려운 작업은 아니라서 수월하게 마쳤습니다.

 

 

결

실질적 개발은 이틀 안에 끝났는데, 추가로 디자인 수정 요청에 자잘자잘한 부분을 수정했습니다.

도메인을 구매 후 연결하시기를 원해서 월요일에는 도메인 연결하는 작업을 했구요. 사실 도메인 연결 작업은 한 번도 해보지 않은 작업이라 약간 긴장됐는데 생각보다 쉬웠습니다. 호스팅 케이알에서 구매해서 깃허브 페이지에 바로 붙였습니다. netlify를 써볼까 했는데 그냥 깃허브 페이지로도 충분할 것 같았고, 역시 충분했습니다. ㅎㅎ

사실 도메인 연결이 되긴 했는데 계속 로딩 화면이 떠서 도메인 연결이 잘못된 줄 알았습니다. 그러나 알고 보니 빌드에서 뭔가 문제가 있었던 거였고... 이 삽질을 1시간 동안 멈추지 못했고 끝내 프로젝트를 새로 만들어서 다시 처음부터 옮겨넣는ㅋㅋㅋㅋㅋㅋㅋ 작업을 했습니다. 웹팩 빌드 과정에서 뭔가 문제가 생기긴 했는데 그게 구체적으로 어디서 오는 건지는 모르는 거죠. 아마 중간에 삘 받아서 커밋을 차마 못 한 그 수정 사항에 문제가 있었을 텐데 후회했을 때는 이미 너무 멀리 와버렸죠.. 여러분은 꼭 작게작게 커밋을 많이 하시길 바랍니다. 그래도 저는 그 프로젝트할 때 나름대로 커밋을 정말 열심히 한 편이었는데 그 분(?)이 한 번 왔다 가시면 상황은 너무 많이 진전이 되어있죠...

여튼 옮기면서 빌드에 문제가 생기지 않을까 하고 계속 테스트를 해봤는데 신기하게도 문제가 없더라구요. 대체 어디서 온 걸까요 그 에러? 여전히 모릅니다.

아무튼, 새로 옮긴 프로젝트에는 에러도 생기지 않고 속 썩이는 일 없이 잘 되었습니다! 도메인 연결도 문제 없고, 파비콘도 제대로 달았고, 메타 태그와 오픈 그래프 이미지, URL 등등 SEO 작업까지 월요일에 모두 마쳤습니다.

화요일에는 자잘한 수정을 했는데 뭐 인상깊은 수정을 한 건 아니고 질문지의 대답이 길어지면서 카드를 약간 길게 늘이고 글자 정렬을 좀 손보는 정도였습니다.

그러고 난 뒤에 진짜진짜 최종 컨펌이 딱 떨어지는데 정말 행복했습니다!! 

실제 홈페이지에 이벤트로 올라간 건 하루였나 이틀 지나서 일이었는데요. 제가 개인적으로 만든 테스트보다 더 이용자 수가 많은 것 같아서 왠지 뿌듯합니다. ㅋㅋㅋ 물론 제가 했다고 알아봐주는 사람은 없지만, 그래도 왠지 기분이 좋더라구요. 

 

커피창고, 홈카페의 시작

위의 링크는 제가 작업한 심리테스트를 맡겨주신 쇼핑몰 링크입니다.
사실 쇼핑몰 회원이 아니면 심리테스트를 해도 딱히 이득은 없는데요.

개발자의 덕목... 커피 아니겠습니까? 물론 전 이상하게도 커피 카페인이 안 받아서 차밖에 못 마시지만...

드립커피와 홈카페에 관심 있으신 분들은 구경해보시고 심리테스트 하면 1000원 쿠폰은 그냥 주는 걸로 만들어뒀으니까 참고해보세요.

참고로 저는 노임 빼고 아무것도 받지 않았지만 저에게 믿고 맡겨주신 게 감사해서 앞광고해봅니다 ㅋㅋㅋㅋ

쇼핑몰 번창하시길 바랍니다☆★☆