TECH 으로 돌아가기
TECH HACKER NEWS 오늘 6분 읽기 29 READS

브라우저에서 만들고 받는 SVG 패턴 갤러리 '북 오브 셰이프스'

브라우저에서 만들고 받는 SVG 패턴 갤러리 '북 오브 셰이프스'
SOURCE IMAGE · HACKER NEWS

웹과 앱의 시각적 배경, 포스터, 브랜딩 그래픽을 다룰 때 반복되는 고민이 있다. 밋밋한 단색은 심심하고, 사진이나 비트맵 텍스처는 무겁고 확대하면 깨진다. 이런 틈을 겨냥한 서비스가 '북 오브 셰이프스(Book of Shapes)'다. 디자이너 니콜라이 소콜로프스키(Nikolaj Sokolowski)가 만든 이 사이트는 미니멀하면서 알고리즘으로 생성되는, 그리고 사용자가 직접 조정할 수 있는 SVG 패턴을 모아둔 큐레이션 갤러리를 표방한다. 핵심 동작은 세 가지로 요약된다. 패턴을 탐색하고(discover), 입맛에 맞게 바꾸고(customize), 내려받는(download) 흐름이다.

왜 SVG이고 왜 '생성형'인가

이 서비스의 성격을 이해하려면 두 개념을 짚어야 한다. 하나는 SVG라는 포맷이다. SVG는 픽셀이 아니라 좌표와 곡선, 도형의 수학적 정의로 이미지를 기술하는 벡터 형식이다. 그래서 어떤 해상도로 확대해도 선명함이 유지되고, 레티나 디스플레이든 대형 인쇄물이든 하나의 파일로 대응된다. 파일 자체가 텍스트 기반이라 용량이 작고, 색상이나 선 굵기 같은 속성을 코드나 CSS로 사후에 조정하기도 쉽다. 웹 성능과 유지보수 관점에서 비트맵 텍스처보다 다루기 편한 자산이라는 뜻이다.

다른 하나는 '생성형(generative)'이라는 수식어다. 생성형 패턴은 디자이너가 점 하나하나를 손으로 찍는 대신, 규칙과 알고리즘이 형태를 만들어내는 방식을 가리킨다. 몇 가지 파라미터를 바꾸는 것만으로 서로 다른 변주가 무한히 파생될 수 있다는 점이 전통적인 고정 소재와 갈라지는 지점이다. 북 오브 셰이프스가 '커스터마이즈 가능'을 전면에 내세운 것도 이 특성과 맞닿아 있다. 완성된 그림을 집어 가는 스톡 이미지와 달리, 사용자가 변수를 건드려 자기 것으로 만드는 과정을 전제한다.

실무자에게 어떤 쓸모가 있나

프런트엔드 개발자나 프로덕트 디자이너 입장에서 이런 도구의 가치는 분명하다. 랜딩 페이지의 히어로 영역 배경, 빈 상태(empty state) 화면, 카드 컴포넌트의 장식, 발표 자료나 소셜 공유 이미지의 바탕 등은 늘 '적당히 있어 보이지만 무겁지 않은' 그래픽을 필요로 한다. 직접 디자인 도구를 열어 패턴을 그리는 것은 시간이 들고, 유료 소재 사이트는 라이선스와 비용이 걸린다. 브라우저에서 바로 조정하고 벡터 파일로 받아 코드에 끼워 넣을 수 있다면 그 사이의 마찰이 크게 줄어든다. 미니멀을 지향한다는 점도 특정 트렌드에 과하게 물들지 않아 다양한 서비스 톤에 얹기 좋다.

개인이 큐레이션한 갤러리라는 성격도 양면적이다. 한 사람의 감각으로 선별된 만큼 결과물의 톤에 일관성이 있고, 잡다한 자동 생성물 더미를 헤매지 않아도 된다는 장점이 있다. 반대로 수록 범위는 그 개인의 취향과 작업량에 좌우되므로, 대형 소재 플랫폼처럼 방대한 카테고리를 기대하기는 어렵다. 특정 산업군이나 매우 구체적인 비주얼을 찾는다면 선택지가 한정적일 수 있다.

도입 전에 확인할 것

다만 공개된 설명만으로는 아직 판단을 유보해야 할 부분이 많다. 가장 중요한 라이선스와 이용 조건, 즉 상업적 프로젝트에 써도 되는지, 출처 표기가 필요한지, 유·무료 구분이 있는지는 소개 문구에서 드러나지 않는다. 커스터마이즈가 색상과 간격 정도의 조정인지, 아니면 형태 알고리즘 자체를 깊게 제어하는 수준인지도 확인이 필요하다. 다운로드 포맷이 SVG 외에 PNG 등 다른 형식도 지원하는지, 생성된 코드의 최적화 수준은 어떤지 역시 실제 작업 품질을 좌우하는 요소다. 실무 투입을 고려한다면 이런 조건들을 사이트에서 직접 짚어본 뒤 결정하는 편이 안전하다.

결국 북 오브 셰이프스는 '생성형 디자인 자산을 브라우저에서 가볍게 조립해 가져간다'는, 최근 늘고 있는 웹 기반 디자인 유틸리티 흐름 위에 놓인 서비스다. 거창한 기능보다는 벡터·생성형·커스터마이즈라는 세 가지 속성을 명확히 겨냥했다는 점이 특징이며, 손이 많이 가지 않는 배경 그래픽이 상시 필요한 팀이라면 북마크해 둘 만한 후보다. 그 이상의 평가는 라이선스와 편집 자유도를 직접 확인한 다음에 내리는 것이 합리적이다.

SOURCE · HACKER NEWS
원문 전체 보기 → https://bookofshapes.com/
SHARE
NEXT · CHOOSE

변화를 읽었다면,
내가 만들 수익 구조를 고릅니다.

정보를 더 모으는 데서 멈추지 않고, 광고·외주·판매·중개·구독 중 내 상황에 맞는 출발점을 정해보세요.

21가지 수익 구조 살펴보기 →
처리 중...