💥 SVG 파일을 이용한 커스텀 버튼 트러블 슈팅 과정

개요

홈 화면 UI/UX 디자인을 새롭게 진행하면서, 디자인에 초점을 맞춰 SVG 파일로 된 커스텀 모양의 버튼을 구현하고자 했다. 일반적인 사각형 형태의 버튼과 달리, SVG의 특정 외곽선 형태에 맞춘 비정형 버튼을 만들기 위해 clip과 path 등을 활용해야 했다. 커스텀 버튼의 디자인과 클릭 영역을 SVG 외곽선과 일치시키고, 다양한 화면 크기에서도 일관된 비율을 유지하는 것이 목표였다.

클립을 사용하지 않으면 SVG가 포함된 전체 사각형 영역이 버튼 영역으로 설정되므로, 외곽선을 기준으로만 버튼이 활성화되도록 클립을 적용해야 했다. 이 과정에서 여러 문제와 해결 과정이 있었으며, 이를 통해 최종적으로 커스텀 버튼을 구현하게 되었다.

1. 버튼을 SVG 외곽선 영역으로 클립 처리

문제:

버튼의 클릭 가능한 영역이 SVG 외곽선에 맞춰지지 않고 전체 사각형 영역으로 설정되는 문제가 발생하였다. clip을 적용하지 않으면 배경 이미지가 사각형으로 덮이면서, SVG의 외곽선을 기준으로 버튼을 설정할 수 없었다.

해결 방법:

clip을 사용하여 버튼을 SVG 외곽선 영역으로 설정함으로써, 외곽선에 맞춰 클릭 가능 영역이 설정되도록 하였다. CustomShape을 사용하여 clip을 적용하고, 필요한 path 데이터를 정의하였다.

clip 적용 전	clip 적용 후

2. SVG 외곽선 데이터 추출 과정에서의 문제

2-1. SVG에서 외곽선 추출의 어려움

문제:

SVG 파일의 복잡한 구조로 인해 clip을 위한 외곽선만을 추출하는 과정에서 어려움을 겪었다. Figma에서 불필요한 path가 다수 포함된 상태로 SVG 파일을 가져왔고, 필요한 외곽선을 정의하기 어려운 상황이었다.

시도 및 포기:

SVG의 path 데이터를 직접 계산하여 외곽선만 추출하는 방식을 고려했으나, 복잡한 구조와 작업 시간의 문제로 인해 이 방법을 포기하게 되었다.

2-2. Figma에서 불필요한 path 제거 및 외곽선 생성

해결 방법:

Figma에서 Union 기능을 사용하여 필요한 외곽선만 남기고, 나머지 path를 수작업으로 제거하였다. 시간이 다소 소요되었지만, 단일 외곽선만 포함된 SVG 파일을 얻어내는 데 성공하였다. 이를 통해 이후 외곽선을 clip에 적용할 수 있는 path로 활용할 수 있게 되었다.

3. path 데이터 추출 및 설정

문제:

수정된 SVG 파일에서 외곽선 데이터만 추출한 후, clip에 적용하기 위해 VectorDrawable의 path 데이터를 파일에서 읽어오는 방법을 사용할지, 아니면 코드 내에서 path를 직접 정의할지 고민하였다.

해결 방법:

path 데이터를 별도로 추출해 사용하지 않고, 코드 내에 직접 path 데이터를 정의하여 사용하기로 결정하였다. 이 커스텀 버튼 하나만 특별히 설정할 계획이었으므로 코드에 path를 포함시키는 방식이 가장 효율적이라고 판단하였다.

4. clip과 이미지의 비율 불일치 문제 해결

문제:

clip으로 설정된 Path와 Image가 동일한 비율로 일치하지 않아, 외곽선과 배경 이미지의 비율 불일치 문제가 발생하였다.

해결 방법:

aspectRatio를 적용하여 Box와 Image가 SVG 원본 비율(373:225)을 유지하도록 설정하였다. 비율 (373:225)는 SVG 파일에서 사용한 이미지의 원본 너비와 높이에 기반한 것이다.

fillMaxWidth를 추가하여 Box가 화면 너비에 맞춰 확장되도록 하였으며, 이를 통해 clip과 이미지 배경이 정확히 일치하도록 조정하였다.

5. 프리뷰와 실제 기기에서의 비율 불일치 문제 및 다양한 화면 크기에서의 UI 대응

문제:

문제:

프리뷰에서는 clip과 이미지 배경이 일치하는 것처럼 보였으나, 실제 기기에서 테스트한 결과 외곽선과 배경 이미지가 어긋나는 문제가 발생하였다. 또한, 다양한 화면 크기에서 일관된 버튼 크기와 비율을 유지하면서 외곽선이 SVG와 동일하게 적용되는지도 확인이 필요하였다.

해결 방법:

이 문제를 해결하기 위해 fillMaxWidth와 fillMaxSize를 사용하여 기기의 화면 너비에 맞춰 Box와 Image의 크기를 동적으로 조정하였다. 이를 통해 버튼의 크기가 화면 너비에 맞춰 자동으로 조정되며, aspectRatio를 설정하여 SVG의 원본 비율 (373:225)을 유지하도록 설정하였다. 이러한 조정으로 다양한 화면 크기에서도 일관된 비율이 유지되었고, 외곽선과 배경 이미지가 일치하여 원하는 버튼 모양을 얻을 수 있었다.

최종적으로 clip으로 설정한 외곽선 영역만 클릭 가능하도록 제한되어, 다양한 기기에서도 일관된 디자인과 클릭 가능 영역을 확인할 수 있었다.

최종 결과

이 모든 단계를 통해 SVG 외곽선을 기반으로 한 커스텀 버튼을 구현할 수 있었다. 최종 결과는 다음과 같다:

• 외곽선과 배경 이미지의 일치: 다양한 화면 크기에서 SVG 외곽선과 배경 이미지가 비율에 맞춰 조정되며 일관되게 표시됨.
• 정확한 클릭 범위 설정: clip으로 지정한 외곽선이 클릭 가능 영역으로 제한되어 외곽선 안에서만 클릭이 가능해짐.
• 기기별 UI 일관성 확보: 기기별 화면 크기에 관계없이 버튼과 이미지 비율이 유지되며 동일한 디자인이 일관되게 표현됨.

SVG 파일을 이용한 커스텀 버튼을 다양한 화면 크기에서 일관되게 구현하는 방법을 통해, 클립과 비율 조정의 중요성을 확인할 수 있었다.