팀원 셋으로 리브랜딩을 끝내야 했던 해가 있었다. 바쁜 일정과 늘어나는 요구사항 사이에서 살 길은 간결했다. 검증된 템플릿, 믿을 수 있는 아이콘 세트, 손에 익은 폰트와 사진 소스, 그리고 반복 작업을 줄여줄 컴포넌트. 그때부터 내 북마크 바는 정교해졌다. 프로젝트별, 라이선스별, 파일 포맷별로 정리된 링크모음 덕에 일정이 매번 뒤집히는 와중에도 결과물은 균질했고 품질은 오히려 올라갔다. 여기 적는 내용은 그때부터 지금까지 계속 갈아 온 사이트 주소모음과 선택 노하우다. 도구가 실력을 대신하진 않지만, 시간을 벌어주고 집중을 선사한다.
무엇을 모아야 이기는가
링크모음은 단순히 많은 URL을 나열하는 일이 아니다. 실무에서 필요한 것은 세 가지다. 첫째, 품질이 일관되고 업데이트가 꾸준한 출처. 둘째, 라이선스가 명확하고 팀 협업에 적용 가능한 조건. 셋째, 다른 도구와의 연결성이 좋은 파일 포맷. 가령 UI 키트를 고를 때도 Figma 컴포넌트로 잘 쪼개져 있는지, 오토 레이아웃과 스타일 토큰이 설계되어 있는지, 변수 기반 컬러가 준비돼 있는지 살핀다. 아이콘은 SVG로 제공되는지, 스트로크 확장 여부와 옵티컬 정렬이 합리적인지 본다. 이렇게 기준을 세우면 북마크의 절반은 바로 걸러진다.
빠르게 검증하는 체크리스트
- 라이선스 범위가 상업적 사용, 수정, 재배포 중 무엇을 포함하는지, 크레딧 표기가 필요한지 확인한다. 파일 포맷이 팀 도구와 맞는지, 예를 들어 Figma, SVG, Variable Font, Lottie JSON 등으로 제공되는지 살핀다. 버전 히스토리나 최근 업데이트 날짜가 있는지, 유지보수가 멈추지 않았는지 본다. 샘플 화면의 타이포, 그리드 정합성, 아이콘 픽셀 힌팅 등 기본기가 탄탄한지 확대해 점검한다. 작성자나 스튜디오의 포트폴리오, 이력이 검증 가능한지, 다른 사용자 피드백이 있는지 확인한다.
체크리스트를 통과한 링크만 북마크한다. 우연히 찾은 멋진 리소스도 이 과정을 거치지 않으면 프로젝트에 쓰지 않는다. 작은 규율이 나중에 수십 시간을 아껴준다.
UI 키트와 디자인 시스템, 바로 적용 가능한 것만 추리기
프로덕트 초기에는 속도가 생명이다. 이럴 때 Figma Community 같은 공개 저장소에서 완성도 높은 UI 키트를 찾는다. 추천 기준은 명확하다. 페이지 네이밍이 일관되고, 토큰 변수로 컬러와 무료웹툰 타이포가 통일되어 있으며, 컴포넌트가 원자 단위로 구성돼 있다. 버튼 변형이 네 가지뿐이라도 상태와 크기 토큰이 설정되어 있으면 실제 적용은 훨씬 수월하다. 반면 픽셀 단위 고정 프레임, 수동 패딩, 임의의 오토 레이아웃은 초기에 보기엔 깔끔해도 적용 단계에서 발목을 잡는다.
프로젝트 성격도 본다. B2B 대시보드는 데이터 밀도가 높고, 표, 필터, 피벗 같은 복잡 컴포넌트가 필요하다. 소셜 앱은 아바타, 피드 카드, 스토리 컴포넌트가 중요하다. 적합하지 않은 키트를 억지로 맞추면 결국 다시 만든다. 나는 새 프로젝트에 들어가면 먼저 도메인과 피처 맵을 적고, 거기에 맞춰 키트의 컴포넌트 커버리지를 비교한다. 70퍼센트 이상 맞아떨어지면 후보에 올리고, 그 아래면 과감히 제외한다.
아이콘, 픽토그램, 일러스트의 균형
아이콘 세트는 브랜드의 숨결을 만든다. 같은 해상도라도 두께와 코너 라운드, 엔드캡 스타일이 달라지면 제품의 질감이 달라진다. 아이콘 리소스를 수집할 때는 다음을 꼼꼼히 확인한다. 스트로크와 필 버전이 모두 있는지, 16, 20, 24, 32 같은 공용 그리드에 최적화됐는지, 폼 팩터별 힌팅이 있는지, 그리고 SVG에서 사용된 좌표가 정수 스냅으로 정리되어 있는지. 확대했을 때 0.5 단위가 어정쩡하게 남아 있으면 렌더링에서 흐릿해진다.
일러스트는 분위기를 좌우 한다. 최근엔 벡터 스타일의 플랫, 그라디언트가 들어간 3D, 스케치 느낌의 질감 등 다양하다. 무작정 예쁜 것을 고르면 페이지 간 결이 달라진다. 나는 브랜드 키워드를 뽑아 3가지 분위기를 정한다. 예를 들어 신뢰, 명료, 온기 같은 키워드다. 거기에 맞춰 선 굵기, 채도, 명암 단계 수를 제한한다. 그리고 리소스를 고를 때도 그 범위 안에서만 받는다. 커뮤니케이션이 길어지는 대신, 실행에서는 흔들림이 줄어든다.
폰트, 공짜의 책임과 변수 폰트의 이점
무료 폰트를 선호하는 팀은 적지 않다. 예산 탓이라기보다 배포와 라이선스 관리가 편하기 때문이다. 다만 무료라 하더라도 상업적 사용 조건, 글리프 커버리지, 웹 임베드 허용 여부, 앱 번들 허용 여부를 반드시 본다. 구글 폰츠에 등록된 서체는 대부분 명확하다. 또 하나는 렌더링. 한국어 서체는 무게 단계별 자간과 행간 최적화가 제각각이다. 본문에서 14~16px, 타이틀에서 22~28px로 몇 가지 케이스를 미리 테스트하면 낭패가 줄어든다.
변수 폰트는 실무에서 특히 유용하다. 한 파일로 여러 굵기, 심지어 너비까지 조정할 수 있어 로딩이 효율적이다. 웹에서 woff2 변수 폰트를 쓰면 폰트 파일 수를 통상 3~6개 줄일 수 있다. 대신 폴백 전략을 세워야 한다. 일부 레거시 환경에서는 변수를 완전히 지원하지 않을 수 있다. 나는 주요 브라우저 사용 비중과 성능 예산을 비교해 변수 폰트를 기본으로, 고정 웨이트 1~2개를 폴백으로 둔다. 인쇄물에서는 변수의 장점이 덜하니, 인디자인 작업과의 호환성도 체크한다.
사진과 비디오, 흔한 장면을 덜 흔하게 쓰는 법
무료 사진 사이트는 풍부하지만, 너무 많은 제품이 같은 컷을 쓴다. 같은 키워드로 검색하면 당연히 같은 결과다. 나는 다음의 방법을 쓴다. 영어 대신 목적 언어로 키워드 변주를 만든다. 예를 들어 생산성 앱이라면 desk, office 대신 deep work, focus, flow 같은 추상 키워드를 섞는다. 수직 구도, 네거티브 스페이스가 넓은 컷을 고르면 타이포 배치가 수월하다. 영상은 5~10초의 짧은 루프를 의도적으로 선택한다. 로딩과 자동재생 정책을 고려하면 길게 쓸수록 리스크가 커진다.
라이선스가 무료여도 모델 릴리즈가 명확한지 확인한다. 제품 시연 영상에 등장하는 손이나 얼굴이 식별 가능하면 추가 확인이 필요하다. 밝기와 색온도도 세트로 맞춘다. 같은 촬영자, 같은 장소에서 찍은 시리즈를 추려 쓰면 통일감이 생긴다. 사이트 주소모음에는 포토그래퍼별 컬렉션 링크를 함께 저장해두면 나중에 빠르게 대체 컷을 구할 수 있다.
목업, 프레젠테이션, 인쇄 템플릿의 현실성
화려한 목업이 실제 제품을 왜곡하는 경우를 수도 없이 봤다. 구겨진 종이 질감, 과장된 광택, 비현실적인 원근. 보는 사람은 멋있다고 느끼지만, 출시 후 화면이 밋밋해 보인다는 피드백이 돌아온다. 목업은 장치와 환경을 평범하게 잡을수록 낫다. 최신형 플래그십 기기 하나, 2~3년 전 모델 하나, 라이트와 다크 모드 두 세트면 충분하다. PSD 스마트 오브젝트 기반 목업은 편하지만, 해상도와 PPI가 실제 스크린과 맞지 않으면 에지에서 계단 현상이 생긴다. 일괄 적용 전에 100퍼센트 픽셀 뷰로 검수한다.
프레젠테이션 템플릿은 글머리 수준과 레이아웃 계층을 꼼꼼히 본다. 표와 차트 스타일이 정의돼 있는지, 머리글과 바닥글, 페이지 넘버링이 구조화돼 있는지. 인쇄물 템플릿은 CMYK 프로파일, 여백과 재단선 설정, 블리드가 제대로 잡혀 있어야 한다. PDF/X 표준을 따르는 내보내기 프리셋이 포함된 템플릿이면 더 안전하다.
컬러와 접근성, 수치로 관리하기
컬러 팔레트는 예쁘다고 끝이 아니다. 텍스트 대비 비율이 최소 4.5:1을 넘도록 조합을 잡고, 상태색은 색상만으로 구분하지 않도록 보조 표식을 둔다. 수치 토큰으로 R, G, B 값을 명시하고, 밝기 단계별로 이름을 붙이면 협업이 쉬워진다. 컬러 도구 링크모음은 단순히 팔레트 생성기만 모으지 않는다. 대비 체크, 색약 시뮬레이터, 테마 동기화 플러그인까지 모아두면 실제 적용에서 시간이 절약된다. 모바일에서는 다크 모드 대비가 기기마다 달라 보이니, 미리 iOS, Android 기본 대비 정책 차이를 테스트하는 링크도 곁들인다.
모션과 마이크로 인터랙션, 가벼움이 힘이다
Lottie 같은 벡터 애니메이션은 앱 성능과 용량에 유리하다. 다만 모든 모션을 Lottie로 해결하려 하면 After Effects 표현식, 블렌드 모드 제약에 막힐 때가 있다. 이럴 때는 SVG 스프라이트나 CSS 트랜지션이 더 낫다. 모션 리소스를 모을 때는 프레임 길이가 짧고, 루프가 부드럽고, 키프레임이 간결한 샘플을 선호한다. 현업에서 느낀 가장 큰 차이는 easing. Cubic-bezier 곡선이 자연스러우면 인터랙션이 안정적으로 느껴진다. 모션 라이브러리를 고를 때 곡선을 공개해주는지까지 확인한다.
코드 컴포넌트와 UI 프레임워크, 디자인과 동작의 다리
디자인 파일이 수려해도 코드로 옮기면 엇나가기 쉽다. 그래서 컴포넌트 라이브러리를 고를 때는 스토리북 샘플, 접근성 속성, 테마 토큰 지원 여부를 살핀다. Typescript 정의가 탄탄하고, 문서 예제가 단순히 예쁘기만 한 것이 아니라 상태 별 동작을 상세히 보여주는지가 중요하다. 스켈레톤, 에러, 로딩 상태가 빠져 있으면 실제품에서 허둥댄다. 가능하면 디자인 토큰을 JSON으로 내보내고, 빌드 파이프라인에 바로 넣을 수 있는 리소스를 모은다. 링크모음을 코드 레포 설명과 함께 저장하면 디자이너와 개발자 모두 같은 자료를 바라본다.
라이선스와 저작권, 무료웹툰을 예로 든 경계선
한 번은 작은 이벤트 페이지에 귀여운 웹툰 컷을 쓰자는 제안이 들어왔다. 인터넷 어딘가에서 본 그림이라며, 무료웹툰이라고 적혀 있었다. 막상 파고들어 보니 개인 블로그에 재업로드된 이미지였고, 원작자의 사용 허락과는 거리가 멀었다. 무료라는 단어가 항상 자유 이용을 의미하지 않는다. 오픈 라이선스도 조건이 다르다. CC BY는 출처 표기가 필요하고, CC BY-SA는 동일 조건 변경 허락이 따라붙는다. 노파심에 하는 말이지만, 상업 프로젝트에서 출처 불명 리소스를 쓰면 돌이킬 수 없는 일이 벌어진다.
웹툰 스타일의 일러스트가 필요하다면 합법적으로 배포되는 드로잉 팩, 상업적 사용 가능한 스티커 세트, 커미션 베이스 작가 섭외로 우회하자. 관련 사이트 주소모음을 따로 만들어두고, 각 항목에 라이선스 요약을 붙인다. 회사 정책에 따르면 1인당 구매 가능한 소재 수를 제한하거나, 중앙에서 라이선스를 관리하는 경우도 많다. 이런 프로세스 링크까지 함께 저장하면 실무에서 충돌이 줄어든다.
품질 관리, 리소스를 내 것으로 만드는 과정
좋은 리소스는 가져다 쓰기만 해도 시간을 줄여준다. 하지만 진짜 가치는 커스터마이징에서 나온다. 버튼 모서리 반경 하나, 아이콘 스트로크 두께 0.5px, 본문 자간 1퍼센트가 제품의 호흡을 바꾼다. 나는 새로 받은 키트는 반드시 스케치 페이지를 만들어 실험한다. 다섯 가지 색 온도로 같은 컴포넌트를 렌더링하고, 대비 기준을 넘지 못하는 조합은 폐기한다. 아이콘은 16, 20, 24 그리드를 따로 열어 코너 정합을 다시 맞춘다. 이 과정을 문서화하고 내부 링크모음에 리포트로 남긴다. 다음 프로젝트에서 같은 삽질을 반복하지 않기 위한 기록이다.
폴더 구조와 북마크, 링크가 쌓일수록 정리법이 중요하다
스무 개의 링크는 기억으로도 관리된다. 백 개가 넘어가면 구조가 답이다. 나는 크게 세 축으로 나눈다. 리소스의 종류, 라이선스, 프로젝트. 종류 아래에는 UI, 아이콘, 폰트, 사진/비디오, 모션, 인쇄 템플릿, 컬러 툴을 둔다. 라이선스는 상업 무료, 출처 표기 필요, 구매, 커스텀 계약. 프로젝트는 A, B, C처럼 실제 제품명. 이중 분류가 필요한 항목은 북마크 폴더 중복 저장 대신 문서에 분류 태그를 적어 링크를 삽입한다. 중복 북마크는 나중에 링크가 바뀌었을 때 헷갈린다.
문서화 도구에는 스크린샷 썸네일을 붙이고, 핵심 포맷과 마지막 확인 날짜를 적는다. 팀원이 추가할 때도 동일한 템플릿을 쓰도록 한다. 작은 습관이 쌓이면 새로 합류한 동료도 일주일 안에 전력을 낼 수 있다.
파일 포맷과 호환성, 미리 알면 피할 수 있는 함정
SVG는 만능처럼 보이지만, 필터와 마스크가 많은 SVG는 웹에서 무겁다. 내보낼 때 불필요한 그룹과 디프스, 프레젠테이션 속성은 SVGO로 정리한다. PNG는 투명도와 색심도가 문제다. 24비트가 필요 없는 경우 8비트로 줄이고, 디더링으로 계조를 유지한다. WebP는 브라우저 지원 범위를 점검하고, 사진과 일러스트를 따로 인코딩한다. 폰트는 woff2를 기본으로 하되, 앱 번들은 TTF/OTF를 포함한다. Lottie는 마스크와 3D 레이어, 특정 표현식이 제한된다. 애니메이터에게 처음부터 제약을 공유하면 되돌림이 줄어든다.
인쇄물은 CMYK 변환 시 톤이 죽기 쉽다. 특히 파랑과 녹색. 스폿 컬러를 쓰지 못하는 상황이라면, 화면과 인쇄 사이에 보정 프로파일을 테스트하고, 프루핑 서비스를 한 번은 거친다. 작은 차이를 무시하고 그냥 넘어가면 제품 박스 천 개가 창고에 쌓인다.
팀 온보딩과 재사용, 링크모음의 교육적 가치
새 팀원이 들어오면 디자인 원칙을 설명하는 데 절반의 시간이 든다. 그런데 링크모음을 잘 갖춘 팀은 보여주는 것만으로도 많은 것을 전달한다. 나의 문서는 섹션마다 두세 개의 대표 리소스를 고르고, 왜 그 선택을 했는지 사유를 단락으로 적는다. 예를 들어 아이콘 세트에서는 그리드와 코너 처리 방식을 설명하고, 사진에서는 스토리텔링과 네거티브 스페이스의 이유를 밝힌다. 리소스 자체보다 선택의 기준을 공유하면, 다음엔 동료가 같은 기준으로 새 링크를 추가한다.
퍼포먼스 예산, 디자인 리소스가 속도를 결정한다
앱 첫 화면에서 폰트 5종, Lottie 3개, PNG 히어로 이미지 하나면 이미 수백 KB에서 1MB를 넘기 쉽다. 3G 환경에서 1MB는 1~2초가 더 붙는다. 숫자로 관리해야 한다. 첫 화면 폰트는 서브셋과 디스플레이 스왑을 적용하고, 이미지에는 사이즈별 소스셋을 제공한다. 모션은 가능하면 아이콘 수준으로 줄이고, 반복되는 Lottie는 스프라이트나 CSS 트랜지션으로 치환한다. 리소스 링크모음에는 각 항목의 평균 용량, 최적화 팁, 대체 수단을 주석으로 남겨둔다. 디자인의 의도와 성능의 균형점은 항상 존재한다.
보안과 신뢰, 다운로드 전후의 위생
공개 마켓에서 받은 압축 파일은 바이러스 검사를 통과시킨다. 스크립트가 포함된 템플릿, 거대한 PSD에는 의심이 필요하다. 특히 크랙된 유료 리소스는 단가만 낮춘 게 아니라, 프로젝트와 팀 신뢰를 깎아내린다. 팀 폴더에 들어오는 모든 파일은 표준 경로로만 배포한다. 개인 드라이브에 쌓아두었다가 버전을 혼동하는 일이 잦다. 링크모음의 각 항목은 공식 출처를 기본으로 삼고, 미러나 재배포 페이지는 예외로 둔다. 문제가 생기면 출처에서 다시 받으면 된다.
실무 예시, 2주 스프린트의 리소스 사용 기록
올해 봄, 예약 서비스의 리디자인을 2주에 끝내야 했다. 첫날엔 도메인 리서치와 함께 UI 키트 후보 3개를 비교했다. 대시보드 테이블과 필터가 잘 정리된 것을 골랐다. 둘째 날엔 아이콘 세트를 실험했다. 후보 2개 중 스트로크-필 전환이 쉬운 세트를 채택했다. 셋째 날엔 폰트. 변수 폰트 한 벌과 숫자 가독성이 좋은 보조 폰트를 묶었다. 넷째 날엔 사진과 일러스트 톤을 정했고, 다섯째 날엔 컬러 대조와 상태색 규칙을 확정했다. 주말엔 목업 템플릿으로 발표 자료를 준비했다. 그 다음 주에는 개발팀과 디자인 토큰을 맞추고, 모션 라이브러리 중 4개만 남겨 삽입했다. 링크모음 없이는 불가능한 페이스였다. 모든 리소스에는 라이선스 노트와 최적화된 산출물이 함께 묶여 있어, 출시 막판에도 혼란이 없었다.
팀 합의를 이끌어내는 문장들
디자인은 취향 싸움이 되기 쉽다. 나는 링크모음을 보여주며 숫자와 조건으로 대화한다. 대비 비율, 파일 크기, 브라우저 지원 버전, 업데이트 주기 같은 객관 지표를 내민다. 그러면 논의가 빨리 정리된다. 예쁜 것과 맞는 것의 경계를, 문서와 링크로 명확히 한다. 부족한 항목은 다음 스프린트 백로그로 미룬다. 리소스 선택은 결정의 연속이고, 결정에는 근거가 필요하다.
개인 라이브러리 구축, 시작을 위한 5단계
- 지금 진행 중인 제품 기준으로 우선순위 카테고리 3개를 정한다. 예: UI 키트, 아이콘, 폰트. 각 카테고리에서 후보 5개만 추리고, 위 체크리스트로 걸러 1~2개로 압축한다. 팀 도구에 링크, 썸네일, 라이선스 요약, 마지막 검수 날짜를 적어 템플릿화한다. 선택 사유와 사용 가이드를 3~5문장으로 기록해 동료가 같은 기준을 공유하도록 만든다. 스프린트 말에 리소스 성과를 회고하고, 교체 또는 유지 결정을 내린 뒤 링크모음을 업데이트한다.
이 다섯 단계가 습관이 되면, 링크가 쌓일수록 오히려 가벼워진다. 북마크 바를 비워내는 쾌감도 덤으로 따라온다.
키워드, 검색, 그리고 발견의 확률 높이기
한글과 영어, 때로는 일본어나 스페인어 키워드를 혼용하면 결과가 달라진다. 예를 들어 예약 시스템을 찾을 때 booking UI kit, reservation dashboard, scheduling components를 함께 쓰면 다른 디자이너의 결과물에 접근할 확률이 높다. 이미지에서는 색감이나 구도 키워드를 더한다. High key, negative space, top-down 같은 표현은 쓸모가 많다. 사이트 주소모음을 정리할 때도 각 링크에 추천 검색어를 붙이면, 나중에 비슷한 결과를 빠르게 되살릴 수 있다.
장기 유지, 링크모음은 살아 있어야 가치가 있다
좋은 링크도 죽는다. 도메인이 바뀌고, 제작자가 활동을 멈춘다. 분기마다 30분을 투자해 링크를 순회한다. 깨진 링크는 대체 출처를 찾거나, 문서에서 이유를 적고 보류한다. 찜 목록은 따로 모으되, 본 컬렉션에는 검증된 것만 올린다. 팀 공용 채널에서 추천이 오면, 검증 후 편집자가 반영한다. 소유자가 아니라 관리자가 필요하다. 링크모음이 살아 있으면, 신입이 들어와도 팀의 디자인 레벨은 유지된다.
마지막으로, 재료에서 완성까지
좋은 재료가 요리를 보장하지는 않지만, 나쁜 재료로는 훌륭한 요리를 만들기 어렵다. 템플릿과 디자인 리소스는 재료다. 링크모음은 냉장고이자 레시피 북이다. 거기에 무엇을 넣고, 어떻게 손질하고, 누구와 나눌지 정하는 일은 결국 팀의 문화와 직결된다. 무료웹툰 같은 말에 휘둘리지 않고, 라이선스와 성능, 접근성과 유지보수까지 고려하는 선택이 실력을 만든다. 실무는 매일 급하고 현실은 타협을 요구하지만, 기준을 잃지 않으면 결과가 쌓인다. 오늘도 좋은 링크 하나를 더하는 대신, 쓸모없는 링크 두 개를 지우는 편이 낫다. 그렇게 컬렉션은 단단해진다.