박스 그림자

같은 흰색 카드라도 아래에 은은한 그림자가 깔리면 배경에서 살짝 떠 보여 눈에 잘 들어옵니다. 편집기에서는 이 그림자를 박스 그림자 항목에서 켜고 끌 수 있고, 네 가지 기본 모양 중에서 고르거나 위치·흐림·확산·색을 직접 정할 수도 있습니다. 이 글에서는 박스 그림자 항목의 위치와 각 값의 쓰임을 살펴봅니다. 테두리와 모서리 반경은 별도 글에서 다룹니다.

1. 박스 그림자는 어디에 있나요

박스 그림자는 고급 설정 (정렬 · 테두리 · 그림자 · 배치) 안에 있습니다. 속성 패널의 스타일 탭 아래쪽에서 고급 설정 줄을 눌러 펼치면 테두리 (Border) 바로 아래에 박스 그림자가 이어집니다. 처음에는 오른쪽 버튼이 OFF로 되어 있어 그림자가 없습니다. 속성 패널을 여는 방법은 속성 패널 구조를 다룬 글에서 안내합니다.

컨테이너는 선택 테두리 오른쪽의 점 세 개를 눌러 도구 막대를 펼친 뒤 레이아웃 / 간격 아이콘을 눌러도 됩니다. 열리는 작은 창에서 고급 설정을 펼치면 같은 항목이 나옵니다.

2. 그림자 켜기

OFF 버튼을 누르면 ON으로 바뀌면서 요소에 기본 그림자가 생기고, 그 아래에 조절 항목이 펼쳐집니다. 맨 위에는 기본 모양 네 개가 있고, 그 아래에 X 위치, Y 위치, 흐림, 확산 슬라이더와 그림자 색상, 맨 아래에 그림자 모양을 미리 보여 주는 칸이 있습니다. 값은 바꾸는 즉시 편집 화면에 반영됩니다.

다시 OFF를 누르면 그림자가 사라집니다.

3. 기본 모양 네 가지

가장 빠른 방법은 기본 모양 버튼을 누르는 것입니다. 누르는 즉시 위치·흐림·확산·색이 한꺼번에 정해집니다.

• 부드러운: 아주 옅고 좁게 퍼지는 그림자입니다.
• 보통: 카드 아래에 자연스럽게 깔리는 중간 정도의 그림자입니다.
• 강한: 더 진하고 넓게 퍼져 요소가 또렷하게 떨어져 보입니다.
• 떠있는: 아래쪽으로 길게 퍼져 공중에 뜬 것처럼 보입니다.

4. 직접 조절하기

기본 모양을 고른 뒤 슬라이더로 다듬을 수 있습니다. 슬라이더 아래에는 현재 값이 px 단위로 표시됩니다.

• X 위치: 그림자를 왼쪽(마이너스)이나 오른쪽(플러스)으로 옮깁니다. 범위는 -30에서 30입니다.
• Y 위치: 그림자를 위쪽(마이너스)이나 아래쪽(플러스)으로 옮깁니다. 범위는 -30에서 30입니다.
• 흐림: 값이 클수록 가장자리가 부드럽게 번집니다. 범위는 0에서 60입니다.
• 확산: 그림자 크기를 키우거나(플러스) 줄입니다(마이너스). 범위는 -20에서 20입니다.

그림자 색상 줄에는 코드 입력칸과 색 견본이 있습니다. 입력칸에 #4A3094처럼 여섯 자리 색 코드를 쓰거나 견본을 눌러 색을 고르면 그림자가 그 색으로 바뀝니다. 아래 화면은 흐림 40, 확산 -10에 브랜드 보라색을 준 모습으로, 카드 아래쪽에 보랏빛이 번집니다.

5. 이미지에도 적용하기

이미지에도 같은 항목이 있습니다. 이미지를 고른 뒤 점 세 개를 눌러 도구 막대를 펼치고 톱니바퀴(요소 설정 열기)를 누릅니다. 열리는 창 맨 아래의 전체 속성 패널 열기 버튼으로 속성 패널을 연 뒤 스타일 탭의 고급 설정에서 박스 그림자를 켭니다. 이미지에 모서리 반경이 있으면 그림자도 둥근 모서리를 따라 그려집니다.

6. 이렇게 활용해 보세요

• 배경이 연한 회색인 구역에 흰 카드를 놓고 부드러운이나 보통을 주면 카드가 구역에서 살짝 떠 보입니다.
• 같은 줄의 카드는 같은 기본 모양으로 맞추면 페이지가 정돈되어 보입니다.
• 강조하고 싶은 카드 한 장에만 강한이나 떠있는을 주면 시선이 모입니다.
• 브랜드 색을 그림자 색으로 쓰고 흐림을 크게 하면 은은하게 빛나는 느낌을 낼 수 있습니다.

7. 알아 두실 점

• 값은 고른 요소 하나에만 적용됩니다. 같은 모양의 카드가 여럿이면 카드마다 같은 모양을 눌러 맞춥니다.
• 선택한 요소에는 편집용 보라색 선택선이 덧씌워집니다. 그림자의 실제 모습은 다른 요소를 고른 상태에서 확인하세요.
• 효과 탭의 그림자 & 글로우 항목에도 같은 그림자 값이 표시됩니다. 효과 탭은 별도 글에서 다룹니다.
• 바꾼 값은 위쪽 저장 버튼을 눌러야 저장됩니다. 저장한 뒤 편집기를 다시 열어 요소를 고르면 ON 상태와 정한 값이 그대로 열립니다.