타이포그래피

사진 위 텍스트 가독성 높이기

피그마 오픈카톡방2026. 3. 7.

질문사항

사진 위에 텍스트를 배치했을 때 가독성을 높이는 방법이 궁금합니다. 현재 텍스트 배경이 자연스럽지 않아 잘 보이지 않습니다.

답변

사진 위에 텍스트를 배치할 때 가독성을 높이는 것은 중요한 디자인 과제입니다. 현재 텍스트 배경이 자연스럽지 않고 텍스트가 잘 보이지 않는다면, 다음과 같은 방법을 시도해볼 수 있습니다.

텍스트 배경에 어두운 그라데이션 또는 오버레이 추가: 사진 위에 텍스트가 들어갈 영역에 어둡거나 반투명한 그라데이션 또는 단색 오버레이 레이어를 추가합니다. 이렇게 하면 사진의 밝거나 복잡한 부분이 텍스트와 직접적으로 충돌하는 것을 막아줍니다.

예시: 텍스트 아래에 검은색 또는 어두운 계열의 색상으로 `Fill`을 추가하고, `Opacity`를 조절하여 사진이 은은하게 비치도록 합니다. 그라데이션을 사용하여 텍스트 주변만 어둡게 만들 수도 있습니다.

텍스트 색상 대비 강화: 배경 오버레이와 대비되는 색상의 텍스트를 사용합니다. 어두운 배경 위에는 밝은 색상(예: 흰색) 텍스트가, 밝은 배경 위에는 어두운 색상(예: 검은색) 텍스트가 좋습니다. 현재 그레이 계열의 배경이라면 화이트 텍스트가 더 잘 보일 것입니다.

폰트 크기 및 두께 조절: 텍스트의 중요도에 따라 폰트 크기와 두께(Weight)를 조절하여 시각적 계층 구조를 만듭니다. 중요한 정보는 더 크고 두껍게, 보조 정보는 작고 얇게 설정하여 가독성을 높일 수 있습니다.

텍스트 그림자(Drop Shadow) 활용: 텍스트에 미세한 그림자를 추가하여 배경과의 분리감을 줄 수 있습니다. 너무 강한 그림자는 오히려 가독성을 해칠 수 있으므로, 부드럽고 은은하게 적용하는 것이 중요합니다.

블러(Blur) 효과 적용: 텍스트가 위치한 사진 영역에 `Layer Blur` 효과를 적용하여 배경을 흐리게 만들면 텍스트가 더 돋보일 수 있습니다.

이러한 방법들을 조합하여 텍스트와 배경 간의 시각적 대비를 충분히 확보하고, 정보의 계층 구조를 명확히 하면 가독성을 크게 향상시킬 수 있습니다.