해리포터 덕후의
포트폴리오 웹사이트 만들기
결국엔 컨텐츠!!
웹사이트를 새로 제작하게 되었다. 큰 꿈을 꾸었지만 중간에 꿈에서 깨서 겨우 완성할 수 있었다. 그냥 한번 기록해보는 포트폴리오 웹사이트 후기
컨셉 브레인스토밍
포트폴리오에는 지금의 나를 최대한 담으려고 했다. 지금의 나는 a) 재밌는 것을 원하고 b) 새로운 것을 시도하고 싶어 하고 c) 그것을 충분한 글과 약간의 그림으로 풀어내는 것을 원했다. 그래서 이미지로 심플하게 나타내는 것보다는 텍스트가 복작복작하게 어우러진 레이아웃을 생각하게 되었고 'Newspaper'라는 키워드를 뽑아내게 되었다. 이어서 어릴 적 로망이었던 해리포터의 움직이는 신문으로 브레인스토밍이 진행되었고 이를 통해 재미 요소를 충족시키고자 했다.
덤블도어~~!준비과정
1. 레이아웃 잡기
실제 신문과 해리포터 영화에 나오는 신문을 같이 리서치했다. 신문의 톤 앤 매너가 눈에 익는 것을 목표로 자료를 모아서 계속 보았다. 레이아웃을 생각하다 보니 헤드라인과 내용의 강약 조절, 어떤 내용을 어떤 폰트로 표현해야 할지, 어떤 이미지가 필요할지 등등 머릿속이 복잡해지기 시작했다.
참고한 신문 레이아웃 이미지 예시머릿속이 복잡해질 땐 일단 단순하게 그려보는 것이 좋더라. 네모 박스를 이용해 큰 틀을 잡고 임의의 더미 텍스트를 사용하여 대략적인 레이아웃을 잡았다. 컬러 없이 그레이 톤으로 레이아웃을 잡는 것은 강약을 조절하는데 큰 도움이 된다.
대략적으로 잡은 레이아웃2. 개발 빌더 테스트
디자인을 어떻게 하든 간에 개발된 모습이 최종 결과물이기 때문에 레이아웃에 최소한의 시간을 소요하고 바로 개발 빌더 테스트에 들어갔다.
처음에는 기존에 만든 포트폴리오 웹사이트(zalhan.kr)처럼 Jekyll을 사용하거나 요즘 많이 언급되는 Gatsby를 사용하여 만드는 것을 계획했다. 하지만 개발에 손을 놓은 지 너무 오래되어 엄청난 시간이 소요될 것이 뻔했다. 신문의 2단, 3단 레이아웃을 컨트롤할 자신도 없었다.. 그렇게 아주 다양한 핑계를 대고 여러 가지 개발 빌더를 찾아보기 시작했다. Wix는 (광고를 너무 많이 봐서 그런지 별로라는 생각에) 제외했고 Wordpress, imweb, Studio, Webflow 중에서 최종적으로 Webflow를 선택하게 되었다.
Webflow를 선택한 이유는 자유도와 확장성 때문이다. Webflow는 클릭으로 코딩하는 느낌의 빌더인데 HTML과 CSS 개념을 알아야 수월하게 작업이 가능하다. 러닝 커브는 약간 있지만 더 자유로운 디자인을 만들 수 있다. 가장 중요한 건 위의 빌더들을 전부 만져 봤을 때 가장 손에 맞았다. Webflow에 더 익숙해질 겸 해서 대략적으로 잡은 레이아웃을 빠르게 제작했다.
3. 안에 들어갈 콘텐츠 정리
개발 빌더를 정했으니 실제로 들어갈 콘텐츠가 필요했다. 이미지는 크기를 조절하면 되니 큰 문제가 없었지만 텍스트는 길이를 조절하는 게 쉽지 않았다. 처음에는 임의의 더미 텍스트의 길이에 맞춰서 텍스트를 작성했다. 하지만 실제 빌더에 넣고 테스트해보니 스케치 상의 길이와 다를뿐더러 반응형도 고려되니 내가 컨트롤할 수 있는 영역을 넘어섰다. 이래서 스케치로 오래 붙잡고 있는 것보단 실제로 개발하면서 맞춰가야 하나보다.
일단 콘텐츠만 집중해서 만들고 적당한 레이아웃을 만드는 것으로 방향을 수정했다. 양에 제한을 두지 않으니 오히려 콘텐츠를 만드는데 더 수월했다. 정리한 콘텐츠를 하나씩 살펴보자.
첫 번째 콘텐츠, 내 소개
자소서를 쓰는 느낌으로 나를 문장으로 써 내려갔다. 주기적으로 자신을 정의하는 문장을 생각하다 보면 요즘 내 상태가 어떤지 잘 나아가고 있는지 알 수 있어서 매우 좋다. (강추!)
‘이토록 쉬운 Sketch’ 저자 서한교입니다. Freelance Designer로 활동하고 있으며 UX/UI, 브랜딩, 일러스트를 작업하고 있습니다. 특히 제품의 가치를 App, Web에 담아내는 것을 즐깁니다. 경험하고 배운 것을 기록하고 공유하는 과정에서 함께 성장한다고 믿습니다. 치앙마이에서 디지털 노마드를 시작했습니다.
두 번째 콘텐츠, 나의 과거, 현재, 미래 정의하기
이전에 배달의 민족 김봉진 대표님의 페이스북 글 중에 "자신을 정의할 수 있어야 자신의 주인이 될 수 있다"는 내용의 글을 봤던 기억이 있는데, 이번에 해보게 되었다.
PRESENT - 프리랜스 디자이너, ‘이토록 쉬운 Sketch’ 저자, 스케치 강사, 디지털 노마드
FUTURE - 시간, 취미 부자, 바르셀로나 피자 맛집, 크리에이티브 스튜디오, 독립출판사 CEO
PAST - MyMusicTaste 졸업, Code States 졸업, 시각디자인과 졸업
세 번째 콘텐츠, 뉴스
내가 무언가를 했을 때 그것을 더 알리는 영역을 만들었다. 지금은 책 출간 소식을 알리고 있다. 뉴스의 광고 영역을 참고하여 진행했다. 아마 이 영역이 계속 늘어나지 않을까 싶다.
사.. 사는 곳은 여기 : D http://www.yes24.com/Product/Goods/76485550
네 번째 콘텐츠, 추천 아티클
글을 많이 쓰려고 하고있지만서도 동시에 많이 읽고 있다. 쓴 글과 읽은 글 중에서 추천하고 싶은 아티클을 모아놓는 영역을 만들었다. 이 부분은 따로 확장시키고 싶긴 하지만 요즘은 Surfit에서 워낙 잘 보여줘서, 일단은 4개 정도의 아티클을 아카이빙 하는 용도로 만들었다.
다섯 번째 콘텐츠, 디자인 작업물 정리.
가장 많은 시간이 소요됐다. 작업했던 것들을 간단하게 정리해서 한 장 짜리 이미지로 보여주자고 시작했던 것은 결국 비핸스에 업로드하자는 생각으로 확장되어 엄청난 시간을 들이게 되었다.
https://www.behance.net/zalhan
여섯 번째 콘텐츠, 이력서
앞으로 이력을 지속적으로 업데이트하기 위해서 스케치로 이력서 폼을 만들었다. 스케치 파일은 나중에 기회가 되면 공유하려고 한다.
일곱 번째 콘텐츠, 해리포터 에셋
해리포터 컨셉은 완성된 음식을 돋우는 역할이기 때문에 마지막에 작업했다. (참느라 힘들었다ㅠ) 오래 붙잡고 있으면 재미야 있겠지만 과하지 않으면서 심심하지 않은 적당한 정도로 배치하려 했다. 아래 이미지는 컨셉 이미지이고 실제 웹사이트에 일부를 적용했다.
4. Webflow로 본격적으로 만들기
이번에 Webflow를 본격적으로 써보니 너무 좋더라. 나중에 기회가 된다면 코딩없이 포폴만들기 클래스를 진행해보는 것도 좋을 것 같다는 생각이 들었다. Webflow 관련 자세한 내용은 다음에 다루는걸로!
5. 그래서 완성본은..?
아래 링크로 방문 가능하다. (크롬에서 가장 잘보인다. 크롬짱!)
6. 되돌아보기 - 결국엔 콘텐츠
좋은 재료로 좋은 요리가 나오듯이 좋은 콘텐츠가 좋은 포트폴리오를 만드는 것 같다. 일단 웹사이트를 만들고 콘텐츠를 채우려고 했던 게 많은 시간을 잡아먹었다. 그냥 콘텐츠 정리가 하기 싫어서 그랬던 것이다. 이렇게 말하면서도 이후에 작업했던 것들 정리하기를 미루고 있는데 하나의 프로젝트가 끝날 때마다 정리하는 시간을 가져야 할 것 같다. (제발!!)
-
끝!
'이토록 쉬운 스케치' 저자 서한교입니다.
치앙마이에서 Freelance Designer 그리고 백수로 살아가고 있습니다.
