NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

프로덕트

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

모바일 앱과 웹 서비스 내 '카드 UI'는 이제 정말 흔하게 볼 수 있는 구성이 되었습니다. 카드의 이점은 콘텐츠를 하나의 덩어리로 분리, 구분할 수 있다는 점입니다. 예를 들어 커머스에서 우리는 상품에 포함된 이름, 가격, 무료배송 등 특이사항을 확인할 수 있습니다. 이런 정보들을 카드라는 하나의 덩어리로 구분 지어 확인할 수 있도록 도와주기 때문입니다. 하나의 카드를 규격화할 수 있으면, 다른 정보들 역시 쉽게 카드에 집어넣을 수 있으며, 사용자들은 이런 정보를 텍스트로 나열된 상태보다 더 빠르게 확인할 수 있습니다.

 

또한 다양한 디바이스 해상도에 대응할 수 있다는 장점도 있습니다. PC, 태블릿, 스마트폰이 모두 같은 해상도와 사이즈로 만들어졌다면 편하겠지만 실제로는 사이즈가 다양합니다. 주요 콘텐츠를 카드로 구성할 경우 거의 무한대로 확장하거나 변형할 수 있어 활용이 쉽습니다. 반응형 디자인에서 카드 UI가 많이 쓰이는 이유죠. 여러 디바이스를 통해 서비스를 이용하는 환경에서도 일관된 경험을 제공할 수 있습니다.

 

이렇게 카드 UI에 대해 먼저 이야기한 이유는 오늘 소개할 ‘Box Shadow Art’라는 서비스가 카드 UI 구성에 도움이 되는 '박스'와 '그림자'를 쉽게 생성해 코드로 만들어주기 때문입니다. 지금부터 함께 살펴보겠습니다.

 

Box Shadow Art 소개

박스 디자인 Box Shadow Art

'Box Shadow Art'는 서비스가 제공하는 샘플, 다른 사용자가 제작한 카드 또는 아예 백지상태에서 다양한 박스를 생성하고 그림자를 적용할 수 있도록 도와줍니다. 위 이미지는 기본 편집 화면으로 왼쪽으로 편집 도구가 위치하며, 오른쪽으로 편집 도구를 활용해 입력한 값에 따른 결과를 확인할 수 있습니다.

 

박스 디자인 Box Shadow Art

처음 서비스에 진입하면, 샘플로 제공되는 박스와 설정값을 확인할 수 있습니다. (1) 기본 제공되는 설정값을 모두 제거한 상태로 'Box Shadows'를 클릭하면 (2) 100여 개의 프리셋을 확인할 수 있습니다. (3) 선택 시 해당 프리셋이 갖고 있는 설정값을 불러와 이어서 편집할 수 있도록 구성되어 있는데요. 이후 다시 살펴볼 예정이지만, 프리셋은 물론 다른 사용자가 편집, 발행한 박스 디자인을 수정할 수 있어 백지상태에서 디자인을 하는 것보다 더 빠르게 편집할 수 있다는 장점이 있습니다. 어떻게 디자인하면 좋을지 영감을 얻을 수 있다는 점도 좋습니다.

 

박스 디자인 Box Shadow Art

이제 직접 편집 도구에 설정값을 변경한 결과를 확인해볼 차례인데요. (1) 가로 그림자 (2) 세로 그림자 (3) 그림자 강도 (4) 그림자 컬러 등을 직접 설정해 그 결과를 바로 확인할 수 있습니다. 위의 박스 디자인은 제가 프리셋 중 하나를 불러온 모습이며, 아래 박스 디자인은 4가지 값을 하나씩 변경한 모습입니다. 그림자 강도 등은 카드 간 정보를 조금 더 명확하게 구분할 수 있는 기준이 되기에 자주 사용하게 될 설정값이라고 할 수 있습니다.