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

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

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

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

Box Shadow Art 소개

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

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

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

편집 도구에서 'ADD NEW'를 클릭하면 또 하나의 조건을 추가해 설정할 수 있습니다. 위의 이미지는 두 개의 조건(가로, 세로 그림자 길이 및 강도와 컬러가 한 세트)을 조합해 박스 디자인을 제작한 모습인데요. 이렇게 한 세트의 조건을 추가하다 보면 여러 컬러나 강도에 따른 디자인 결과를 확인할 수 있습니다.

편집 도구를 통해 박스 디자인을 완성하면, 'GET THE CODE'버튼을 클릭 해 코드를 확인할 수 있는데요. 복사하기 버튼을 통해 코드를 복사, 원하는 곳에 붙여 넣어 활용할 수 있습니다. 쉽게 디자인하고, 그 결과를 서비스 내 적용할 수 있는 과정을 모두 진행할 수 있어 더 유용하게 느껴집니다.

'Box Shadow Art'는 크게 두 가지 메뉴로 구성되어 있습니다. 하나는 'Generator'라는 박스 디자인 생성 및 편집 메뉴이며, 또 하나는 'Inspiration'이라는 다른 사용자가 생성한 박스 디자인 갤러리 메뉴입니다. 위 이미지는 'Inspiration'메뉴로 진입했을 때 처음 만나게 되는 모습인데요. 앞서 살펴본 프리셋과는 또 다른 느낌으로 제작자의 개성이 담겨 보는 즐거움이 있습니다.

이렇게 갤러리를 둘러보다 마음에 드는 박스 디자인이 있다면 'Edit'버튼을 클릭, 편집 화면으로 바로 이동할 수 있습니다. 코드를 바로 복사하는 것도 가능합니다. 운영자가 피처드 한 박스 디자인이나, 다른 사용자가 '좋아요'한 내용도 함께 볼 수 있습니다. 직접 박스 디자인을 생성하는 것도 좋지만, 이렇게 누군가 만들어 공개한 박스를 편집해 활용하는 것도 원하는 결과를 빠르게 만나볼 수 있는 방법입니다.

요약

정리해보면 카드 UI의 핵심인 박스 디자인을 손쉽게 만들 수 있는 곳으로, 직접 만들거나 프리셋과 갤러리를 통해 제공되는 디자인을 편집하는 등 세 가지 방법을 활용할 수 있습니다. 디자인 툴을 통해 생성하는 것보다 더 빠르게 제작할 수 있다는 장점이 있습니다. 툴은 다른 것을 활용하더라도 갤러리를 통해 제공되는 여러 사례를 통해 영감을 얻을 수 있으니, 상황에 따라 활용하면 많은 도움을 받으실 수 있습니다.

※ 함께 사용하기 좋은 서비스

1) CSS Scan

이곳에선 앞서 살펴본 서비스와 같이 '박스 디자인'을 직접 생성하거나 수정하기 어렵지만, 93개의 박스 샘플을 살펴볼 수 있습니다. 정방형으로 설계된 다채로운 박스 디자인을 하나씩 살펴보며 원하는 예제를 찾아 활용할 수 있는데요. 트렐로, 스케치 등 특정 서비스에서 사용되는 경우 별도 표기가 되어 있어 참고하기 좋습니다. 

마음에 드는 샘플이 있다면 클릭을 통해 코드를 간단하게 복사할 수 있습니다. 복사한 코드는 원하는 곳에 붙여 넣어 적용할 수 있으며, 컬러 값 등을 코드 내 직접 수정하는 방법으로 기본값을 변경하는 것이 가능합니다. 'Box Shadow Art'는 직사각형의 박스 디자인에 초점이 맞춰져 있으며, 프리셋이나 갤러리 내 등록된 내용들 역시 같은 모양을 하고 있습니다. 만약 정방형의 박스 디자인을 바로 확인하고 싶다면 이곳을 함께 활용하는 것이 좋은 방법이 될 수 있습니다.

2) Copy Paste CSS

'CSS Scan'과 같이 다양한 박스 디자인 예제를 확인할 수 있는 곳입니다. 다른 점이 있다면 머티리얼 디자인 등 특정 디자인 시스템이나 서비스에서 사용되는 박스 디자인을 구분에 따라 확인할 수 있다는 점입니다. 또한 해당 박스 디자인이 포함된 디자인 시스템 웹페이지로 바로 이동할 수 있는 링크가 제공되어 함께 살펴볼 수 있다는 장점이 있습니다. 

여러 가지로 제공되는 박스, 그림자 디자인 중 마음에 드는 샘플이 있다면 클릭 후 코드를 복사할 수 있습니다. 'CSS Scan'와 함께 사용할 경우, 어떤 서비스와 시스템에서 어떤 박스 디자인을 활용하고 있는지 참고자료로 쓸 수 있습니다. 또한 처음 소개한 'Box Shadow Art'에서 유사한 스타일의 박스 디자인을 직접 생성할 때 코드를 복사해 활용할 수 있습니다. 

함께 읽어보세요

● 컬러와 물결 패턴으로 배경을 만드는 : Wicked Backgrounds
● 글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

참고자료

● Box Shadow Art: https://box-shadow.art/inspiration/
● CSS Scan: https://getcssscan.com/css-box-shadow-examples
● Copy Paste CSS: https://copy-paste-css.com/box-shadows

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.