매년 애플 발표회가 끝나면 친구들 피드가 난리 납니다. 새 아이폰, 새 아이패드 이야기 외에, 사실 디자이너들이 가장 바쁜 건 스펙 보는 게 아니라 애플 공식 사이트의 디자인 디테일을 뜯어보는 거예요. 왜냐고요? 애플이 리뉴얼할 때마다 그 색감, 그 그라데이션, 그 빛과 그림자 처리는 정말 사랑스럽기도 하고 미치게도 하거든요. 사랑스러운 건 정말 예쁘다는 거고, 미치는 건 도무지 그 느낌을 흉내 낼 수 없다는 거죠.
예전에는 애플 스타일 그라데이션을 만들려면 포토샵에서 슬라이더를 조절하거나 코드에서 색상 값을 직접 입력해야 했어요. 한참을 하다 보면 눈이 빠질 정도였죠. 그런데 올해는 달라요. 주변 디자이너들, 그리고 저 자신도 몰래 'CSS 그라데이션 생성기'라는 도구를 쓰고 있다는 걸 알게 됐어요. 이걸 얕보지 마세요. 애플 스타일 디자인의 치트키나 다름없거든요.
이 도구의 장점이 뭘까요? 우선 빠르다는 거예요. 부드럽고 고급스러운 그라데이션이 필요할 때, 더 이상 색상 팔레트 사이트를 뒤질 필요 없이, 도구에서 비슷한 색 몇 개를 고르고 방향을 드래그하고 투명도를 조절하면 바로 그 느낌이 나요. 가장 중요한 건, CSS 코드를 생성해 준다는 점이에요. 그대로 복사해서 프로젝트에 붙여넣기만 하면 되니까, 스크린샷 찍고 색상 값을 일일이 측정하는 과정이 필요 없어요. 효율이 어마어마하게 올라가죠.
또 하나는 프리셋 모드예요. 애플 발표회의 배경화면이나 프로모션 페이지는 대부분 큰 색 블록에 약간의 다이내믹한 빛 효과가 들어간 스타일이잖아요. 이 도구에 내장된 프리셋 중 상당수가 바로 이런 스타일을 따라 만들어졌어요. 비슷한 걸 고른 다음 각도를 조금 바꾸거나 중간 색상 위치를 옮기면, 포토샵에서 막연하게 시도하는 것보다 훨씬 나은 결과물이 나와요. 저는 그 며칠 동안 프로젝트 배경을 만들 때 이걸로 해결했는데, 클라이언트가 "오, 이 느낌 맞네, 고급스럽다"고 하더라고요. 속으로는 '애플한테 배웠지 뭐' 하면서 웃었죠.
혹시 이 도구가 화려한 테크 스타일에만 어울리는 거 아니냐고 물을 수도 있어요. 전혀 아니에요. 아주 차분하고 소박한 그라데이션도 만들 수 있어요. 예를 들어 옅은 회색에서 크림색으로 이어지는 전환 같은 건, 관리자 화면이나 문서 페이지에 쓰면 깔끔하고 산뜻해요. 핵심은 색상 선택기가 직관적이라는 거예요. 머릿속에 떠오르는 느낌대로 색을 고르면 되고, 고민할 필요 없이 보이는 그대로 결과물이 나와요.
게다가 프런트엔드 개발자에게 이 도구는 그야말로 보물이에요. 예전에는 그라데이션 배경을 만들 때 접두사를 붙여야 하는지, 브라우저 호환 코드를 추가해야 하는지 기억해야 했죠. 이제는 한 번의 클릭으로 표준 문법과 호환성까지 고려된 코드가 생성돼요. 복사해서 붙여넣고 브라우저를 새로고침하면, 상상했던 그대로의 효과가 나타나요. 절약한 시간에 잠시 쉬거나 다른 디테일을 다듬는 게 훨씬 낫지 않아요?
그러니까 애플 발표회는 끝났지만, 그 디자인 미학의 흐름은 계속되고 있어요. 디자이너들 사이에 퍼지는 작은 비밀은 대단한 기술이 아니라, 이렇게 편리한 소소한 도구인 경우가 많아요. 최근에 페이지 배경, 카드 질감, 버튼 광택 효과 때문에 고민하고 있다면, 정말 혼자 끙끙대지 말고 이 CSS 그라데이션 생성기를 사용해 보세요. 애플과의 '거리'가 사실 이 작은 도구 하나 차이일 수도 있다는 걸 발견하게 될 거예요.
자, 그럼 조용히 혼자만 쓰세요. 다들 알게 되면 차별화가 안 되잖아요. 얼른 즐겨찾기에 추가해 두고, 다음에 디자인할 때 "이렇게 간단했어?"라는 쾌감을 느껴 보세요.