서비스 기획자의 포트폴리오 사이트 개발
기획부터 개발까지 #3
굉장히 오랜만에 글을 쓰는 것 같다.
요즘 시간이 나면 사이드 프로젝트를 진행하느라고 글을 쓸 여유가 없었다.
빨리 끝내버리고 싶은 마음이 커서 욕심을 부렸었는데
생각해 보니 지금 당장 이직할 것이 아닌데 서두를 필요가 무어가 있는가 싶어서
조금 여유를 가지고 진행해보려고 한다.
시간 날 때가 아니라 시간을 억지로 만들어서 작업을 진행했더니 프로젝트가 꽤 많이 진행됐다.
프레임은 거의 다 잡혔고, 내용을 채우고 디자인만 손 보면 되는 수준이다.
이 정도면 프로토타입 정도는 되는 것 같다.
이전의 포트폴리오도 Wix를 통해 사이트로 만들었어서 이미 머릿속에 대충 윤곽이 잡혀 있었기 때문에 더 빨리 진행됐던 것 같다.
아무튼, 진행상황과 개발의 어려움에 대해 공유해보고자 한다.
이전 글에 서술했다시피 문서가 이미 내 머릿속에 있다고 판단했기 때문에
굳이 설계서나 요구사항명세 같은 문서를 작성하지는 않았다.
그래도 최소한의 와이어프레임은 있어야 했기에
아이패드에 드로잉 하여 간략한 와이어프레임만 작성하였다.
대략 전체 페이지에 공통적용될 상단 네비나 플로팅버튼을 정의했고
각 페이지 구성 요소를 정의했다.
여기에 메인페이지까지 더해서 총 4장의 와이어프레임만 잡고 작업을 시작했다.
자주 하는 질문은 전부터 포트폴리오 사이트에 넣고 싶어서 고민했던 부분인데
이번에 사이트를 직접 만들면서 아예 넣어버렸다.
뭔가... 면접관 입장에서 어이없을 거 같기도 해서 고민했는데
뻔히 예상되는 형식적인 질문을 주고받는 시간을 줄일 수 있다면
면접자나 면접관이나 서로 좋지 않겠는가..?
사이트는 반응형으로 제작했고
웹/태블릿/모바일 3가지 디스플레이를 기준으로 잡았다.
Breakpoint
모바일 : max-width (767px)
태블릿 : max-width (1023px)
PC : min-width (1024px)
Container
모바일 : 360px
태블릿 : 600px
PC : 1080px
Breakpoint와 Container는 각각 위처럼 잡았다.
디자인이 아직 들어가기 전이라서 메인 컬러는 Gray로 작업을 했고,
오브젝트 구분도 별도 css 기교 없이 border 처리만 했다.
소개 페이지
소개 페이지에 인사말과 간략한 내 소개글을 적고
하단에는 경력사항을 기재했다.
[자세히 보기] 버튼을 클릭하면 모달이 오픈되고 각 회사에서 진행했던 프로젝트를 확인 가능하다.
기술 페이지
기술 페이지에서는 직무 별 다룰 수 있는 툴을 기재했다.
개발 툴은 잘 다루지 못해서 이미지가 1장이지만
기획이나 프로젝트매니징 툴은 이미지가 여러 장 들어가서
이동 버튼을 누르면 캐러셀로 이미지 변경도 가능하게 작업했다.
프로젝트 페이지
진행한 프로젝트를 프로젝트 유형으로 분류하여 표기했다.
이 페이지 또한 [자세히 보기] 버튼을 클릭하면 모달이 오픈된다.
모발에서는 프로젝트의 [문제 정의/목표/가설/성과]를 탭으로 분류하여 확인 가능하다.
자주 묻는 질문 페이지
예상 질문과 답안을 작성했다.
우측의 오픈 버튼을 누르면 아코디언이 열리는 형태로 구현했다.
메인 페이지 상단의 이미지는 지루하지 않게
unsplash API를 활용하여 새로고침할 때마다 다른 이미지로 변경되게 구현했고
문의하기 기능은 채널톡 API를 활용했다.
이 외에는 프레임워크나 라이브러리를 전혀 사용하지 않고 최대한 직접 코드를 작성해서 구현하려고 노력했다.
계속 개발 업무를 하는 개발자라면 효율이 최우선이겠지만 나는 겉만 핥을 기획자이기 때문에
최대한 내 손으로 직접 경험하며 배워보고 싶은 생각이 컸다.
평소에도 '개발자들 정말 고생 많이 한다' '쉬운 일 아니다'라고 지나가듯 생각하긴 했지만
직접 해보니 정말 더더 쉬운 일이 아니다.
뭐 하나 막히면 3~4시간을 잡고 씨름해야 하고
여기서 잘 되다가 저기 코드 고쳤더니 저기가 터지고...
진짜 너무 머리 아프고... 스트레스받는데... 그러다 잘 구현되면 재미는 확실히 있다.
아무튼, 개발을 직접 해보니
늘 깊게 이해 못 하고 무심코 지나가던 개발자들의 대화들이 전부는 아니더라도 조금씩 이해되기 시작했다.
"쟤네도 하던데 우리도 이 기능 넣죠" 하고 별생각 없이 내뱉던 내 말들이 '참 무책임한 말이었구나' 하고 지난 나의 기억들을 한번 더 곱씹어 보게 됐다.
개발 진짜 그만하고 싶고 어려운데 은근히 재밌어서
앞으로도 자잘 자잘한 사이드 프로젝트를 혼자 진행하게 될 것 같다.
나도 할 수 있으니까 다른 비개발자 분들도 포트폴리오 사이트 개발을 도전해보셔도 될 거 같다.
