Login Button Design Guidelines
이 문서는 DataGSM의 로그인 버튼의 디자인에 대해 서술합니다. 로그인 버튼은 상황에 맞게 변형하여 사용하되 아이콘과 텍스트는 변경하지 않습니다. 아이콘과 텍스트 사이의 간격은 content에 기반합니다. hover 상태에 대해 권장 양식이 있습니다.
이 디자인 문서는 figma를 기준으로 작성되었습니다.
로고 다운로드
DataGSM 로그인 버튼에서 사용하는 로고 아이콘 자산입니다. 환경에 맞춰 적절한 형식을 선택하여 사용하세요.
레이아웃
1) Default Button
로그인 버튼은 아이콘 + 텍스트를 순서대로 나열하는 구조를 기본으로 합니다. 아래 표는 기본적인 로그인 버튼 레이아웃입니다.
| 요소 | 규칙 |
|---|---|
| 아이콘 위치 | 좌측 정렬 |
| 텍스트 크기 및 정렬 | 14px 좌측 정렬 |
| 아이콘-텍스트 간격 | 16px |
| 버튼 높이 | 40px |
| 내부 패딩 | 12px 12px |
아이콘의 높이는 텍스트 크기에 비례하며 기본적으로 1:1입니다. (예를 들어 아이콘의 높이가 14px인 경우 텍스트 크기 또한 14px) 모든 레이아웃은 content에 기반하여 변경될 수 있으나 아이콘의 높이와 텍스트의 크기 비례는 제외합니다.
2) Icon Button
Icon Button은 아이콘을 단독으로 사용하는 버튼으로, 아이콘은 버튼의 중앙에 정렬됩니다. 아래 표는 아이콘만 표시하는 로그인 버튼 레이아웃입니다.
| 요소 | 규칙 |
|---|---|
| 아이콘 위치 | 중앙 정렬 |
| 아이콘 높이 | 10px |
| 버튼 크기 | 40px 40px |
| 내부 패딩 | 자동 (중앙 정렬 기준) |
Icon Button에서는 버튼 내부 여백을 고려하여 Default Button보다 작은 아이콘 크기를 사용할 수 있습니다. 버튼의 가로 및 세로 비율은 1:1입니다. Icon Button은 공간이 제한된 UI 환경에서만 사용해야 합니다. 가능한 경우 Default Button 사용을 권장하며 아이콘 단독 버튼 사용은 최소화해야 합니다. 모든 레이아웃은 content에 기반하여 변경될 수 있으나 버튼의 가로 및 세로 비율은 제외합니다.
Hover 상태
Hover 상태에서는 배경색을 한 단계 밝거나 어둡게 변경하는 것을 권장합니다. Transition은 150–200ms 범위를 권장합니다.
로그인 버튼 종류
DataGSM 로그인 버튼은 두 가지 형태로 제공됩니다.
1) Default Button
아이콘과 텍스트를 함께 사용하는 기본적인 로그인 버튼입니다. 가이드라인에 따른 3가지 색상 변형입니다.
DataGSM으로 로그인
DataGSM으로 로그인DataGSM으로 로그인.datagsm-button {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 12px;
gap: 16px;
background-color: #FFFFFF;
color: #000000;
border-radius: 8px;
font-family: "Pretendard", sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
}.datagsm-button {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 12px;
gap: 16px;
background-color: #000000;
color: #FFFFFF;
border-radius: 8px;
font-family: "Pretendard", sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
}.datagsm-button {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 12px;
gap: 16px;
background-color: #EFEFEF;
color: #000000;
border: 1px solid #E5E5E5;
border-radius: 8px;
font-family: "Pretendard", sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
}2) Icon Button
아이콘을 단독사용하는 축약형 버튼입니다. 가이드라인에 따른 3가지 색상 변형입니다.
.datagsm-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #FFFFFF;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}.datagsm-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #000000;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}.datagsm-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #EFEFEF;
border: 1px solid #E5E5E5;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}