[작업기] 디자이너의 개인 웹사이트 개편기

이직 생각을 시작하면서 자연스럽게 웹사이트를 개편해야겠다는 생각이 들었다. 이전 웹사이트를 졸업 직전에 내가 하고 싶은 디자인이 뭔지 정체성이 잡히지 않았을 때 만들어서 지금의 내 관심사를 잘 반영하지 못하고 있었고, 내 작업을 온라인에 많이 공유하기 시작하면서 더더욱 현재의 나를 반영할 필요가 있다고 생각했다. 

(몰랐는데 그 때 웹사이트 만든 작업기가 내 티스토리에 있었다...?! 저렇게 만들어놓고도 작업기를 썼다니 대단하다 나 자신. 그리고 지금의 웹사이트도 그런 시선으로 볼 때가 올 거라고 생각하니 두렵다ㅎ)

보통 누군가가 흥미로운 작업을 보면 그 디자이너에 대해 찾아보고, SNS나 웹사이트를 들어가보게 된다. 그때 웹사이트가 성공적으로 그 사람과 그 사람의 작업을 흥미롭게 보여주면 다른 작업, 다른 SNS까지 자연스럽게 팔로우하게 되는데, 그 웹사이트가 충분히 업데이트되어있지 못하거나 자신이 기대한 것과 다르면 거기서 끝이다. 그런 역할을 해줄 수 있도록 나와 나의 다른 작업들을 소개할 공간이 필요했다. 

 

https://seungmee-lee.com

Seungmee Lee

 

 

다음은, 작업하면서 염두에 두었던 것들이나 몇 가지 생각들. 

 

1.  큰 그림 그리기 

디자인을 시작할 때 몇 가지 방향성을 잡고 시작했다. 

1. 목표는 다른 웹사이트들에 피쳐되고 소개될 정도의 웹사이트.
결국 웹사이트로 누군가를 유입시키려면 내가 작업을 계속하고 꾸준히 올리는 것, 그리고 누군가에게 소개되는 것 두 가지뿐이다. 웹사이트를 좋은 인터랙션을 보여주는 하나의 프로젝트로 삼아서 다른 사람이 소개해줄 정도의 퀄리티로 만들고 싶었다. 단순히 작업을 소개하는 깔끔한 레이아웃 보다도 어떤 '키 인터랙션'을 만들어야 한다는 생각이 들었다. 

2. '나'스러운 스타일 찾기.
무드보드를 잡는 과정에서 고민을 많이 했다. 세상에 멋진 웹사이트는 너무 많다. 엄청난 스크롤 인터랙션, 3D 인터랙션, 이것 저것 넣으면 화려하고 기억에 남긴 할 거다. 하지만 내가 지금까지 해온 작업들의 톤과는 맞을 수가 없다. 그래서 결국 디자인의 톤을 잡을 때 가장 중요한 건 내가 자주 하는 작업 스타일과 어우러져야 한다는 점이었다. 그래서 폰트도 내가 평소에 자주 손이 가는 폰트들 안에서 고르는 등, 내 손과 눈에 익숙한 것들을 모았다. 
이 웹사이트 만들면서 몇 가지 랜딩 페이지 인터랙션을 스케치하고 공유한 적이 있는데, 누군가가 댓글로 'Clean but playful'이라고 남겨줬다. 그 댓글을 봤을 때, 아 이거다! 싶었다. 내가 은연중에 항상 추구해오던 스타일. 깔끔한데 살짝 위트가 있는. 그 말을 듣고 나니 많은 게 명료해졌다. 

3. 내 작업들의 특성이나 맞는 매체를 활용하기
작업이 주로 인터랙션 작업이다보니 영상 또는 프로토타입들이 많았다. 프로토타입을 직접 웹사이트에서 보여주는 건 복잡도를 높일 것 같았고, 대신 썸네일 같은 중요한 부분에서 영상을 많이 활용해야겠다는 생각이 들었다. 영상이면 프로젝트를 로드하는 데에 오래 걸릴 수밖에 없어서, 어떤 타이밍에 로드를 하는지, 어떤 부분에서 쓸지, 길이나 사이즈 최소화 하기 등 고려할 점들이 많았다. 뿐만 아니라 굵직한 프로젝트들에 비해 사이드로 작은 프로젝트나 프로토타입 만드는 걸 좋아해서, 프로젝트를 한 번에 보여주지 않고 별도의 페이지를 만드는 것도 고려해야 했다. 

 

 

2.  작업하면서 든 생각들

포트폴리오 웹사이트는 작업이 아닌 '나'를 소개하는 공간이다. 

이 점이 이전과 가장 크게 바뀐 점이다. 이전에는 내 웹사이트를 '아카이브 사이트'라고 표현했다. 말그대로 내 작업을 쌓아두고 필요할 때 공유하기 위한 사이트였다. 디자인을 할 때도 고민의 우선순위는 작업을 어떻게 보여주는지였다. 하지만 이번에는 작업하면서 '인상'을 제일 많이 고민한 것 같다. 내 웹사이트를 스쳐 지나가는 온라인의 낯선 이가 처음에 들어와서, 몇 번의 인터랙션으로 어떤 인상을 받고, 어떤 디자이너로 기억하고 나갈지.

예전에는 이런 웹사이트를 만드는게 구직을 위해서라고 생각했다. 그렇기 때문에 작업이나 그 과정을 자세히 보여주는 데에 심혈을 기울였다. 하지만 사람들은 작업에 대한 디테일과 과정에 큰 관심이 없다. 정말 관심이 있다면 작업에 대한 간략한 소개로도 관심을 가지고 연락을 준다. 굳이 모든 정보를 웹사이트에 꺼내 둘 이유가 없다. 그들이 관심이 있는 건 '나'다. 팔로우할만한 디자이너인지, 어떤 작업을 하는 사람인지 몇 초 안에 파악이 끝난다. 구직을 위한 대화는 어차피 웹사이트에서 이루어지지 않는다. 웹사이트 = 포트폴리오일 필요가 없다. 결국 이 웹사이트의 역할은 구직이 아닌 네트워킹, 정확히는 온라인에서의 '자기소개'였다. 

 

무엇을 위한 스크롤 인터랙션인가? 

가끔 화려한 인터랙션이 디자이너/개발자의 자기만족은 아닌가 생각이 든다. 물론 만드는 입장에선 뿌듯하고 재미있지만, 그게 실질적으로 방문자에겐 어떤 의미일까? 인터랙션 디자인이라고 했을 때, 여기서의 인터랙션은 보통 '사용자-컴퓨터/프로그램' 간의 상호작용을 의미한다. 더 편하고, 더 직관적이고, 더 생동감 넘치는 인터랙션을 통해 다소 경직되어있거나 부자연스러울 수 있는 디지털 경험을 더 기분 좋게 쓸 수 있게 만드는 데에 그 의미가 있지만, 주객전도가 될 때가 있다고 느낀다. 내가 나를 소개하는 웹사이트를 만들면서 더 주목해야 할 인터랙션은, 방문자와 내 웹사이트 그 자체의 상호작용이 아니라, 방문자와 '나'의 상호작용이다. 나를 방문한 사람에게 스스로를 잘 소개하고, 그 사람 또한 내가 전달하려는 그 인상을 받고, 관심이 있다면 편하게 연락할 수 있도록 만드는 게 중요하지, '나 이런 인터랙션 만들 수 있소' 보여주려는 듯한 인터랙션은 오히려 마이너스라는 생각이 들었다. 

이런 생각이 들었던 이유는, 웹사이트를 만들던 시기가 내가 이사한 직후라, 집에 친구나 가족을 많이 초대하던 시기였기 때문이기도 하다. 집에 오는 손님을 위해 음식, 처음 들어오면 보이는 공간, 가져갈 수 있는 소소한 선물, 방명록 등 여러가지를 고민하고 준비하느라 참 바빴다. 그러면서 문득 든 생각이, 왜 나는 내 웹사이트에 방문하는 사람들한테는 이런 요소들을 생각하지 않고 '어떤 스크롤 인터랙션을 넣어야 눈에 띌까'만 생각하고 있는가, 였다.

뭔가 스스로에게 큰 충격과 깨달음의 순간이었다. 종종 '와 이런 거 만들면 재미있겠다, 새롭겠다' 라는 생각으로 만드는 인터랙션들이 실제로 경험하는 사람에게는 어떤 의미인지, 만드는 나에게 의미가 있는 게 아니라, 인터랙션의 '목적'은 무엇인지를 좀 더 고민해야 하지 않나, 반성했던 순간이자, 앞으로는 가끔 한 걸음 뒤로 물러서서 그 의미를 바라보자고 다짐했던 순간. 

 

위의 이런 저런 생각들을 종합하니 여러 가지 시도를 하다가도, 결론적으로는 많은 것들을 덜어내게 되었다. 작업에 담긴 내용이나, 전반적인 인터랙션이나 모션도 많이 단순화했고, 대신 작은 부분들에서 Playful 한 요소들, 방문을 환영할 수 있는 요소들을 넣었다. 나를 소개하는 글에서 디자인을 통해 어떤 '해결책'이 아닌, 기분 좋은 경험을 만들어낸다고 표현한 만큼, 그 메시지에 어울리도록 인터랙션도 소소하지만 기분 좋은 것들이길 원했다. 아래는 몇 가지 하이라이트들. 

1. 방문자 개개인에게 고유 '헥스코드'를 부여하고 부르기. 
랜덤으로 색상을 지정해주고, 그 색상 코드를 이름처럼, 그리고 웹사이트의 포인트 컬러처럼 사용했다. 웹사이트의 방명록에서는 이 색상이 자신이 남기는 포스트잇의 색상이 되기도 한다. 

 

2. 프로젝트 네비게이션 구조 (지상과 지하)
굵직한 작업들은 '프로젝트', 좀 더 작고 실험적인 작업들은 '실험실'이라는 이름으로 분류했다. 그냥 다른 페이지를 만들어도 되고, 한 리스트에서 두 가지로 분류를 해도 되지만, 시각적으로나 인터랙션적으로도 느낌이 확 달랐으면 했다. 그래서 한 페이지 안에서 지상과 지하를 오가는 듯한 인터랙션으로 프로젝트들을 나눴다. 간단하게 그라디언트로 호버 인터랙션했을 때 은유를 주는 방식이 개인적으로 만족스러웠는데, 추후에 랩에 좀 더 재미있는 인터랙션들을 넣음으로써 그 공간은 더 실험적인 작업이라는 게 드러나도 좋을 것 같다. 

 

3. Guestboard - 방명록
개인적으로 제일 만족스러운, 일종의 '이스터에그'다. 블로그나 SNS라면 코멘트라던지 웹사이트를 찾은 사람과 소통을 할 수 있겠지만, 그 정도까지를 구현하지는 않더라도, 그 사람들이 이 공간에 어떤 흔적을 남기고 갈 수 있으면 했다. 그래서 떠올랐던 게 가끔 미술관이나 박물관에서 나눠주는 입장 스티커였다. 예전에 LA의 LACMA를 갔을 때 사람들이 그 스티커를 벽이나 구조물에 잔뜩 붙여놓았던게 떠올랐다. 이미 이 미술관을 다녀갔던 사람들의 존재감이 그곳에서 느껴질 뿐만 아니라, 사람들에게 자신의 흔적을 남길 기회를 주는 게 뭔가 환영받는다는 느낌이 있었다. 거기서 착안해서 만든 인터랙션. 

사실 구현 방법은 코멘트랑 다를 게 없다. 사람들이 남긴 글을 서버에 저장하듯이, 사람들이 클릭을 한 순간의 클릭 위치, 접속한 도시, 그 사람에게 할당된 컬러를 계속 모으고 불러오는 것 뿐이다. 벌써 7000개가 넘는 스티커가 달렸다. (그래서 인터랙션이 좀 느려졌다. 고쳐야겠다) 그렇게 눈에 띄는 기능이 아닌데도 사람들이 재미있어해 주니 좋다. 

Guestboard 인터랙션. 사용자가 클릭하면 그 사람이 접속한 지역과 인삿말이 포스트잇으로 남는다. 예전에 방문한 LACMA에서, 관람객에게 나눠준 스티커를 벽에 잔뜩 붙여뒀던 모습에서 영감을 받았다. 

 

 

3.  미처 보지 못한 것들, 배운 것들

나는 주로 짧게 새로운 시도 목적으로 프로토타입을 만들 일이 많다보니, 유지 관리, 퍼포먼스 같은 부분에 취약하다. 이번 웹사이트도 일단 모든 기능이 되게 만든 후에 퍼포먼스를 잡겠다!라는 생각으로 만들고 보니 처음 퍼포먼스 체크를 해봤을 때 50점 정도가 떴다. 충격적인 수치에 검색도 해보고, 코드도 쭉 훑어보니 진짜, 고칠 게 정말 많았다. 오죽했으면 전반적인 웹사이트는 3개월 정도 걸렸는데 나머지 이슈 해결에 나머지 3개월이 걸렸다. 뿐만 아니라 다른 디바이스나 브라우저에서 들어가 보니 안 되는 것들이 한 두 개가 아니었다. 브라우저 간의 차이 때문에 고칠 수 없는 건 대체할 수 있는 효과를 넣는다던지, 손이 가는 작업이 생각보다 많았다.

몇 가지 굵직한 이슈들을 정리하자면

1. 브라우저/디바이스들의 .webm 지원 여부 - 영상 위주로 웹사이트를 만들었는데 iPhone에서는 webm을 지원하지 않는다! 이젠 웹에서 자주 쓰이는 확장자라서, 전혀 생각하지 못한 부분이었다. 결국 디바이스를 체크하고 webm 대신 mp4를 받아오는 식으로 바꾸고, AWS S3에 mp4 파일로도 영상을 다 올려두어야 했다. 

2. SVG filter - 전반적으로 깔끔한 웹사이트지만 약간의 질감이 있었으면 했다. 그래서 SVG 필터를 통해서 거친 질감의 색연필로 밑줄을 긋는듯한 효과를 넣었는데 알고 보니 Safari는 지원이 되지 않는 기능이었다. 결국 Safari에서는 질감 없이 뜨도록 해두었다. 

3. 로딩 타이밍들 - 언제 어떤 리소스를 로딩할건지 계획을 새로 짜야했다. 썸네일에 사용되는 영상도 불러와야했기 때문에 초기에 필요한 리소스들이 많았다. 스크롤이 많은 페이지라면 스크롤 위치에 맞게 미리미리 리소스를 로딩하면 되지만, 나의 경우 원페이지 느낌의 웹사이트이기 때문에 그런 접근은 불가능했다. 그래서 결국 텍스트 애니메이션을 일종의 긴 로딩 이펙트 역할을 해주고, 그 시간 동안 영상을 불러와서 초반 로딩 부담을 덜고, 프로젝트 썸네일을 호버 해보는 시점에서는 이미 로딩이 다 되어있어서 딜레이가 없도록 했다. 

4. Guestboard - 이 기능을 구현하면서 Supabase라는 백엔드 데이터베이스를 처음 사용해봤는데, 꽤나 간단해서 놀랐다. 더 재미있는 인터랙션을 많이 만들 수 있을 것 같기도 하고, 유저 정보를 저장하고 불러와야 하는 실제 서비스 만드는 데에도 쓸 수 있을 것 같아서 기대가 된다. 개발 지식/경험 +1 된 기분. 

 

 

4.  이 웹사이트가 나에게 가져다 준 것들. 

한창 웹사이트를 공유했을 때 다른 작업들의 공개 시기와 맞물리기도 해서, 한동안 방문자가 꽤 많았다. 여러 웹사이트 큐레이션 사이트에 소개되기도 해서, 그쪽에서 트래픽이 많이 유입되었다. 이 웹사이트 덕분이라고 하긴 애매하지만 잡 인터뷰 제안도 꽤 왔고, 무엇보다 뿌듯했던 건 다른 디자이너들이 나와 나의 작업 방식에 대해 궁금하다며 커피챗을 많이 요청해 준 것. 내 작업을 많이 올리지 않은 시기에도 계속 웹사이트 방문자나 조금씩 SNS 팔로워가 느는 걸 보면, 내가 목표로 했던 '소개되기', '인상 남기기'가 어느 정도 이루어지고 있나 보다. 

웹사이트 론칭 이후 방문자 그래프. 이전 웹사이트에 비하면 평균 월 방문자의 수가 10배가 넘는다.

내 웹사이트 방문자 수치는 단순히 웹사이트 방문자가 아닌 내 온라인상에서의 PR의 대한 추이를 지속적으로 파악할 수 있는 수치이기도 하다. 23년 연말에 작업 공유를 거의 못해서 좀 줄었지만, 24년, 또 다시 치고 올라가 보자. 계속 새로운 작업 하고 지속적으로 공유해야지.