250x250 사이트에 갇혀버린 내 디자인 원칙

솔직히 말하면, 처음엔 그냥 호기심이었습니다. 해커뉴스(Hacker News)를 눈팅하다가 'WebTiles'라는 걸 발견했거든요. 250x250 픽셀의 작은 공간을 내 마음대로 꾸미고, 그 옆에 또 다른 누군가가 250x250 픽셀의 집을 짓는다는 콘셉트였습니다.

인턴 시절 플러스엑스에서 거대한 디자인 시스템을 만지작거릴 때나, 쏘카에서 사용자 여정 지도를 그릴 때와는 전혀 다른 세상이었죠.

"그래, 디자인은 원래 제약 속에서 피어나는 법이지."

패기롭게 회원가입 버튼을 누르고 0, 0 좌표 옆 어딘가에 자리를 잡았습니다. 하지만 곧 깨달았습니다. 제가 그동안 갈고닦았던 '논리'와 '시스템'이라는 무기가 이 좁아터진 픽셀 앞에서 얼마나 무력해질 수 있는지 말이죠. 오늘은 철저한 기획과 논리를 숭배하던 제가, 기획서도 없는 250px 공간에서 어떻게 무너지고 다시 일어섰는지에 대한 부끄러운 고백을 해보려 합니다.

왜 250px인가? 제약이 주는 공포

처음 받은 빈 캔버스는 정말 작았습니다. 요즘 스마트폰 해상도가 얼마인지 아시나요? 아이폰 14 프로 기준으로 가로가 1179px입니다. 그런데 250px이라뇨. 이건 마치 광활한 4K 모니터를 쓰다가 갑자기 다마고치 화면으로 디자인을 하라는 것과 같았습니다.

직업병이 도졌습니다. 습관적으로 그리드를 나누려고 했죠.

'여백은 8px 배수로 가야 하니까 16px 마진을 주고, 타이포그래피 계층은 H1, H2, Body로 나누고...'

계산기를 두드리다 보니 뭔가 잘못됐다는 걸 느꼈습니다. 250px 안에 시스템을 욱여넣으려니 콘텐츠가 들어갈 자리가 없는 겁니다. 버튼 하나를 44px(최소 터치 영역)로 잡으면 화면의 1/5이 날아갑니다.

제가 그동안 신봉해왔던 '사용성 가이드라인'과 '최소 터치 영역' 같은 규칙들이 여기서는 사치였습니다. 논리적으로 완벽한 UI를 만들려다가, 정작 아무것도 담지 못하는 '죽은 디자인'을 하고 있었던 거죠.

옆집 이웃의 무질서함이 주는 충격

더 큰 충격은 제 타일 바로 옆집들이었습니다. 0, 0 좌표 주변에는 이미 선점한 이웃들이 있었는데, 그들의 디자인은 그야말로 '무질서의 향연'이었습니다.

어떤 집은 1990년대 웹사이트처럼 텍스트만 빼곡히 채워놓았고, 어떤 집은 marquee 태그를 써서 글자가 미친 듯이 흘러가고 있었습니다. GIF 짤방 하나로 꽉 채운 집도 있었고요.

"아니, 시각적 위계질서는? 가독성은? 컬러 팔레트는?"

제 머릿속의 디자이너 자아가 비명을 질렀습니다. 하지만 묘하게도 그 무질서함 속에서 에너지가 느껴졌습니다. 그들은 저처럼 "왜 이 버튼이 여기 있어야 하는가?"를 고민하지 않았습니다. 그저 "내가 이걸 좋아하니까"라는 아주 단순하고 강력한 이유로 픽셀을 채우고 있었습니다.

클라이언트가 "뭔가 엣지있게"라고 말할 때마다 속으로 욕을 삼키며 "구체적인 레퍼런스를 달라"고 요구했던 저였습니다. 그런데 정작 아무런 제약도, 클라이언트도 없는 자유로운 공간에 던져지니, 저는 스스로 만든 감옥에 갇혀 꼼짝도 못 하고 있었던 겁니다.

논리적 디자인과 표현의 욕구 사이

결국 저는 피그마(Figma)를 끄고, 브라우저에서 직접 코드를 치기 시작했습니다.

완벽한 정렬? 포기했습니다.
세련된 컬러 시스템? 무시했습니다.

대신 저의 현재 상태를 가장 잘 보여주는 텍스트 한 줄과, 제가 좋아하는 고양이 사진 한 장을 넣었습니다. border-radius를 몇 줄지, box-shadow의 투명도는 몇으로 할지 고민하는 시간을 없앴습니다.

WebTiles에서의 경험은 저에게 중요한 질문을 던졌습니다.

"나는 사용자를 설득하기 위해 디자인하는가, 아니면 내 논리를 과시하기 위해 디자인하는가?"

개발자에게 1px의 오차도 허용하지 않으며 꼬치꼬치 따지던 저의 태도는, 어쩌면 불확실성을 견디지 못하는 저의 불안감에서 비롯된 것일지도 모릅니다. 때로는 논리보다 직관이, 시스템보다 무질서한 개성이 더 큰 울림을 줄 수 있다는 사실을 이 작은 250px 세상이 알려주었습니다.