아이콘 설정

아이콘 선택

포인트:
텍스트만으로 부족한 의미를 아이콘으로 보완합니다.

이 설정으로 달라지는 점:
시선 고정점이 생겨 정보 인지 속도가 빨라집니다.

조정 팁:
문구와 의미가 중복/충돌하지 않는 아이콘을 선택하세요.

설정 항목

• 아이콘 선택: 표시할 아이콘을 선택합니다.
• 선 굵기(라인 아이콘): 기본값 1.75, 0이면 원본 선 굵기 사용
• 반응형: 기기별 아이콘 변경 가능

Hover 상태에서 다른 아이콘으로 교체할 수 있습니다.

아이콘 색상

포인트:
아이콘 가독성과 버튼 전체 톤을 맞추는 설정입니다.

조정 팁:
기본은 텍스트 색상에 맞추고, 필요한 구간만 강조색을 사용하세요.

설정 항목

• 색상
• Alpha
• 반응형

아이콘 크기

포인트:
아이콘의 존재감과 텍스트 균형을 조정합니다.

조정 팁:
본문 폰트 크기의 0.9~1.2배를 시작점으로 맞추는 것이 안정적입니다.

설정 항목

• 아이콘 크기 값
• 단위(px / em / rem)
• 반응형

Hover 상태 아이콘 크기도 개별 설정 가능합니다.

아이콘 위치

포인트:
아이콘과 텍스트 간 거리, 정렬 균형을 맞춥니다.

조정 팁:
먼저 중앙 기준으로 두고, 필요할 때만 X/Y를 소폭 조정하세요.

설정 항목

• X 위치(left / center / right + 값)
• Y 위치(top / center / bottom + 값)
• 단위(px / % / vw)
• 반응형

아이콘 프레임

포인트:
아이콘 주변 프레임(배경, 보더, 라운드)을 설정합니다.

이 설정으로 달라지는 점:
아이콘만 사용할 때보다 CTA의 시각적 구분이 강화됩니다.

설정 항목

• 프레임 ON/OFF
• 프레임 배경 색상/투명도
• 프레임 크기(일괄 / 개별 너비, 높이)
• 테두리(색상, 두께, 스타일)
• 모서리 둥글기(일괄 / 개별)
• 반응형

트랜지션

포인트:
아이콘 관련 Hover 변화 속도를 제어합니다.

조정 팁:
기본은 짧게 설정하고, 필요할 때만 Delay를 추가하세요.

설정 항목

• 재생 시간 (ms)
• 지연 시간 (ms)
• 이징
• 사용자 정의 값
• 초기화

이 트랜지션은 아이콘의 색상/크기/위치 호버 전환에 적용됩니다. 아이콘 프레임 트랜지션과 아이콘 애니메이션 트랜지션은 각각 독립된 설정입니다.