[작업기] designer's portfolio website - 디자인부터 한땀한땀 구현까지

나의 3번째 포트폴리오 / 아카이브 사이트. 아직 다듬어야하는 부분이 많아서 ver 1 정도로 생각하고 있다. 

 

 

포트폴리오용 웹사이트를 직접 기획하고 구현한 과정을 공유합니다. 전문 개발 / 퍼블리셔가 아닌 코딩 걸음마 디자이너가 어떤 이유로, 어떤 과정으로 작업을 했는지를 두서없이 적어보려고 합니다. 웹사이트 작업을 염두에 두고 계시는 분들에게 참고가 되길 바랍니다. 

 

https://seungmee-lee.com 

seungmee-lee-archive

 

 

 

삽질의 시작 - 오 나 코드 좀 좋아하네?

처음으로 내 홈페이지를 만들었던게 15년 정도였을까. 가벼운 마음으로 배웠던 html css 한달짜리 수업이 끝난 후부터 배운 내용 복습을 하겠다고 만들기 시작했던 것 같다. behance나 블로그 등 쉬운 방법이 훨씬 많지만 내가 짠 레이아웃 안에서 내 작업을 보여주고, 이런 저런 인터랙션을 시도해보고 싶다는 이유였던 것으로 기억. 모든 프로젝트가 개별 html 파일로 짜져있어서 하나 수정하려면 모든 코드를 수정해야하는... 매우 비효율적인 구조였을 뿐더러, 반응형으로 만들기 쉽게 다 화면 비율에 비례하게 짜두어서 곤란한 점이 한두가지가 아니였다. 문제도 많고 고생도 많이 하지만 그래도 그 다음 웹사이트를 만들어야겠다고 생각했던 이유는

1. 코드로 움직임이나 인터랙션을 구현하고, 누구든 들어와볼 수 있다는 점이 꽤나 유용하고 재미있었다. 오 나 코드 좀 좋아하네?
2. 내가 원하는 디자인으로 내 공간을 구축하는 느낌. 처음부터 끝까지 삽질이긴 하지만, wix같은 사이트를 이용해보면 편리한 만큼 자유도에 한계를 많이 느꼈었다. 코딩으로 직접 만들면 어쨋튼 자유도는 무한이고, 조금만 더 잘 만들면 괜찮은게 나올 것 같은 기분이 계속 든다. 

 

 

두 번째 웹사이트 - 눈은 높고 아는 건 없고

그래서 그 웹사이트는 잠깐 거쳤다가 바로 두번째 웹사이트 작업을 시작했다. 한창 졸업전시와 연구실, 취업준비를 하던 2017년에 만들었던 것으로 기억. 작업하면서 디자인에 집중해도 모자란데 홈페이지를 구현하겠다고 이러고 있는게 맞는 행동인지, 작업하는 과정에서도 고민을 엄청 많이 했다. 그 과정에서 득도, 실도 많았다. (도메인을 옮기면서 두 번째 웹사이트는 사용했던 리스소들을 netlify에 올려뒀다. 지금 다시 보니 이걸 왜 이렇게 만들었지? 생각이 드는 부분들이 너무 많다. 링크는 여기) https://smlweb-before.netlify.app

archive_seungmee_lee

 

아무 생각없이 시작했던 첫 번째 웹사이트와 달리, 이 작업을 하기 전에는 몇 가지 중점 사항을 뒀었다. 

1. 누구를 위한 웹사이트인가? 이 웹사이트에 누가 방문하는가?

웹사이트를 구축할 때의 가장 중요한 점은 이 웹사이트에 누가 들어올 것인지이다. 하지만 첫 웹사이트는 이야 코드 신난다! 재미있다! 라는 마음으로 그냥 만들다보니 그런 점은 전혀 고려하지 않고 내 재미를 위해서 만들었다. 포트폴리오이자 내가 어디에 가서 누군가에게 갑자기 내 작업을 보여줘야할 때 쓸 용도로 만드는 웹사이트였기 때문에 나에 대해서 모르는 사람도 몇 가지 분류 안에서 나의 어떤 작업을 보고 싶은지를 고를 수 있어야하고(works 페이지 레이아웃의 중요성), 웹사이트 안에서 길을 잃으면 안된다. 

또 다른 문제점은 속도였다. 포트폴리오 웹사이트 특성상 이미지가 많고 사이즈가 큰데, 사용자들은 절대 이미지가 뜨기까지 기다려주지 않는다. 특히 영어로 웹사이트를 만들었던 이유는 해외 취업 준비를 위한 이유가 컸는데, 외국에서는 더 느릴게 뻔하고... 그래서 웹사이트 속도 최적화 하는 방법에 대해서 많이 알아보고 많이 개선했었다. 

 

2. 구축한다는 관점에서 나 또한 웹사이트의 user

구축하고 관리하는 나 또한 이 웹사이트의 사용자라고 생각했을 때, 이전 웹사이트는 관리가 거의 불가능한 상태였다. 한 가지를 바꾸고 싶어도 프로젝트별로 html파일을 다 수정해주어야했고, css 라벨링도 엉망이었다. 다음 웹사이트에서는 이런 점이 수정이 되어야 지속적으로 수정하고 프로젝트를 업데이트할 수 있겠다는 생각이 컸다. 하지만 코딩 지식과 능력의 부족으로... 이 홈페이지 또한 몇 가지 기능을 제외하고 모든 프로젝트가 개별 html와 css로만 구현되어있다. 옆에서 작업하는 걸 본 친한 동기언니가 이 기능을 css로...? 라고 의문스러워 하면서도 css로라도 구현한게 대단하다고 할 정도로 주먹구구 코딩이었다. 대신 프로젝트 레이아웃을 css 하나에서 최대한 커버가 가능하게 하는게 그 당시 나의 최선이었다. css 파일 하나로 모든 프로젝트를 관리하다보니 css 파일 안은 엄청 복잡하고, 프로젝트 별로 이런 저런 예외가 생기면서 결국 html 안에 스타일을 더 정리해주는 등 첫 웹사이트와 큰 차이가 없어졌다 결국엔. 

 

3. 브랜딩의 관점

어쨋튼 개인 웹사이트 구축의 궁극적인 목적은 온라인 상에서 나를 다른 behance나 wix를 통해서 남들과 같은 틀 안에서 작업을 보여주는게 아니라, 나의 방식대로 내 작업, 나에 대해 이야기 하기 위함이다. 이전 웹사이트에서는 그런 부분에 대한 고려는 전혀 없이 시작했지만, 엉성한 레이아웃이여도 내가 원하는 방식으로 구현된, 내 색이 담긴 웹사이트라는 점 하나는 굉장히 마음에 들었다. (주변의 반응도 와 정말... 너스럽다. 라는 말을 많이 했다. 그 웹사이트에서 딱히 칭찬할 구석이 없기 때문이기도 했겠지만 ㅎㅎ) 다음 웹사이트는 미리 '나스러움'에 대한 이미지적 기획이 필요하다는 생각을 하게 된 것 같다.

 

4. 누가, 어떻게 이 웹사이트를 와서 보고 가는가 

hotjar(www.hotjar.com/)라는 툴에 대해 알게 된 것도 두 번째 웹사이트를 구축할 때였다. 웹사이트에 적용해두면 실제 방문자가 어떤 식으로 인터랙션을 하고, 어디에서 길을 잃고, 어디를 가장 많이 보는지를 알 수 있도록 스크린 레코딩, 히트맵 등의 형태로 정보를 알 수 있는 서비스이다. 막연하게 웹사이트 어때? 라고 친구들에게 물어보는게 아니라 실제로 사용자가 어디서 인터랙션을 헷갈려하는지, 다른 디바이스나 브라우저에서 어떤식으로 보이는지를 확인할 수 있다보니 어떤 부분을 수정해야할지가 확실히 보였다.

웹사이트를 만드는 작업을 떠나서 사용성 테스트를 해볼 수 있는 좋은 경험.

 

 

 

 

 

 

그리고 세 번째 웹사이트 - 디자인도 중요하지만,

나름 두 번째 웹사이트는 오래 사용했다. 적극적으로 홍보하거나 쓰진 않았지만, 포트폴리오 공유할 때나 발표할 때 가끔 이용하기도 했고. 하지만 세 번째 웹사이트를 처음부터 새로 만들어야겠다고 생각한 이유는 디자인 개선도 있지만 무엇보다도 효율성에 대한 문제였다. 19년부터 기획을 시작했고, 그 때쯤 Framer라는 툴을 적극적으로 배우고 사용할 때여서 그 때 React라는 Javascript 프레임워크에 대해서 처음 알게 되었다. 이 때까지만 해도 Javascript 코드를 여기저기서 긁어와서 어설프게 합칠 줄 아는 정도의 실력이었지만, React를 배우면서 Javascript에 대한 개념도 좀 다졌고, html/css로 겨우 애니메이션 효과나 hover에 대한 스타일링 정도로 인터랙션을 구현하다가 React 를 배운 이후에야 제대로 내가 생각하는 웹사이트의 기능이나 동작을 구현할 줄 알게 되었던 것 같다.

React에 익숙해지기 시작하면서 웹사이트도 React로 만들어야겠다는 생각이 들었고, 앞선 두 웹사이트에서 가장 큰 문제였던 코드 관리 / 효율성 문제를 해결할 수 있었다. 반복해서 사용되는 요소나 레이아웃을 컴포넌트화해서 다른 페이지에서 재사용할 수 있게 했고, 내가 만드는 컴포넌트 뿐만 아니라 lazy-load 등 외부 컴포넌트도 받아와서 사용할 수 있어서, 모든 기능을 내가 직접 구현할 필요가 없었다. 진작에 이런 형태로 했어야했는데... 아무래도 javascript나 React 프레임워크가 서툴다보니 검색에 의존해서 하나하나 시간이 많이 걸리긴 했지만, 어느정도 유지 보수가 가능한 형태로 작업이 마무리 되었다.

사실 모바일 디바이스 / 브라우저별 대응도 제대로 체크하지 못했고, 미흡한 점이 아직 많이 보이지만, 작업을 공유할 일이 있어서 (역시 사람은 마감이 있어야 한다) 급하게 버전 1.0이라고 치고 마무리했다. 수정해야할 것들 체크리스트가 산더미인데, 버전 2.0은 안정화, 세부 조정 등을 목표로 해서 2021년에 틈틈히 다듬어 보는 것으로. 사실 멋진 메인 페이지도 디자인 / 구현하고 싶었으나, 마감에 맞추려고 하다보니... 이 또한 2.0에서 마무리해보는 것으로. 1.0 이후에 개인적으로 Framer와 React공부를 꽤 많이해서, 2.0에서 더 새로운 인터랙션 구현하고 디자인 할 생각에 좀 설렌다. 

디자인 / 기획적으로 달라진 부분은, 

• 좀 더 가벼운 개인 프로젝트들(커리어 방향성을 선행 UX쪽으로 잡으면서 web-experiment 성격의 작업이 많아질 것 같았다)도 추가할 수 있도록 더 확장성이 있는 works 페이지 레이아웃으로 변경
• 내 작업에서 영상 / 프로토타입의 비중이 높아져서, 이런 요소들을 더 효과적으로 보여줄 수 있는 레이아웃을 고민.
• 텍스트를 대폭 줄이고 이미지가 크게 크게 보이는 레이아웃으로 변경한 점. 이미지가 더 두드러지게 다크 테마로 바꿨다. 
• Hotjar는 여러가지로 좋았지만 (특히 히트맵 기능이나 레코딩 기능) 초반에만 무료고 나중엔 유료로 써야해서... 무료로 이용 가능할 때까지만 쓰면서 사람들에게 링크 공유해서 테스팅을 좀 해보고 Google Analytics로 옮겼다. 검색이나 유입에 더 신경을 쓰고싶기도 했고 무료였다.
• 초반까지도 로딩 속도가 너무 느려서, 친한 개발자 언니의 도움을 받아 많이 개선했다. Lazyload로 이미지가 순서대로 뜨도록 하고, 프로젝트 썸네일의 경우는 낮은 해상도의 이미지를 먼저 보여줬다가 풀 해상도의 이미지가 뜨도록 했다. (관련 용어가 있었는데 기억이 잘 안난다...) 다른 이야기이지만, 이런 이미지 로딩 속도 개선같은 문제를 실제 속도를 빠르게 하는 것이 아니라 사용자 인지적 관점으로 접근해서 해결한 케이스들을 알게 되서 개인적으로 엄청 감명받았다. 

 

 

직접 구현하는 웹사이트, 어때?

세 번째 웹사이트를 만든 이후에는 급하게 Bestfolio(www.bestfolios.com/portfolio/seungmeelee)같은 곳에도 올려뒀더니 유입도 꽤 있었고 구현 과정에 대해 문의가 들어오기도 했다. 물론 저 사이트의 어마어마한 포트폴리오들과는 비교할게 안되지만, industrial design 베이스에서 시작한 사람 치고 직접 구현한 웹사이트가 드물어서 그런가... 아직도 고민하고 있는 부분이지만 industrial design이랑 emerging tech UX 작업들이 아직 섞여있다보니 방향성 부분에서도 정리가 필요하다. 만약 이 글을 보는 당신이 웹사이트 구현을 고민중이라면

인터랙티브 / 코딩 쪽으로 더 공부해보고 싶다면 도전!
그런게 아니라면 내 디자인 역량에만 집중할 수 있는 좋은 웹사이트들이 너무나 많다. 

나는 제품디자인을 전공했지만 제품의 외형보다는 iot / emerging tech에 관심이 많았고, 이에 대한 인터랙션과 컨셉 디자인 쪽을 더 공부하고 일하고 싶었기 때문에 코딩 공부를 더 하고, 이를 보여줄 수 있는 웹사이트 구현을 하게 된 경우다. 웹사이트를 만드는 것 자체가 하나의 공부이자 포트폴리오였고, 영상이나 인터랙션 프로토타입도 같이 보여줄 수 있는 포트폴리오 플랫폼은 많지 않아서 직접 구현하게 되었다. UX 디자인을 하니까 웹사이트가 하나 있어야 할 것 같아서, 라는 이유라면 자신의 디자인 역량에 시간을 쏟을 수 있는 더 좋은 플랫폼들이 많고, 요즘은 기본적인 html / css 지식만 있으면 커스텀이 가능한 플랫폼들도 많아서, 오히려 그 쪽을 잘 알아보는게 좋은 것 같다. 

웹사이트를 만들 때, 코드를 쓰면서도 고민하게 되는 부분은 "내가 디자인에 시간을 쏟아야하는데 왜 구현 자체에 이렇게 애먹고 시간을 쏟고 있지?" 라는 부분이었다. 꼭 필요하다고 생각해서 만들긴 했지만 정말... 왜 안되는지 모르겠는 부분에서 동작이 안되거나 서버 세팅이나 속도 개선같은 내가 지식이 현저히 부족한 부분에서 막힐 때면 현타가 정말 많이 온다. 그래도 어찌저찌 홈페이지의 형태로 만들어놓은 내 웹사이트는 포트폴리오로써의 기능을 충실히 해주고 있고, 그 과정에서 react가 진짜 많이 는 덕분에 web-experiment나 framer로 프로토타이핑 하는 실력이 정말 많이 늘었다. 막힐 때마다 어떻게든 해결한 걸 보면 이런 작업이 내 성격과도 잘 맞고 꽤나 재미를 느끼면서 하는 편인 것 같다. 얼른 2.0 작업 계획을 세워야지... 

 

 

p.s. 혹시 작업 과정이나 결과물에 대해 궁금한 점이 있으시다면 댓글 환영입니다 :) 

 

포트폴리오 #디자인 #디자인포트폴리오 #포트폴리오웹사이트 #작업기 #postscripts #디발자 #react