[인트로 페이지 제작기] 1편. 기획서 7개 대신 팔레트부터 뽑아보기

블로그엔 이런 저런 기능 개발과 실험을 많이 해보고 싶었던 터라 ‘모션그래픽을 이용한 인트로 페이지’ 제작하는 것은 언제든 해보고 싶었던 작업이었다. ChatGPT와 Claude Code를 이용하여 그 인트로 페이지를 제작하고 보니 그야말로 ‘삽질’ 그 자체였다. 이번에는 페이지 제작 과정에서 겪었던 상황과 떠오른 생각을 작성하며, 총 5편의 시리즈 글로 이어진다.

💬 이모티콘이 있는 콜아웃은 실제로 Claude Code 또는 ChatGPT와 작업할 때의 대화 내용이다.

이 글을 본격적으로 들어가기 앞서 백엔드 개발자가 디자인을 해보는 과정에서, 세상에 널리 알려진 이론보단 경험과 글쓴이의 개인 취향에 기반하여 기획 및 디자인과 개발한 경험을 설명한다.

배경을 조금 설명하자면, 나는 학부 전공으로 디지털 미디어를 전공하였다. 당시엔 게임 프로그래밍을 포함하여 기획, 디자인, 3D 애니메이션, 영상 편집 등을 학습하였다. 또 경영학을 복수전공해서 마케팅 등의 수업을 들었던 기억이 있다. 다만 이 모든 것이 아주 오래 전 일이며 대다수는 많은 것들을 잊은 채로 살아왔다.

그래도 옛날의 경험들이 현재의 나를 만든 건 분명했다. 이번 작업을 통해 해마에서 끌어내는 암묵지를 정리해본 데 의의를 두기로 맘먹었고, 따라서 정확한 브랜드 기획 및 디자인 워크 프로세스를 따르지 않았음을 밝힌다. 돌이켜보니, ‘Thinking through making’ 방식에 입각해서 작업했었다.

셀프 브랜딩, 어떻게 해봐야 할까?

모션 그래픽을 작업해보기 이전에 어떤 주제에 어떤 무드로 작업을 할지 고민하다가 결국 나를 표현하는 블로그로 사용할 것이니 ‘디자인 시스템’에서 잘 뽑아서 쓰면 되겠다는 생각을 했다.

나는 개인적인 디자인 시스템을 관리하고 있었다. 블로그를 비롯하여 직접 만든 웹 사이트에서 디자인의 통일성을 쉽게 관리할 수 있겠다는 생각으로 시작한 프로젝트였다. 그러나 디자인 시스템을 관리하며 한 가지 생각이 들었다. ‘이걸 과연 나만의 디자인이라고 할 수 있을까?’ 몇 달 동안 찜찜한 기분을 지울 수 없었다. 찜찜함 때문에 모션그래픽을 해보고 싶었는데 계속 미루게 되었다.

결론은 이 디자인 시스템을 ‘시스템 관점’에서 관리할 명목은 찾았으나 ‘왜 이런 규칙을 정했는가?’가 명확하게 설명이 되지 않았다는 점이다. 처음 디자인 시스템을 구현해볼 땐 토큰과 컴포넌트 단위로 정리를 먼저 해보아야 다음으로 넘어갈 수 있을 것 같았고, 내가 어떤 사람이고 어떤 이야기를 하고 싶은지는 정확하게 정리하지 않은 채 진행했기에 당연한 결과였다. 당시에는 ‘정밀한 사람’으로 나를 설명하여 시스템 구축을 했는데, 마치 나에게 안 맞는 옷을 입힌 것 같단 생각도 들었다. 어쩌면 그게 곧 작업의 병목이었을지도.

따라서 이번에 ‘나 자신을 나타내는’ 브랜드 기획부터 하면 좋겠다는 생각이 들었다. (일종의 셀프 브랜딩)

브랜드 기획, 시작부터 난관이었다.

브랜드 기획에 필요한 문서 양식이 뭐가 있는지 찾아보았다. 모든 시작에는 생각을 풀어서 글로 정리해보는 ‘기획서’가 있을 거라고 생각했던 이유였다.

다만 ChatGPT와 작성해볼 문서가 무엇인지 물어 보니 한두 개가 아니었다. 브랜드 정의서, 언어 아이덴티티 가이드, 접점 지도, 브랜드 가이드라인 등… 추천 받은 것이 총 7개나 되었다. 그리고 그 문서들 하나하나에 무엇을 적어야 할지 오히려 모르겠단 생각이 들었다. 기업도 제품도 아닌 나 하나를 브랜딩하는 일에 이렇게까지 무거운 과정이 필요한가 싶었다. 재미로 시작한 일이 문서 작업이 되어 하기 싫어지기 전에, 내가 가장 빨리 판단할 수 있는 방식으로 가기로 했다. (이 글을 쓰며 이제야 드는 생각인 건데, 그래도 브랜드 정의서 정도는 적어볼 걸 그랬다.)

그 시작은, 컬러 팔레트부터 뽑는 일이었다.

컬러 팔레트부터 제작하기로 하였다.

나는 텍스트에서 오는 정보보다 감각으로 느끼는 정보에 좀 더 특화되어 있다 생각했다. 이번 작업은 시각적인 작업이니 색부터 잡으면 좀 더 쉬울 거 같았다. 그리고 늘 생각해왔던 것 중, ‘자연의 색’에서 찾아낸 조합이 가장 눈에 좋다 생각했었다. 따라서 구글링으로 레퍼런스를 찾기 시작했다.

검색어는 그냥 원하는 레퍼런스에다가 background 단어를 추가해서 찾아보았다.

맘에 드는 레퍼런스를 몇 개 찾아서 Claude Code랑 컬러 팔레트부터 뽑기 시작했다. 색상 이론 관련 설명도 꽤 잘해주었지만 일단 진짜 감각대로 ‘내가 보기 좋고, 블로그에 쓰기 좋을 거 같은, 눈 편한 색들’을 찾아보았다.

약간 밋밋한 건 아닐까 싶어서 ‘사이버 펑크’ 느낌도 좀 찾아보았다.

이 중에서는 ‘해무’라는 메타포가 붙은 팔레트가 가장 맘에 들었다. 물론 팔레트가 맘에 든다고 해서 그대로 사용한 것이 아닌 실제 웹에서 볼 때 눈이 편한지, 추가로 포인트를 넣어보고 싶은 색은 없는지 등 나만의 컬러 팔레트를 적용해갔다.

선택한 팔레트로부터 나를 설명하기

팔레트 하나를 선택했으니 이것을 나에게 적용해보기로 했다. Claude Code와 스토리를 작성해볼 땐 나를 최대한 다 꺼내보고 대화를 했다.

글의 도입부에서 말했지만 프로그래밍, 디자인, 기획, 3D 애니메이션, 영상까지 여러 분야를 거쳐 왔다. 여러 분야가 만나는 자리에서 새로운 걸 만들어 볼 수 있는 사람. 그리고 그 사이의 간극을 줄이기 위해 수많은 질문을 하는 사람. 이야기의 방향은 이렇게 잡아가도 되겠다는 생각을 했다.
’정밀한 사람’으로부터 ‘질문을 하며 접점을 찾아가는 사람’으로 리포지셔닝 하면 되겠다는 생각도 했다.

해무는 바다 위에 끼는 안개다. 따뜻한 공기가 차가운 바다 위를 지날 때 생긴다. 서로 다른 두 환경이 만나는 경계에서 새로운 게 피어난다는 속성에 집중해보니 내 스토리에 연결이 가능할 것 같단 생각이 들었다.

스토리를 작성했으니, 이 스토리를 통해 나를 한 마디로 나타낼 ‘캐치프레이즈(Catchphrase)’까지 작성하면 되겠다는 생각이었다.

스토리 작성하기

대화한 것을 토대로 스토리를 다듬었다. 이는 셀프 브랜딩의 뿌리가 되었고 나를 설명하게 될 시각 체계, 요소, 콘텐츠 등 모든 설명의 기준이 되었다.

plain
## 이야기
저는 원래 일단 해 보는 사람이에요. 프로그래밍, 디자인, 기획, 3D 애니메이션, 영상, 캐릭터, 캘리그라피까지 두루 해 봤어요. 직접 만든 걸 사람들에게 나눠 주기도 했고요. 그러다 개발을 제대로 공부하게 됐고, 지금은 백엔드 개발자로 일하고 있어요.

그래서인지 사람들이 저마다 다른 이야기를 할 때, 그 이야기들이 어디서 만나는지가 궁금해져요. 그 지점을 찾으려고 묻고 또 물어요.

백엔드 일이 딱 그래요. 데이터는 데이터대로, 인프라는 인프라대로, 기획은 기획대로 사정이 있어요. API 명세 하나를 정하려 해도 그 사정들이 다 맞물려야 하죠. 그 가운데서 계속 접점을 찾는 게 제가 해 온 일이에요. 그건 이야기 사이의 간극을 좁히려고 무엇이 같고 무엇이 다른지부터 묻는, 제 본래 성향에서 비롯됐어요.

앞으로도 그렇게 질문하는 사람이고 싶어요. 그 질문 하나로 따로 놀던 이야기들이 이어지면 좋겠어요.

## 해무와 새벽빛
해무는 따뜻한 공기가 차가운 바다 위를 지날 때 생기는 안개예요. 서로 다른 세계가 만나는 곳에서 슬며시 피어오른다는 점이 제가 하는 일과 닮았어요. 이 시스템의 따뜻한 회색 바탕이 공기라면, 짙은 파랑은 바다예요. 짙은 파랑은 질문하는 색이라 링크나 버튼처럼 다음으로 넘어가는 자리에 써요.

안개 낀 새벽, 해는 소리 없이 떠올라 하루를 열어요. 하나뿐인 따뜻한 색 sunrise는 그 새벽빛이에요.

캐치프레이즈 작업하기

스토리로부터 가장 눈에 띌만 한 ‘단 하나의 문장’을 작성했다.

plain
질문으로 접점을 찾는,

셀프 브랜딩 완료, 다음은?

스스로가 어떤 위치에 있고, 어떤 사람이 되고 싶으며 이를 표현하는 시각적 체계는 어떻게 정리되어야 하는지 쭉 정리해봤다. 순서는 다소 바뀌었고 누락된 이야기들도 꽤 있지만, 현재의 브랜드 컨셉은 하나의 기준이 될 수는 있겠다 생각했다. (아마 또 고민해보고 추가 작업해볼지도…) 그래서 그 다음 작업을 진행할 수 있겠다는 판단으로 실제 웹 페이지 작업을 진행하기로 했다.

2편에서는 실제 페이지 작업을 하기 이전에 히어로 섹션 레이아웃 작업을 다룬다. To be continued.