타사 간편 로그인 로고 사용할 때 디자인 가이드 - 2탄 카카오톡 KaKaotalk

2탄 카카오톡 Kakaotalk

1탄 구글

3탄 네이버

4탄 애플

---

💁‍♂️ 다른 서비스의 로고를 내 디자인에 맞춰서 써도 될까? 

목차

0. 요약

1. 카카오 색상

2. 심볼

3. 레이블

4. 컨테이너

5. 전체 버튼 크기 변경

6. 말풍선만 있는 버전

 

내 서비스는 브랜드에 따라서 원하는 대로 디자인 하면 되는데, 다른 회사의 로고는 내 디자인에 맞춰서 사용해도 될까? 
각 회사에서 제안한 규칙만 따른다면 일부분을 내 디자인에 맞춰서 사용할 수 있습니다.

 

(설명 그런거 뭐 다 모르겠다, 그러면 아래에 걸어둔 가이드 링크 들어가서 이미지 캡쳐해서 비율 맞춰서 디자인 하는 것도 방법이에요! 물론 알고 디자인하는게 베스트.)

---

👷 구축된 앱에서 사용 중인 디자인 예시

어떤 서비스가 규칙을 지키지 않고 있을까요? 3번 메가 커피!

사실 모든 서비스가 조금씩 키지고 있지 않은데요,
어떤 규칙을 지키고 있지 않은지는 아래 규칙을 읽어 보면서 찾아보세요!
(재가 찾은 이유는 하단에 적어놨어요)

에이닷, 런드리고, 메가커피

 

LG THingQ, Flo, 밀리의 서재

 

---

카카오톡 Kakaotalk

가이드 링크     |     문구 있는 로고 다운로드 링크     |    문구 없는 로고 다운로드 링크 

 

  요약                                                                

• 기본으로 제공하는 컴포넌트가 있으니 무료로 사용 가능
• 버튼을 유동적으로 재구성할 수 있음(고유 이미지 해치지 않는 범위 내에서만!)
• 다른 컬러 사용/미사용으로 타사 버튼이 강조되면 안됨 
• 카카오 색상, 레이블(문구), 심볼, 컨테이너, 로그인 버튼 크기에 대한 자세한 가이드는 아래 참고

구성요소 명칭부터 보시죠

 

 

1. 카카오 색상

• 컨테이너(바탕 색상): #FEE500
• 심볼(말풍선): #000000, 90%
• 레이블(문구): #191919

 

 

2. 심볼

• 말풍선을 기본으로 사용하고, 말풍선 없이 버튼을 만들 수 없음 (K, Kakao 글자를 로고로 쓸 수 없음)
• 말풍선이 아닌 아이콘을 말풍선 대신해서 쓸 수 없음
• 아웃라인만 있는 말풍선 사용 불가(방향, 비율, 변경 불가)
• 심볼 크기는 함께 있는 타사와 동등해야 함

 

 

 

3. 레이블

• 문구는 사용한다면 다음 4개 중에 선택 가능
  1. 카카오로 시작하기
  2. 시작하기
  3. Start with Kakao
  4. Start

줄임말인 카톡 사용 불가

 

 

4. 컨테이너(배경 색상)

• 라운드값 12px
• 버튼 크기는 함께 있는 타사와 동등해야 함

 

 

5. 전체 버튼 크기 변경

• 좌우 여백 맞춰서 확장구만의 가로만 늘리기 가능
• 레이블(문구) 자간, 크기 변경 불가
• 심볼은 좌측 또는 중앙 정렬 가능
• 전체 스케일링 필요하면 심볼과 레이블의 비율 유지해서 확대 가능

 

 

6. 말풍선만 있는 버튼

• 작은 크기에는 말풍선 내에 글자 없는 버전 사용 가능
• 큰 사이즈에는 말풍선 내에 글자 있는 버전 사용 가능
• 다운로드 링크 https://developers.kakao.com/tool/resource/talk

 

 

 

 

---

 

 

 

[퀴즈 답]

지켜지지 않은 부분은?

1. (모든 서비스 해당) 배경 색상: #FEE500을 지키지 않고 있어요.
(저도 질문있어요! 기기마다 캡쳐한 화면의 색상이 달라 보일 수 있나요?)

2. 버튼의 간격을 지키지 않았어요! 좌우 확장 구간의 여백을 동일하게 맞춰야 하는데, 선을 넣으면서 여백이 달라진게 보이시죠. 

3. 말풍선의 비율이 달라요. 메가커피의 말풍선이 더 동글동글한게 보이시나요? 

 

추가로 발견하신게 있다면 댓글로 알려주세요!

 

 

 

---

 

혹시 더 궁금한게 있다면 댓글을 달아주세요 :)