드로어블리: 손으로 그린 웹 화면 요소 도구 모음
1. 이게 뭔가요?
이 기사에서 소개하는 드로블리는 웹사이트의 버튼, 입력창, 목록 같은 사용자 인터페이스 요소들을 손으로 직접 그린 듯한 펜 스케치 형태로 만들어 주는 도구 모음입니다.
2. 왜 화제인가요?
기존에는 개성 있는 손글씨나 수제 느낌을 살리려면 이미지를 일일이 만들어 넣어야 했지만, 이 도구를 사용하면 복잡한 설정 없이도 웹사이트에 손으로 그린 듯한 감성을 쉽게 구현할 수 있기 때문에 주목받고 있습니다.
3. 핵심 내용
드로어블리는 자바스크립트 파일 크기가 압축 후 약 9킬로바이트로 매우 작고 리액트 연동 도구는 1킬로바이트 미만이며 스타일시트 파일은 3킬로바이트이고 다른 프로그램에 대한 의존성이 전혀 없습니다. 화면에 요소가 나타날 때마다 무작위 값에 따라 새로운 스케치가 생성되며, 세 개의 프레임이 1200밀리초 주기로 순환하면서 펜선이 미세하게 떨리는 애니메이션 효과를 냅니다. 버튼은 윤곽선형, 채워진형, 낙서형 등 세 가지 형태로 나뉘며 대기, 로딩, 오류, 성공 등 비동기 작업 상태에 따른 상태 기계를 지원합니다. 버튼, 확인란, 라디오 버튼, 켜고 끄는 토글 버튼뿐만 아니라 입력창, 여러 줄 입력창, 선택 상자, 구분선, 카드, 배지, 목록 같은 기본 요소들을 모두 지원하며 배지는 외곽선형과 낙서형이 있고 목록은 글머리 기호나 확인 표시를 넣을 수 있습니다. 선택 상자는 가장 넓은 선택 항목의 크기를 미리 확보하여 항목을 고를 때 화면 배치가 흔들리지 않게 만들었으며, 크로미움 브라우저에서는 자체적인 스케치 상자와 펜선 확인 표시를 보여 주고 사파리와 파이어폭스는 운영체제 기본 창을 유지합니다. 실제 입력 요소들은 웹 브라우저가 인식하는 화면 뒤쪽 문서 구조인 돔에 그대로 남아 있어서 키보드 조작, 양식 제출, 화면 읽기 프로그램 같은 기본 기능들이 정상적으로 작동하며, 스케치는 시각 보조 도구 감추기 속성이 적용된 에스브이지 형식으로 아래쪽에 깔립니다. 또한 글자에 밑줄을 긋거나 형광펜으로 칠하고 동그라미나 화살표를 그리는 장식 기능과 함께 칩, 탭, 말풍선, 알림 상자, 단계 표시, 키보드 입력 상자, 인용구, 페이지 이동 상자 같은 조합형 요소들도 함께 제공합니다. 모든 요소는 고유한 무작위 번호 생성기인 씨드와 거칠기, 떨림 정도, 색상, 선 두께 같은 공통 설정을 바꿀 수 있으며, 색상은 일반적인 씨에스에스 사용자 지정 속성으로 정의되어 테마를 손쉽게 바꿀 수 있습니다. 이용자가 컴퓨터 설정에서 화면 움직임 줄이기 기능을 켜두었다면 모든 효과를 멈추고 정지된 스케치 하나만 보여 주어 방문자의 기기 환경을 배려합니다. 마지막으로 31킬로바이트 크기의 선택 사항인 손글씨 글꼴을 추가할 수 있으며, 직접 도형 경로 문자열을 반환하는 렌더러 함수와 무작위 난수 생성기도 함께 제공됩니다.
4. 나에게 어떤 영향이 있나요?
개발자나 디자이너는 정형화된 웹 화면에서 벗어나 독창적인 수제 느낌의 디자인을 손쉽게 적용할 수 있고, 방문자는 아기자기한 시각적 요소를 즐기면서도 웹사이트의 실제 기능이나 접근성을 기존과 똑같이 이용할 수 있습니다.