스타일 설정

텍스트 색상

포인트:
텍스트 색상과 투명도를 설정합니다. 배경 대비 확보에 가장 중요한 항목입니다.

이 설정으로 달라지는 점:
가독성이 부족하면 디자인이 좋아도 클릭 성과가 떨어질 수 있습니다.

조정 팁:
WCAG 대비 기준을 참고하여 작은 텍스트일수록 명도 차이를 더 크게 확보하세요.

설정 항목

• 텍스트 색상: 텍스트 색상을 설정해 배경 대비를 최적화합니다.
• Alpha(투명도): 0(완전 투명)~1(완전 불투명) 범위로 강도를 조정합니다.
• 반응형: 기기별 개별 값을 사용할 수 있습니다.

Hover 상태 텍스트 색상도 개별 설정 가능합니다. 스타일 트랜지션의 Duration 값에 따라 색상 변화가 부드럽게 적용됩니다.

텍스트 그림자

포인트:
텍스트 그림자를 설정해 배경 이미지 위 가독성을 보완합니다.

이 설정으로 달라지는 점:
그림자 강도에 따라 가독성과 장식감의 균형이 달라집니다.

조정 팁:
먼저 Blur와 Alpha를 낮게 시작하고, 필요한 만큼만 단계적으로 높이세요.

설정 항목

• 텍스트 그림자(ON/OFF): 텍스트 그림자 사용 여부
• 색상: 그림자 색상
• Blur + 단위: 그림자 퍼짐 정도
• Horizontal + 단위: 가로 이동량
• Vertical + 단위: 세로 이동량
• 반응형: 기기별 개별 값 적용

Hover 상태 텍스트 그림자도 따로 설정할 수 있습니다.

테두리

포인트:
테두리 색상·두께·선 종류를 설정해 버튼 경계를 명확히 합니다.

이 설정으로 달라지는 점:
배경색이 옅어도 버튼 영역이 선명해집니다.

조정 팁:
너무 두꺼운 테두리는 텍스트 주목도를 낮출 수 있으니 1px 전후부터 시작하세요.

설정 항목

• 테두리(ON/OFF): 테두리 표시 여부
• 색상 + Alpha: 색상/투명도
• 너비: 선 두께
• Style(none / solid / dashed / dotted): 선 종류
• Box Sizing(border-box / content-box): 크기 계산 방식
• 반응형: 기기별 개별 값 적용

border-box는 테두리 두께가 요소 크기에 포함되고, content-box는 요소 바깥으로 크기가 늘어납니다.

모서리 둥글기

포인트:
모서리 곡률을 설정해 버튼 인상(단단함/부드러움)을 조정합니다.

이 설정으로 달라지는 점:
같은 값이라도 버튼 크기 비율에 따라 보이는 느낌이 달라집니다.

조정 팁:
높이의 20~35% 수준부터 시작하면 균형 잡기 쉽습니다.

설정 항목

• 개별 설정 사용: 4개 모서리를 개별 조정
• 일괄값: 모서리 둥글기 + 단위
• 개별값: 좌상단 / 우상단 / 우하단 / 좌하단 + 단위
• 단위: px / % / em / rem
• 반응형: 기기별 개별 값 적용

내부 그림자

포인트:
버튼 안쪽 그림자를 설정해 눌림감과 깊이감을 만듭니다.

이 설정으로 달라지는 점:
플랫한 디자인에 최소한의 입체감을 줄 수 있습니다.

조정 팁:
과하면 구식 UI처럼 보일 수 있어 Blur/Alpha를 낮게 쓰는 것이 안전합니다.

설정 항목

• 내부 그림자(ON/OFF)
• 색상
• Blur
• Horizontal
• Vertical
• Spread
• 반응형

그림자

포인트:
바깥 그림자를 설정해 버튼을 배경에서 띄워 보이게 합니다.

이 설정으로 달라지는 점:
그림자 방향과 거리로 전경/배경 느낌이 달라집니다.

조정 팁:
모바일에서는 그림자가 강해 보이기 쉬우므로 SP에서 한 단계 약하게 조정하세요.

설정 항목

• Shadow(ON/OFF)
• 색상 + Alpha
• Blur
• Horizontal
• Vertical
• Spread
• 반응형

투명도

포인트:
요소 전체 불투명도와 합성 모드를 설정합니다.

이 설정으로 달라지는 점:
같은 색이라도 불투명도와 혼합 모드에 따라 인상이 크게 달라집니다.

조정 팁:
가독성이 떨어지면 먼저 텍스트/배경 대비를 보정한 뒤 투명도를 조정하세요.

설정 항목

• 불투명도: 전체 불투명도
• 혼합 모드: 합성 모드(normal, multiply, screen, overlay 등)
• 반응형

불투명도를 낮추면 텍스트/아이콘에도 함께 적용됩니다. 배경만 옅게 보이고 싶다면 배경 패널의 Alpha 조정을 우선하세요.

트랜지션

포인트:
기본 상태에서 Hover 상태로 전환되는 속도를 설정합니다.

이 설정으로 달라지는 점:
너무 빠르면 변화 인지가 어렵고, 너무 느리면 반응이 둔하게 느껴집니다.

조정 팁:
Duration 200~350ms를 기본으로 두고 필요한 곳만 Delay/커스텀 이징을 추가하세요.

설정 항목

• 재생 시간 (ms)
• 지연 시간 (ms)
• 이징 (ease / ease-in / ease-out / ease-in-out / linear / 사용자 정의)
• 사용자 정의 값 (cubic-bezier 형식)
• 초기화

이 트랜지션은 스타일 패널 내부 속성(텍스트 색상, 보더, 둥글기, 그림자, 투명도 등)에 적용됩니다. 배경/아이콘 트랜지션은 각 전용 패널에서 별도로 설정합니다.