디자인에서 ‘금박 입히기’는 늘 나쁜 것만은 아니다. 단, 먼저 기본기를 완성해 ‘백합’을 만들고, 그 위에 단 하나의 섬세한 장식을 신중하게 더려야 한다는 이야기다.
“백합에 금박 입히기(gilding the lily)”는 항상 나쁜 것만은 아니다. 디자인에서 은은한 애니메이션 전환, 살짝 더한 색감, 드롭 섀도의 깊이처럼 비유적인 ‘금빛’을 한 방울 더하는 것은, 신뢰를 쌓아주는 세심함과 주의를 조용히 드러내 줄 수 있다. 단, 그전에? 먼저 백합이 있어야 한다. 기본기를 완성해야 한다. 그리고 나서, 조심스럽게 금박을 입혀야 한다.
“Gild the lily”라는 표현은 불필요한 장식을 뜻한다. 이미 아름다운 백합에 겉멋만 든 장식을 더하면, 오히려 본연의 아름다움을 가린다는 의미다. 그런데 여기서 하고 싶은 말은, 디자인에서는 겉으로 보기엔 불필요해 보이는 장식을 약간 더해주는 것이야말로 지금 필요한 것일 수 있다는 것이다.
디자인의 기본이 탄탄하게 잡혀 있다면, 그 위에 단 하나의 장식 레이어를 더해 주는 것만으로도 정성과 집중이 스며들어 있다는 메시지를 전달할 수 있다.
“백합에 금박을 입힌다”는 비유를 한 번 쪼개 보자. 먼저 백합이 필요하다. 백합은 원래부터 아름답고, 하나하나가 고유하다. 더 장식할 필요가 없다. 이 비유를 그대로 가져와서 생각해 보면, 여러분의 디자인이 이미 충분히 훌륭하다고 가정해야 한다. 그렇지 않다면, 아직 백합이 없다. 기본기로 돌아가 다시 다듬고, 나중에 다시 오자(혹은 그냥 계속 읽어도 된다).
이제 백합이 준비되었으니, 금박 이야기를 해 보자. “금박을 입힌다(gild)”는 건, 아주 얇은 금의 막을 표면에 덮는다는 뜻이다. 여기서 말하는 건 제품의 영혼 깊숙이 스며 있는 본질적인 아름다움이 아니다(그건 이 비유에서 _백합_에 해당한다). 표면에 아주 살짝 비유적인 금박을 입혀 주는 것만으로도 약간의 호화로움을 풍기며 즐거움을 전달할 수 있다.
이 금박은 살짝 들어가는 애니메이션 전환일 수도 있고, 색을 한 톤 얹어 준다거나 드롭 섀도에 약간의 깊이를 더해 주는 것일 수도 있다. 구체적인 예를 보기 전에, 이 비유가 너무 멀리 나가지 않도록 선부터 그어 두자.
금박을 너무 두껍게, 너무 많이 바르면, 은근한 호화로움이 아니라 방탕함과 과잉만 전하게 된다.
과하게 치장한 디자인은, 보는 사람의 상태에 따라 특히 더 거슬릴 수 있다. 예를 들어, 새로 만든 AI 채팅 기능을 자랑하는 화려한 애니메이션이 있다고 해 보자. 비밀번호를 못 바꾸고 서비스 접속조차 못 하고 있는, 이미 지쳐 있는 고객에게 그 애니메이션이 얼마나 잘 먹힐까?
모든 훌륭한 제품 디자인이 백합처럼 눈에 띄게 아름다울 수는 없다. 디자인이 정말 잘 되어 있어도, 그 혜택을 누리는 사람들에게는 잘 보이지 않을 수 있다. 사실, 우리의 디자인은 늘 눈에 띄지 않아야 할 때가 많다. 하지만 가끔은, 눈에 띄는 훌륭한 디자인을 발견하고 즐길 수 있으면 좋기도 하다.
애플이라면 이런 걱정을 할 필요가 없다. 아무도 애플 웹사이트의 배경색이 흰색(#FFFFFF)인 이유를, 스타일시트에서 배경색을 지정하는 걸 깜빡했기 때문이라고 생각하지 않는다(나는 웹의 기본 배경색이 군함 회색, **#CCCCCC**였던 시절을 기억할 정도로 나이가 많다). 애플 사이트 전체에서 느껴지는 세밀한 정제와 높은 완성도 덕분에, 이 흰 배경은 명백히 의도적인 _선택_이라는 걸 누구나 알 수 있다.
애플 웹사이트. 조니 아이브의 새하얀 세계 속, 대표적인 제품 사진들이 배치되어 있다. (큰 이미지 보기)
당신도, 나도 애플이 아니다. 당신의 클라이언트 역시 (아마도) 애플이 아니다. 쿠퍼티노의 유리 우주선 사옥 안에서 일하는, 세계 최고급 제품 사진가와 모션 디자이너 군단을 갖고 있지 않다. 당신은 소규모 팀에서 빡빡한 예산과 일정에 치이며 일하고 있다. 그럼에도 이런 제약 속에서 훌륭한 제품을 만들어 내고 있다.
당신의 제품 뒤에 숨은 뛰어난 디자인은, 너무 잘 만들어져서 오히려 보이지 않을 수 있다. 손잡이가 너무 자연스럽게 손에 감기면, 사람들이 그 모양이 얼마나 잘 설계되었는지 의식하지 못한다. 버튼이 너무 잘 배치되어 있으면, 그 위치에 대해 누구도 생각조차 하지 않는다.
기본기를 완벽하게 잡고 있다면, 가끔은 관객에게 살짝 윙크해도 괜찮다. 괜찮을 뿐 아니라, 그게 오히려 디자인을 보강해 줄 수도 있다.
디자인의 사려 깊음을 살짝 드러내면, 사용 경험이 한층 더 즐거워질 수 있다. 하지만 그 선을 한 치만 넘어가면, 경험을 방해하며 박수 받기를 요구하는 꼴이 된다. 이 경계를 조심스럽게 걸어야 한다.
아무리 금과 백합이 나와도, 비유는 결국 비유일 뿐이다. 이제 디지털 제품에서 ‘금박’을 어떻게 입힐 수 있는지, 좀 더 구체적인 예를 보자. 웹에서 쓸 수 있는 작은 마감 처리(p polish)의 예로는 이런 것들이 있다.
Supabase 사이트는 다크 테마와 라이트 테마를 모두 제공하는데, 둘 다 순수한 검정·흰색에서 살짝 비켜나 있다(스크린샷 하단에 순수 블랙과 순수 화이트를 함께 보여, 그 미묘한 차이를 강조한다). (큰 이미지 보기)
완전한 검정도, 완전한 흰색도 아닌 색: 웹에서 완전한 검정(#000000)과 완전한 흰색(#FFFFFF) 대신 미묘한 변주를 찾아보자. 얼핏 보면 검정/흰색처럼 보이지만, 은근하게 ‘공들였다’는 인상을 준다. 약간 벗어난 오프 화이트 배경을 쓰면, 그 위에 폼 입력 요소처럼 완전히 흰색인 요소를 올렸을 때 더욱 또렷하게 부각되기도 한다. 다만, 텍스트의 접근성을 보장할 만큼 충분한 명도 대비는 반드시 유지해야 한다.
Josh W. Comeau의 예시는 그림자에 색을 더하면 어떻게 더 좋아지는지 보여 준다. (큰 이미지 보기)
레이어드되고, 색이 살짝 섞인 그림자: Josh Comeau는 그림자에 색을 섞는 방법에 대해 설명하며, 더 ‘기분 좋은’ 그림자를 만들어 주는 도구까지 제공한다.
Utopia 블로그에 실린 이 차트는, 뷰포트 너비에 비례해 폰트 크기가 얼마나 부드럽게 확장될 수 있는지를 보여 준다. (큰 이미지 보기)
편안한 글자 모양과 간격: 사용 중인 폰트 패밀리에 어울리는 줄 간격(line-height)과 자간(letter-spacing)을 찾아라. Utopia 같은 반응형 타이포 시스템을 쓰면, 다양한 기기 크기에서 보기에도, 읽기에도 편안한 간격을 정의하는 데 도움이 된다.
One React 프레임워크 사이트는 상단에 독특한 색상의 띠를 사용한다. 색상 요소의 완만한 곡선을 눈여겨보자. (큰 이미지 보기)
한 방울의 색: 브랜드 컬러가 디자인 전체를 압도하길 원치 않거나, 단조로운 사이트에 보조 색을 한 톤 얹고 싶을 때는, 뷰포트 상단에 단 하나의 단순한 색 띠를 추가하는 방법을 고려해 보자. 몇 픽셀 두께만으로도 전체 디자인을 복잡하게 만들지 않으면서, 보기 좋은 색감을 더할 수 있다. One React 웹 프레임워크 사이트는 이 기법을 참 잘 쓰고, 거기에 한 발 더 나아가 상단에 독특한 모양의 노란색 악센트를 넣었다. 다크 모드 디자인에서 보면 더 미묘하지만, 여전히 존재감을 가진다.
A List Apart 사이트는 기사마다 맞춤 일러스트를 사용한다. 이는 AI 이미지 생성이 등장하기 훨씬 전부터 이어져 온 전통이다. 기념비적인 글인 Responsive Web Design을 열어 브라우저 크기를 조절해 보면, 특히 절묘한 반응을 확인할 수 있다. (큰 이미지 보기)
일러스트레이션과 사진: 요즘은 웹사이트에 쓸 아기자기하고 재미있는 일러스트를 찾기 굉장히 쉬워졌다. 그래도, 어떤 상황에 딱 맞게 이 사례를 위해서만 그려진 듯한 일러스트나 사진을 대체할 스톡 이미지는 없다. A List Apart는 수십 년 동안 각 기사마다 통일된 스타일의 고유한 일러스트를 커미션해서 써 왔다. 당신이 뛰어난 일러스트레이터일 필요는 없다. 서툰 낙서에도 나름의 매력이 있을 수 있다. 그렇지 않다면, 훌륭한 아티스트를 고용하는 것도 방법이다.
사치의 상징이 가치 있는 이유는, 뭔가를 실제로 ‘귀하게’ 만들기 때문이다. 그래서 우리는 금이 아니라 황동으로 금박을 입힌다고 말하지 않는다. 또, 둥근 모서리의 명함이 단순한 직사각형 카드보다 더 고급스럽게 느껴지는 이유도 같다. 더 비싸 보이는데, 사실 실제로도 더 비싸게 들기 때문이다.
하지만 요즘은 인쇄 비용이 많이 싸졌다. 프리미엄처럼 느껴지는 처리라도 마찬가지다. 둥근 모서리, 매끈한 코팅 같은 인쇄상의 장식은, 동네 인쇄소(혹은 저렴한 온라인 인쇄 서비스)가 빠르게 제공하는 업셀 옵션이 되면서, 예전만큼의 가치와 정성을 전하지 못하게 됐다.
과거에는, 정성껏 잘 써 내려간 자기소개서나 커버 레터가 비슷한 이력서 더미 속에서 눈에 띌 수 있는 좋은 수단이었다. 하지만 이제는, 사람이 듣고 싶어 할 말만 정확히 골라 써 주는 AI·LLM 기반 커버 레터가 벽처럼 쌓인 상황에서, 그 속에서 눈에 띄려면 완전히 다른 접근이 필요하다.
웹에서도 마찬가지다. 예전에는 스크롤할 때마다 섹션이 슬라이드 인·페이드 인 애니메이션과 함께 등장하는 랜딩 페이지가, 누군가 구현에 공을 들였다는 신호처럼 보였다. 하지만 이제는 모션이 지나치게 많은 페이지가 오히려 Wix, Squarespace, Webflow 같은 사이트 빌더로 만든 수많은 템플릿과 비슷하게 느껴진다.
커스텀 웹폰트 역시 너무나 쉽게, 너무나 흔하게 쓰이게 되었다. 그래서 오히려 시스템 기본 폰트를 고집하는 편이 멋진 서체 못지않게 강한 메시지가 되기도 한다.
당신의 사이트에 있는 드롭 섀도우에 살짝 색을 섞어 넣었다는 걸, 모두가 알아볼까? 아니. 누군가 알아줄까? 아마 그럴 가능성도 높진 않다. 그래도 디테일을 제대로 챙겨 놓으면, 사람들은 그걸 느끼게 된다. 이런 수준의 마감은 누적 효과를 일으킨다. 경험 전반에 여기서 1%, 저기서 1%를 더해 준다. 사람들은 드롭 섀도 색조가 정확히 어떤지 모르더라도, 그 디자인에 들어간 정성에서 묵직한 신뢰감을 받게 될 수 있다.
대부분의 사람은 웹 개발자도, 디자이너도 아니다. CSS 애니메이션이나 box-shadow가 어떻게 구현되는지 알지 못한다. 마찬가지로, 나는 자동차 전문가가 아니다 — 전혀 아니다. 나는 차에서 성능이나 럭셔리보다, 신뢰성과 가격대를 더 중요하게 생각한다. 그럼에도, 고급 차 문의 문을 닫을 때 느껴지는 _감각_의 차이는 분명 느낄 수 있다.
다음 프로젝트에서는, 스스로에게 이렇게 허락해 보자. 백합 하나에만 금박을 입히자.
(gg, yk)
