그래픽
토스에서 제공하는 그래픽 리소스와 올바른 활용 방법을 안내드려요.
그래픽 저작권 안내
토스의 모든 그래픽 자산 및 토스트를 통해 생성된 그래픽은 「저작권법」 및 관련 법령에 따라 보호받는 ㈜비바리퍼블리카의 지식재산권입니다.
제공된 그래픽은 앱인토스 제휴 환경 내에서의 서비스 운영 및 홍보 목적으로만 사용할 수 있으며, 다른 서비스나 매체에서 복제·수정·배포·전송·공중송신 등으로 활용하는 행위는 금지됩니다.
토스에서 제공하는 그래픽 리소스
1. 아이콘 & 이모지
토스에서는 약 7,000개 이상의 아이콘과 이모지 세트를 제공해요.
직접 아이콘을 제작해야 한다면, 앱인토스 아이콘 제작 가이드를 참고해 기준에 맞게 만들어 주세요.
[사용 시 유의사항]
- 아이콘은 화면에서 24~40px 크기로 사용해 주세요.
- 아이콘이나 이모지를 두 개 이상 병렬로 조합하는 방식은 지양해요. 한 번에 하나만 사용해 주세요.
2. 스마트폰 목업 파일
스마트폰 목업 파일
스마트폰 목업으로 리소스를 제작할 때는 위 제공된 파일을 그대로 사용해 주세요.
아이콘은 크기별로 제공되니, 임의로 크롭하거나 색상을 보정하거나 형태를 왜곡하지 말아 주세요.
디자인 업데이트 반영을 위해, 개발 시에도 아래 URL로 넣으시는 것을 권장드려요.
- Full
- Large
- Medium
- Small
3. 토스트 (AI 이미지 생성 툴)
1번에서 제공된 아이콘과 이모지를 바탕으로 3D 이미지를 생성할 수 있어요.
생성한 그래픽은 실제 화면에 사용하기 전에 토스 그래픽 디자인 팀의 사용 승인을 받아야 해요.
승인은 보통 1일 이내에 진행돼요.
4. 그 외
3D 그래픽이나 애니메이션은 토스에서 제공한 모듈에 포함된 리소스만 사용할 수 있어요.
제공 범위는 앞으로 점진적으로 확대할 예정이에요.
그래픽의 올바른 사용법
1. 문맥에 맞는 그래픽을 사용해 주세요.
그래픽은 장식이 아니라, 사용자가 화면의 의미를 더 쉽게 이해하도록 돕는 역할이에요.
2. 정보 밀도에 맞는 크기로 사용해 주세요.
단순한 그래픽은 작게, 디테일이 많은 그래픽은 충분히 크게 사용해 주세요.
3. 한 화면에 그래픽을 많이 사용하지 마세요.
비슷한 크기의 그래픽이 많아질수록 시선이 분산돼요.
가장 핵심적인 그래픽 하나만 사용하고, 나머지는 보조적인 그래픽이나 아이콘으로 대체해 주세요.
4. 핵심 정보를 가리지 않게 배치해 주세요.
중요한 내용이 아래로 밀려 불필요한 스크롤이 생기지 않도록 크기와 위치를 조정해 주세요.
5. 부정적이거나 호소하는 감정 표현은 피해주세요.
사용자에게 불쾌감을 주거나 애원, 호소처럼 느껴지는 표현은 다크 패턴에 해당해요.
이런 감정 표현은 사용하지 말아 주세요.
6. 장식적인 효과나 이펙트는 사용하지 마세요.
의미 없는 묘사, 파티클, 과한 그라데이션 같은 요소는 화면을 복잡하게 만들고 정보 전달을 방해해요.
7. 상황을 정확히 전달하는 그래픽을 사용해 주세요.
오류가 아닌 상황에서 느낌표 아이콘을 사용하거나,
기다릴 필요가 없는데 로딩 애니메이션을 사용하는 경우 사용자가 상황을 오해할 수 있어요.
파트너사에서 직접 그래픽을 제작할 때 유의사항
1. 토스 스타일의 일관성을 지켜주세요.
토스는 단순하고 명료하며 깨끗한 디지털 그래픽 스타일을 지향해요.
손그림 느낌, 서정적인 화풍, 만화적인 표현은 화면에서 이질적으로 보일 수 있어요.
토스의 그래픽 스타일 예시
2. 고화질의 그래픽을 사용해 주세요.
그래픽은 선명하고 깨끗한 고화질로 제작해 주세요.
해상도가 낮거나 파티클처럼 자잘한 효과가 많으면 퀄리티가 낮아 보일 수 있어요.
3. 다크 모드와 라이트 모드 모두에서 잘 보여야 해요.
토스 앱에서 사용하는 그래픽은 다크 모드와 라이트 모드 모두를 고려해야 해요.
너무 밝거나 너무 어두운 색은 특정 모드에서 잘 보이지 않을 수 있으니, 중간 명도의 색감을 사용해 주세요.
4. 화면 전체와 어울리게 구성해 주세요.
그래픽이 텍스트나 CTA 버튼 같은 다른 요소보다 튀지 않도록,
화면 전체의 컬러와 레이아웃 균형을 맞춰 주세요.
5. 긍정적이고 정돈된 인상을 주세요.
그래픽은 서비스의 안정감과 신뢰감을 만드는 데 중요한 역할을 해요.
모노톤이 과도하게 많거나, 뿌옇고 칙칙한 인상은 피하고 밝고 정돈된 느낌으로 디자인해 주세요.
