Appearance

그래픽 ​

토스에서 제공하는 그래픽 리소스와 올바른 활용 방법을 안내드려요.

그래픽 저작권 안내

토스의 모든 그래픽 자산 및 토스트를 통해 생성된 그래픽은 「저작권법」 및 관련 법령에 따라 보호받는 ㈜비바리퍼블리카의 지식재산권입니다.

제공된 그래픽은 앱인토스 제휴 환경 내에서의 서비스 운영 및 홍보 목적으로만 사용할 수 있으며, 다른 서비스나 매체에서 복제·수정·배포·전송·공중송신 등으로 활용하는 행위는 금지됩니다.

토스에서 제공하는 그래픽 리소스 ​

1. 아이콘 & 이모지 ​

약 7,000개 이상의 토스 아이콘 & 이모지 세트가 제공됩니다.
자체적으로 제작할 경우, 아래 제작 가이드라인을 참고해주세요.

앱인토스 아이콘 제작 가이드

[사용 시 유의사항]

  • 화면에서 24~40px 사이의 크기로 사용해 주세요.
  • 아이콘을 두 개 이상을 병렬로 조합하는 것은 지양하고 있어요. 한 번에 하나씩만 사용해주세요.

2. 스마트폰 목업 파일 ​


스마트폰 목업 파일

스마트폰 목업을 사용하여 리소스를 만드시는 경우 위 파일을 사용해주세요.
크기별로 사용하실 수 있게 제공되니 임의로 크롭, 색상 보정, 왜곡하지 말아주세요.

디자인 업데이트 반영을 위해, 개발 시에도 아래 URL로 넣으시는 것을 권장드려요.


3. 토스트 (AI 이미지 생성 툴) ​

1번의 아이콘 & 이모지를 바탕으로 3D 이미지를 생성할 수 있어요.
생성한 그래픽은 토스 그래픽 디자인 팀의 사용 승인(1일 이내)을 받아야 실제 화면에 사용할 수 있어요.


4. 그 외 ​

3D, 애니메이션 등의 그래픽은 저희가 제공해드린 모듈 속에 포함된 것만 사용 가능해요.
앞으로 점진적으로 제공 범위를 넓혀갈 예정이에요.

그래픽의 올바른 사용법 ​

1. 문맥에 맞는 그래픽을 사용하세요. ​

그래픽은 장식이 아닌 사용자의 이해를 더 잘 돕기 위한 용도입니다.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


2. 밀도에 맞는 크기로 사용하세요. ​

단순한 그래픽은 작게, 디테일한 그래픽은 크게 사용해 주세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


3. 너무 많은 그래픽을 사용하지 마세요. ​

한 화면에 비슷한 크기의 그래픽이 많을수록 오히려 시선이 분산돼요.
가장 핵심적인 그래픽 하나만 사용하고, 다른 곳은 보조적인 그래픽(ex. 아이콘)을 활용해주세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


4. 실질적인 내용이 가리지 않게 배치하세요. ​

중요한 정보가 아래로 밀려서 불필요한 스크롤이 생기지 않도록, 크기와 위치를 적절히 조정해서 사용하세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


5. 부정적이거나 호소성 감정 표현에 주의하세요. ​

사용자에게 불쾌감을 주거나, 애원하거나 호소하는 등 부정적인 감정 표현은 다크 패턴이므로 지양합니다.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시
좋지 않은 예시
좋은 예시

6. 장식적인 효과나 이펙트를 사용하지 마세요. ​

의미없는 묘사, 파티클, 그라데이션 등 지나친 장식적인 요소는 화면을 복잡해보이게 만들 수 있어요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


7. 상황을 정확히 전달하는 그래픽을 사용하세요. ​

오류 상황이 아닌데 느낌표 아이콘을 사용하거나, 기다려야하지 않는데 로딩 애니메이션을 쓰는 등의 액션은 사용자의 오해를 불러일으킬 수 있어요.

⚠️ Don’t
좋지 않은 예시
⚠️ Don’t
좋지 않은 예시

⚠️ Don’t
좋지 않은 예시
⚠️ Don’t
좋지 않은 예시

파트너사에서 직접 그래픽을 만들 때 유의사항 ​

1. 토스 스타일의 일관성을 지켜주세요. ​

토스는 단순 명료하고 깨끗한 디지털 그래픽 스타일을 지향해요.
손그림, 서정적인 화풍, 만화적인 표현 등은 이질적으로 느껴질 수 있어요.

✅ 토스의 그래픽 스타일 예시



⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시
⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시

2. 고화질의 그래픽을 만들어주세요. ​

깨끗하고 선명한 고화질의 그래픽을 만들어주세요.
열화되거나, 파티클과 같은 자잘한 효과는 퀄리티가 낮아보일 수 있어 주의해주세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시

3. 다크 / 라이트 모드 양쪽에서 가시성을 확보하세요. ​

토스 앱에 사용되는 그래픽은 다크 / 라이트 모드 둘 다 대응되어야 해요.
너무 밝거나 어두워서 특정 모드에서 안 보이는 일이 없도록 중간 명도의 그래픽을 만들어주세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


4. 화면에 어울리는 컬러와 레이아웃으로 구성하세요. ​

텍스트, CTA 버튼 등 화면의 다른 요소들과 그래픽의 균형을 맞춰주세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시


5. 긍정적이고 정돈된 인상으로 만들어주세요. ​

서비스의 안정성과 신뢰감을 만드는데 그래픽이 큰 역할을 합니다.
그래픽에 모노톤이 너무 많거나, 뿌옇고 칙칙해보이지 않게 디자인 해주세요.

⚠️ Don’t
좋지 않은 예시
✅ Do
좋은 예시