요즘은 웹사이트를 만드는 게 정말 빠르다. 템플릿 하나를 고르고 이름과 프로필 사진만 바꾸면 오후 한나절이면 공개할 수 있다. 하지만 그래서 많은 사이트가 비슷비슷해 보인다. 문제는 대개 기술이 아니라 자기가 무엇을 원하는지 모른다는 데 있다고 생각한다. 자기만의 세계관이 없으면 남이 만든 선택지 중에서 고를 수밖에 없다.
나는 배색이나 글꼴을 잘 아는 편이 아니어서, 왜 이게 보기 좋은지 이론으로 설명하지 못한다. 그나마 확실하게 말할 수 있는 건 두 가지다. 하나는 일본식 덜어내기의 미감을 아주 좋아한다는 것이다. 뺄 수 있는 건 빼고, 남은 것 하나하나에는 제자리가 있다. 다른 하나는 화면이 좋은지 판단할 때 내가 가장 신경 쓰는 게 조화라는 것이다.
미리 말해 두자면, 디자인은 주관적이다. 단순하고 직관적인 인터페이스를 좋아하는 사람도 있고, 그것도 틀리지 않았다. 차이는 얼마나 많은 사람이 좋아하느냐뿐이다. 아래는 내 방식일 뿐 유일한 정답이 아니다. 그중 가장 중요한 전제는 자신이 만든 것을 스스로 좋아해야 한다는 것이다.
먼저 내가 원하는 것을 알기#
세계관이라고 하면 거창하게 들리지만, 출발점은 아주 작다. 내가 정말 좋아하는 것이 무엇인가. 내가 우주를 고른 건 천문에 늘 관심이 많아서, 천문 책을 자주 뒤적이고 이런저런 과학 교양 콘텐츠를 보기 때문이다. 좋아하는 것이어야 계속 파고들 마음이 생기고, 뒤의 단계마다 그것을 충분히 잘 알고 있어야 한다.
좋아하는 것이 곧 세계관은 아니다. 그것을 세계관으로 바꾸기 위해 내가 쓰는 방법은, 그것으로 질문에 답해 보는 것이다. 모든 사이트는 같은 질문들을 마주친다. 나는 그 질문들을 적어 두고 하나씩 우주로 답했다.
| 모든 사이트가 마주치는 질문 | 우주가 준 답 |
|---|---|
| 독자는 어디에 있나? | 호박색 점 하나 |
| 페이지 전환이란? | 그 점이 한 페이지에서 다음 페이지로 날아가는 것 |
| 로딩이란? | 토성의 고리가 한 바퀴 다 그려지는 것 |
| 페이지를 찾을 수 없음(404)이란? | 연락이 끊겨 우주로 떠내려가는 우주비행사 |
| 댓글이란? | 먼 곳에서 올 펄스 하나를 기다리는 것 |
| 사진이란? | 탐사선이 보내오고, 지상 안테나가 한 줄씩 받아 내는 신호 |
| 무엇이 나와서는 안 되나? | 별과 별 사이에는 없는 것: 불, 바람, 구름 |
이 표를 다 채우면 세계관이 생긴 것이다. 쓰임새는 두 가지다.
- 답할 수 없는 것은 '붙여 놓은 것처럼' 보이게 된다. 버튼 하나, 애니메이션 하나, 일러스트 하나라도 내 세계에서 그게 무엇인지 말할 수 없다면, 올려놓았을 때 대개 겉돈다.
- 마지막 줄은 앞의 줄들만큼 중요하다. 세계는 무엇을 할 수 있는지뿐 아니라 무엇을 하면 안 되는지도 알려 준다. 이것이 덜어내기의 첫걸음이다. 해왕성 테마를 만들 때, 한 버전에서는 날아가는 꼬리를 바람결 같은 선 여러 가닥으로 그렸다. 바람은 행성 대기 속에 있는 것인데 페이지 전환은 별과 별 사이에서 일어나니, 통째로 뺐다.
세계관은 필터가 아니다. 우주로 정했다고 별만 둘 수 있는 건 아니다. 이 사이트에는 귀환 캡슐도, 우주왕복선의 로봇 팔도, 지평선 위의 나무와 송전탑과 육분의도 있다. 모두 자기가 왜 여기 있는지 말할 수 있다.
사실적일 필요도 없다. 이 세계는 가상이다. 위성 옆에 글자가 떠오르고, 점 하나가 페이지 사이를 날아다닌다. SF 영화를 볼 때와 같다. 우주선이 빛보다 빠르다고 몰입이 깨지는 사람은 없다. 몰입을 깨는 건 작은 것들이다. 빛이 꺼지는 방식이 어색하거나, 어떤 물건의 질감이 주변과 다르거나, 어떤 움직임에 이유가 없을 때. 그래서 내 판단 기준은 '사실적인가'가 아니라 '조화로운가'다. 실제 자료는 아주 유용하지만, 조화를 이루도록 돕는 도구이지 목적이 아니다.
선택하고, 대가도 받아들이기#
세계관이 정해지면 사이트 전체의 모습을 결정하는 큰 선택이 몇 가지 생긴다. 내게 가장 큰 선택은 사이트 전체를 3D로 만드는 것이었다.
우주의 광활함은 평면으로는 보여 줄 수 없다고 생각한다. 3D의 장점은 분명하다. 공간의 입체감이 충분하고, 디테일도 평면보다 깊이 새길 수 있다. 별 하나가 자전하고, 기울어져 있고, 뒤로 돌아가 가려지는 위성을 거느릴 수 있다.
대가도 분명하다. UX를 일부 희생하고, 성능을 잡는 데 많은 힘을 들여야 한다. 그리고 일반 독자에게는 움직이고 깊이가 있는 화면이 깔끔한 텍스트 한 페이지보다 인지 부담이 훨씬 크다. 이건 내가 스스로 고른 것이고, 대가가 없는 척할 생각은 없다.
내 방식은 이렇다. 핵심은 양보하지 않고, 대가는 하나씩 메운다.
- 성능: 목표는 "어떻게 3D인데 이렇게 부드럽지" 하는 느낌을 주는 것이다. 단, 품질을 떨어뜨리지 않는다는 전제에서다. 최적화는 방법을 바꿀 수는 있어도 화면을 바꿀 수는 없다.
- 읽기: 글 본문 페이지에는 바탕을 한 겹 깔아서 뒤의 별이 글자를 방해하지 않게 했다.
- 기기: GPU가 없는 기기에서는 더 단순한 별하늘로 물러난다. 기능은 그대로이고, 연출이 조금 빠질 뿐이다.
어떤 큰 선택이든 마찬가지다. 무엇을 내주고 무엇을 얻는지 먼저 분명히 하고, 바꿨으면 성실하게 메워야 한다. 하다가 중간에 물러서서 이도 저도 아니게 되면 안 된다.
카메라 정하기: 독자는 어디에 서 있나#
3D를 고르면 평면에서는 별로 고민하지 않던 일이 하나 늘어난다. 카메라를 어디에 둘 것인가. 나는 각도와 카메라에 신경을 많이 쓴다. 영화를 볼 때도 이 장면은 어떤 각도로, 어떤 방식으로 찍었을까 자주 생각한다. 사이트를 만들 때는 독자가 어디에 서 있을지를 먼저 정하고, 그다음에 무엇을 볼지를 정한다.
- 페이지마다 카메라 위치부터 정한다. 홈은 토성 북쪽에서 비스듬히 내려다보고, 대부분의 페이지는 3D 앙각이다.
- 내용 자체가 평평할 때만 평면을 쓴다. 사진 페이지는 사진 벽이라 평면이 더 보기 좋다. 하지만 모든 페이지를 평면으로 할 수는 없다. 항해 일지까지 평면이었다면, 한 페이지씩 넘겨 보다가 지루해졌을 것이다.
- 카메라가 움직일 때는 배경에 시차가 있어야 한다. 먼 것은 느리게, 가까운 것은 빠르게 움직여야 카메라가 움직이는 것처럼 보인다. 그렇지 않으면 페이지가 배경 위를 미끄러지는 것처럼 보인다.
- 페이지 전환은 롱테이크처럼. 먼저 그 점에 초점을 맞추고, 따라가며 찍다가, 마지막에 카메라는 멈추고 점은 계속 움직여서 그 뒤의 궤적이 화면에 담긴다. 자세한 내용은 지난 글에 썼다.
카메라의 위치는 한 페이지가 무엇을 말하는지를 곧바로 바꾼다. 예전 소개 페이지에는 창이 하나 있었고, 그 창에는 푸른 불덩이가 밤하늘을 가로질러 땅에 떨어지는 순간이 담겨 있었다. 그때 독자는 땅 위에 서서 별 하나가 떨어지는 것을 바라보는 자리였다. 리뉴얼 후에는 떨어지는 쪽이 독자 자신이 되었다. 제목 "꽉 잡으세요."의 마침표가 바로 그 호박색 점이다. 아래로 스크롤하면 그 점이 함께 떨어지고, 마지막에 귀환 캡슐이 "여기 내려앉다."의 순간에 착지한다. 소재는 거의 같다. 카메라만 땅에서 떨어지는 별 위로 옮겼을 뿐이다.
덜어내서 수렴하기: 점과 선뿐#
화면에는 두 가지만 남겼다. 점과 선. '이 사이트' 페이지의 부제를 "여기엔 다른 것이 없다. 밤과 흰 먹, 그리고 희미한 빛뿐."이라고 쓴 것도 바로 이 이야기다.
어휘가 적으면 좋은 점은, 어휘가 대신 결정을 내려 준다는 것이다. 새로운 것이 들어오려면 먼저 자기가 점인지 선인지 말할 수 있어야 하고, 말하지 못하면 여기에 속하지 않는다. 꼭 점과 선일 필요는 없다. 사각형과 격자선이든, 종이와 접힌 자국이든 좋다. 중요한 건 두세 가지만 골라서 모든 페이지, 모든 컴포넌트를 그것들로 조립하는 것이다. 점과 선은 마침 별하늘의 가장 정직한 모습이다. 별은 원래 점이고, 궤도와 별 궤적과 혜성 꼬리는 원래 선이니, 따로 도형 언어를 발명할 필요가 없었다.
덜어내기에는 여백도 포함된다. 홈에 들어오면 토성과 선 몇 가닥뿐이다. 다섯 구역은 평소에는 궤도 위의 점일 뿐이고, 마우스를 올리거나 자기 차례가 되어 빛날 때에야 이름이 떠오른다. 화면에 놓인 것이 적어야 독자가 스스로 탐색하고, 나타나는 것 하나하나가 중요해 보인다.
색: 역할을 먼저 정하고, 색은 나중에#
많은 사람이 좋아하는 색을 몇 개 먼저 고르고, 그다음에 어디에 둘지 생각한다. 나는 반대로 한다. 어떤 '역할'이 필요한지 먼저 정하고, 역할마다 뜻은 하나만 주고, 색은 마지막에 채운다.
#0A0A0C#F1ECE3#E9C17A#E3866C- 종이는 순흑이 아니고, 먹은 순백이 아니다. 검은 바탕 위의 순백은 너무 눈부시다.
#F1ECE3은 살짝 따뜻해서 종이 위의 먹에 더 가깝고, 긴 글을 오래 읽어도 눈이 덜 피곤하다. - 먹은 한 가지 색뿐이고, 투명도로 층을 나눈다. 제목, 본문, 설명, 선 모두 같은 먹색의 서로 다른 투명도다. 층마다 대비를 측정했고, 본문은 최소 4.5:1이어야 한다.
- 신호색은 하나만 남기고, 뜻도 하나만 준다. 내 호박색은 '현재 위치'만 뜻한다. 클 필요도, 깜빡일 필요도 없다. 화면에서 유일하게 색이 있는 것이기 때문이다.
- 경고색은 오류가 났을 때만 나온다. 신호색과 충분히 달라야 한다. 그렇지 않으면 삭제 버튼이 '현재 위치'처럼 보인다.
덜어내기가 가장 어려운 건 색이다. 색 하나하나는 따로 보면 다 예쁘기 때문이다. 예전 사이트의 보라색과 초록색 링크는 전부 뺐고, 코드 구문 강조도 오래 망설였다. 사이트 전체에서 색이 있는 몇 안 되는 곳이 되기 때문이다. 섞인 색이 많아지면 화면에 주인공이 없어진다.
여러 벌의 배색을 만들 때#
오픈소스판에서는 천체를 바꿀 수 있고, 나는 네 벌을 만들었다. 여러 벌의 배색을 만들 때는 세 가지를 더 지켰다.
- 종이와 먹도 아주 조금씩 함께 기운다. 해왕성은 차갑게, 베텔게우스는 따뜻하게. 차이는 작지만 사이트 전체가 바뀌면 공기의 온도가 달라진다.
- 주인공에는 색을 칠하지 않는다. 해왕성은 원래 파랗다. 한 버전에서는 행성까지 파랗게 기울었는데, 사이트의 주제와 조금 부딪쳤고 그 점도 더는 특별하지 않았다. 행성은 언제나 먹색이고, 색은 그 점에게만 속한다.
- 신호색은 구별되어야 한다. 자기 글자색과도 구별되어야 하고, 다른 벌과도 구별되어야 한다. 나는 색차(ΔE2000)로 측정했고, 벌과 벌 사이를 20 이상으로 잡아야 헷갈리지 않았다. 원래 달 테마가 하나 있었는데, 신호색과 글자색의 차이가 6밖에 안 돼서 그 점이 거의 보이지 않았다. 결국 블랙홀로 바꿨다.
흑백 테스트#
마지막 점검이 가장 간단하고, 가장 쓸모 있다. 색을 빼도 알아볼 수 있는가? 두 가지를 색으로만 구별할 수 있다면 형태를 잘못 만든 것이다. 해왕성은 한동안 여전히 토성처럼 보였다. 토성과 같은 필치에 파란색만 조금 더했기 때문이다. 나중에 형태로 구분했다. 토성은 끊어지는 붓 자국과 넓은 고리, 해왕성은 매끄러운 필치와 어두운 반점, 블랙홀은 텅 빈 그림자와 강착원반, 베텔게우스는 몽글몽글한 대류 세포다.
선: 굵기는 하나, 밝기와 실선·점선으로 말하기#
선의 규칙도 색과 같다. 먼저 제한하고, 그다음에 뜻을 준다. 사이트 전체에 굵기는 하나뿐이다. 1px 헤어라인이다.
굵기는 바꿀 수 없으니, 선이 서로 다른 뜻을 나타내려면 밝기, 그리고 실선이냐 점선이냐에 기댈 수밖에 없다. 실선은 이미 일어난 것, 점선은 아직 오지 않은 것이다.
규칙을 정했으면 실제로 쓰는 곳을 하나 찾는 게 좋다. 그렇지 않으면 그저 장식일 뿐이다. 나는 글의 목차에 썼다. 목차는 별 궤적 한 토막이다. 읽은 부분은 실선, 아직 읽지 않은 부분은 점선이고, 호박색 점이 지금 읽고 있는 독자다.
규칙을 깨려면 이유가 있어야 한다. 예외인 선은 하나뿐이다. 점이 날아갈 때 뒤로 끄는 그 선이다. 흰 헤어라인으로는 그게 빛이라는 걸 알 수 없어서, 점의 색을 쓰고 아주 옅은 빛무리를 한 겹 둘렀다. 색을 가져도 되는 건, 그것이 원래 그 점이 내는 빛이기 때문이다.
이음매로 모든 디테일 점검하기#
앞에서 정한 건 규칙이고, 이 단계는 매일 하는 일이다.
리뉴얼하던 동안 나를 가장 자주 막히게 한 느낌은 '붙여 놓은 것 같다', '억지로 이어 붙인 것 같다', '안 어울린다'였다. 모두 조화가 깨졌을 때의 느낌인데, 막연해서 고치기가 어렵다. 그러다 알게 됐다. 거의 언제나 어떤 '이음매' 하나가 제대로 맞지 않은 것이었고, 이음매는 몇 종류뿐이었다.
| 이음매 | 안 맞았을 때의 모습 | 점검 방법 | 예 |
|---|---|---|---|
| 시간 | 갑자기 나타나고, 갑자기 사라진다 | 녹화해서 나타나고 사라지는 몇 프레임을 한 프레임씩 본다 | 밝은 선이 잠깐 빛났다가 순식간에 꺼져서 정전된 것 같았다. 원래 밝기로 천천히 돌아가도록 바꿨다 |
| 순서 | 먼저 일어나야 할 일이 한 박자 늦다 | 동작을 시간순으로 한 줄씩 적는다 | 천체를 바꿀 때 점이 먼저 색이 바뀌고 행성이 나중에 나왔다. 옛것을 먼저 거두고, 다 거둔 다음에 색이 바뀌도록 고쳤다 |
| 공간 | 옆에 원래 있던 것과 맞지 않는다 | 배경, 옆의 요소와 겹쳐서 본다 | 블랙홀 뒤로 돌아간 위성은 이미 가려졌는데 라벨은 그 위에 떠 있어서, 독자가 라벨에 해당하는 점을 찾을 수 없었다 |
| 이치 | 자기 것이 아닌 규칙을 썼다 | 묻는다: 이 규칙은 누구의 것인가? | 블랙홀의 강착원반에 그림자가 있었다. 그건 토성의 논리다. 강착원반은 스스로 빛나니 그림자가 생기지 않는다 |
| 필치 | 질감이 사이트 전체와 같은 붓이 아니다 | 사이트에서 가장 전형적인 컴포넌트와 나란히 놓고 본다 | 앞이 굵고 끝이 가는 선, 너무 만화 같은 일러스트 |
아주 쓸모 있는 질문이 하나 더 있다. 그다음은 무엇인가? 장비 페이지의 우주왕복선 로봇 팔이 상자를 집어 드는데, 그 상자는 그 뒤에 어디로 갔을까? 어떤 것에 '지금'만 있고 앞뒤 사정이 없으면, 오래 볼수록 가짜 같아진다.
이런 디테일은 대부분의 사람이 알아채지 못하고, 하나만 떼어 놓고 보면 다 중요하지 않다. 하지만 사이트에 제대로 맞지 않은 곳이 많아지면 짜깁기한 것처럼 보이기 시작한다. 반대로 하나하나 맞춰 놓으면, 독자는 이유를 말하지 못하더라도 그곳을 하나의 온전한 장소로 느낀다.
무엇이 이상한지 말할 수 없을 때#
위의 표는 나중에 정리한 것이다. 실제로 만들 때는 대부분 '뭔가 이상하다'는 느낌만 있을 뿐, 문제가 어디인지 한마디로 말할 수 있는 경우는 드물었고, 분명하게 묘사하는 건 더더욱 어려웠다. 조화롭지 않다는 걸 알아보는 것과 왜 조화롭지 않은지 말하는 것은 서로 다른 능력이다. 앞의 것은 미감의 축적에 크게 기대니, 표 한 장으로 속성으로 익힐 수 없다.
이럴 때 나는 세 가지를 한다.
- 실제의 것과 대조한다. 토성의 줄무늬는 원래 독특하니, 새김선은 실제 토성을 따라 그린다. 북극 육각형은 카시니호의 사진을 보고 그렸다. 안은 비어 있지 않고, 구름과 한가운데의 폭풍의 눈이 있다. 예전 소개 페이지의 그 푸른 불덩이는 그 셀카 영상과 대조해서, 빛이 어두웠다가 밝아지고 땅에 닿기까지의 리듬을 봤다.
- 남들이 어떻게 하는지 본다. 리뉴얼 초반에 여러 별하늘 디자인을 보는 데 시간을 꽤 들였다. 내가 봐도 눈이 번쩍 뜨이는 걸 원했기 때문이다. 목차는 fumadocs의, 목차 디자인만 다룬 글을 보고 만들었다. 그 글 덕분에 목차가 하나의 독립된 디자인으로 다룰 가치가 있다는 걸 알았다. favicon이 잘 안 될 때는 다른 사람들의 favicon이 작은 크기를 어떻게 처리하는지 찾아봤다.
- 사양을 정확히 확인한다. 어떤 '이상함'은 사실 사실관계를 몰라서 생긴다. 대비와 색차는 측정할 수 있고, iPhone Duo 같은 폴더블 화면의 크기와 접히는 위치는 Apple의 공식 사양에서 확인할 수 있다.
참고는 베끼기가 아니다. 보고 나면 내 세계로 돌아와 내 어휘로 다시 그려야 한다. fumadocs의 목차는 곧게 서 있고, 내 것은 별 궤적 한 토막이다.
이야기는 독자가 볼 수 있는 곳에#
오픈소스판의 네 천체는 이 방식이 가장 철저하게 시험받은 경우였다. 자료를 찾고 실제 이야기대로 그리는 건, 솔직히 말해 흉내일 뿐이다. 자료만 있으면 누구나 할 수 있다. 정말 어려운 건 그것을 어떻게 들여오느냐, 그리고 이치에 맞게, 사이트 전체와 조화롭게 들여오느냐다. 독자가 볼 수 없는 곳에 이야기를 만들어 두면 안 한 것과 같고, 들여왔는데 겉돌면 안 한 것보다 못하다.
해왕성 첫 버전을 다 만들고 보니, 페이지 전환이 토성과 거의 똑같아 보였다. 대부분의 전환 화면은 페이지마다 고유하게 거두고 펼치는 방식이라, 테마가 바꿀 수 있는 곳은 사실 아주 적었다. 그래서 독자가 반드시 보게 되는 위치를 먼저 적고, 이야기를 하나씩 넣었다.
| 보이는 위치 | 토성 | 해왕성 | 블랙홀 | 베텔게우스 |
|---|---|---|---|---|
| 오프닝 로딩 | 펜촉이 고리를 따라 한 바퀴 그린다 | 애덤스 고리의 네 호가 비율대로 한 바퀴를 채운다 | 물질이 나선팔을 따라 점으로 감겨 들고, 로딩이 끝나면 광자 고리가 빛난다 | 동반성이 기울어진 궤도를 따라 한 바퀴 돈다 |
| 점이 나는 길 | 곧게 난다 | 중력 새총, 작은 해왕성 하나를 돌아 나간다 | 작은 블랙홀 옆에서 탈출한다. 출발할 때 붙잡히고 길게 늘어난다 | 점 자체가 숨을 쉰다 |
| 점이 끄는 빛 | 호박색 혜성 꼬리 | 옅은 헤어라인 위의 밝은 호 네 개 | 보랏빛, 오래된 것일수록 블랙홀로 끌려가 어두워진다 | 가는 내내 먼지 껍질을 한 덩이씩 뿜어낸다 |
| 착지 | 페이지의 선을 따라 내려앉는다 | 착지점에 예언의 원이 먼저 떠오른다 | 아주 옅은 점선의 중력파 하나 | 페이지의 선을 따라 내려앉는다 |
| 홈 | 위성을 실제 간격대로 배치, 북극 육각형, 엔켈라두스의 얼음 분수 | 트리톤은 역행하고 기울어져 있고, 네레이드는 납작한 타원, 대흑점 | S 별의 납작한 타원 궤도가 천천히 세차운동하고, 배경 별은 중력 렌즈로 휜다 | 7초마다 한 번 부풀었다 줄고, 동반성이 바짝 붙어 돈다 |
각 칸을 넣기 전에 세 가지 질문으로 점검한다.
그 크기에서도 읽히는가#
이야기를 점 하나, 선 하나로 줄이면 너무 추상적으로 변하기 쉽다. 토성에는 아주 좋은 이야기가 있다. 카시니호는 마지막에 토성과 고리 사이를 22번 통과했다. 하지만 문자 그대로 페이지 전환으로 만들면 점 하나에 줄어든 채로는 아무 의미도 읽히지 않아서, 넣지 않았다.
블랙홀의 전환도 그랬다. 첫 버전에서는 시간 지연, 스파게티화, 중력파를 모두 페이지 전환에 넣었는데, 만들고 보니 원 하나가 이리저리 날아다니는 것만 보였다. 화면에 블랙홀이 없으니 독자는 점이 왜 그렇게 움직이는지 알 수 없었다. 블랙홀이 직접 등장하도록 바꾼 뒤에야 읽히게 됐다.
해왕성의 새총도 마찬가지였다. 점이 돌아 나가는 그 별은 처음에는 옅은 작은 원일 뿐이어서 노이즈처럼 보였다. 새김선으로 그린 작은 해왕성으로 바꾸자, 별 하나를 돌아 나간다는 게 한눈에 보였다. 이야기의 주인공은 보여야 한다.
사실대로 그릴까, 조화롭게 그릴까#
사실적이라고 읽기 쉬운 것도 아니고, 조화로운 것도 아니다. 이럴 때는 둘을 함께 지키는 방법을 찾아야 한다. 해왕성의 오프닝은 애덤스 고리에 실제로 있는 밝은 호 네 개다. 길이는 제각각이고 모두 40° 남짓한 범위에 몰려 있어서, 로딩 바로 쓰기에는 아주 읽기 어렵다. 네 등분하면 가장 읽기 쉽지만 해왕성과는 관계가 없어진다. 결국 실제 길이 비율은 유지한 채, 같은 비율로 키워 한 바퀴를 채웠다.
베텔게우스의 표면도 그렇다. 실제 사진은 흐릿한 빛 얼룩일 뿐이라, 그대로 그리면 아주 추상적이고 사이트의 새김선과도 맞지 않는다. 그래서 새김선은 유지하고, 선이 대류 세포 덩어리들을 감싸며 말려 들게 해서, 들끓는 별이라는 것만 알아볼 수 있게 했다.
다른 벌들과 같은 체계인가#
베텔게우스가 넷 중 가장 어려웠다. 항성이라 스스로 빛나고, 명암 경계선도 없고 고리도 없어서, 토성과 해왕성에서 가져다 쓸 수 있던 것을 거의 다 새로 찾아야 했다. 오프닝만 세 번을 고쳤다.
첫 버전은 그렇게 작은 범위에 줄여 놓으니 그냥 과녁이었고, 읽히지 않았다. 두 번째 버전은 읽히긴 했지만, 다른 세 천체의 오프닝은 모두 비스듬한 유사 3D 로딩인데 이것만 평평해서, 다른 벌들과 같은 체계가 아니었다. 세 번째 버전에서야 세 관문을 모두 통과했다. 동반성이 다른 테마와 같은 경사의 기울어진 궤도를 따라 한 바퀴 도는데, 이것 자체가 이야기다. 천문학자들은 처음에 베텔게우스의 밝기에 나타나는 약 6년 주기의 긴 변화를 보고, 동반성이 그 주위를 돌고 있다고 추측했다.
이 관문은 거꾸로 예전 것을 점검하기도 한다. 베텔게우스를 다 만들고 나니, 오히려 토성이 자기 이야기가 없는 유일한 천체가 되었다. 표에서 토성 칸의 홈 항목 세 가지는 모두 그때 와서야 채운 것이다.
문구는 기능이 아니라 이야기를 말한다#
글도 디자인의 일부다. 천체마다 내가 쓴 한 문장이 있고, 상단 바의 천체 메뉴에 마우스를 올리면 옆에 그 이야기가 나타난다.
| 천체 | 한 문장 |
|---|---|
| 토성 | 얼음을 고리로 두르고, 언젠가 돌려준다. |
| 해왕성 | 모습을 보기 전에, 자리를 먼저 알았다. |
| 블랙홀 | 빛도 되돌아가고, 시간도 멈춘다. |
| 베텔게우스 | 숨 쉬는 사이, 별의 먼지가 되어 간다. |
처음에 그 설명에는 '페이지를 넘길 때 점이 어떻게 되는지'를 썼다. 기능을 쓴 것이다. 내 원칙은 이렇다. 이야기를 설명하고, 화면이 무엇을 연기하는지는 독자가 스스로 떠올리게 한다. 블랙홀은 빛조차 끌어당긴다는 걸 아는 독자라면, 점이 탈출할 때 뒤의 빛이 끌려가는 것을 보고 바로 이해한다.
이곳은 우주의 금지 구역이다. 빛은 여기서 되돌아가고, 시간은 여기서 멈춘다. 모든 것이 떨어져 들어가고, 돌아갈 길은 없다. 인간이 써 온 어떤 법칙도 여기서는 살아남지 못한다.
글에도 덜어내기는 똑같이 통한다. 나는 군더더기 말을 싫어하고, 동화 같은 말투도 싫어한다. 한 문장으로 끝낼 수 있으면 두 문장으로 쓰지 않는다.
남이 쓰게 할 때는 다이얼이 아니라 프리셋을#
디자인을 다른 사람이 쓰게 된다면, 예를 들어 템플릿으로 오픈소스화한다면, 마지막으로 얼마나 열어 줄지 정해야 한다.
나는 자유로운 색 조정을 열지 않기로 했다. 고를 수 있는 건 내가 만들어 둔 천체 몇 개이고, 각 천체의 색, 행성, 전환, 문구는 모두 한 벌로 조율되어 있다. 자유롭게 채울 수 있는 건 콘텐츠뿐이다. 공들여 만든 프리셋 몇 개를 주고 내 미감의 범위 안에서 고르게 하면, 사이트 전체의 질감을 지키면서도 모두에게 '이건 내 것'이라는 느낌을 조금씩 줄 수 있다.
이것도 덜어내기다. 다만 빼는 것이 다이얼일 뿐이다. 앞의 모든 단계는 요소들을 서로 조화롭게 만드는 일이었다. 임의의 색 코드를 열어 주는 건, 그중 한 조각을 누구나 손쉽게 뜯어낼 수 있게 하는 것과 같다.
자기 사이트에서 시작하기#
따라 할 수 있는 체크리스트로 정리하면 이렇다.
계속 파고들고 싶은 주제를 하나 고른다. '독자는 어디에, 페이지 전환, 로딩, 404, 댓글, 나와서는 안 되는 것'을 표로 적고, 그 주제로 하나씩 답한다. 답하지 못하는 요소는 일단 뺀다.
무엇을 내주고 무엇을 얻는지 분명히 한다. 골랐으면 대가를 성실히 메우고, 중간에 물러서지 않는다.
독자가 어디에 서서, 어떤 각도로 보는지. 내용이 평평할 때만 평면을 쓰고, 카메라가 움직일 때는 배경에 시차를 준다.
새 컴포넌트는 모두 어느 획으로 이루어졌는지 말할 수 있어야 한다. 무언가를 더하기 전에 먼저 생각한다. 이걸 빼면 화면에서 무엇이 사라지는가? 답하지 못하면 넣지 않는다.
종이, 먹, 신호색 하나, 경고색 하나. 먹은 투명도로 층을 나누고 대비를 측정한다. 신호색에는 뜻을 하나만 주고, 마지막으로 흑백 테스트를 한다.
시간, 순서, 공간, 이치, 필치. 그리고 질문 하나 더. 그다음은 무엇인가?
실제의 것과 대조하고, 남들이 어떻게 하는지 보고, 사양을 정확히 확인한 뒤, 내 어휘로 다시 그린다.
독자가 반드시 보게 되는 곳을 먼저 적고, '읽히는가, 조화로운가, 다른 것들과 같은 체계인가' 세 질문으로 거른다.
이 단계들은 '어딘가 이상하다'는 느낌을 분해해서 어느 이음매인지 찾도록 도와주지만, 눈을 대신해 주지는 못한다. 무엇이 조화롭지 않은지 알아보는 눈은 시간을 들여 길러야 하고, 내가 아는 방법은 하나뿐이다. 정말 좋은 것을 많이 보고, 뜯어서 연구하고, 다시 내 것을 돌아보는 것. 만든 것이 좋은지 아닌지는, 결국 스스로 그것을 좋아하는지로 돌아온다.