▲

GN⁺: 손으로 그린 스케치 스타일의 UI 요소

 (wiredjs.com)
4P by neo 4달전 | favorite | 댓글 1개

Wired Elements

개요

  • Wired Elements는 손으로 그린 듯한 스케치 스타일의 UI 요소들을 제공하는 라이브러리임.
  • 와이어프레임, 목업, 또는 재미있는 손그림 스타일을 위해 사용할 수 있음.
  • 요소들은 약간의 무작위성을 가지고 그려져서, 두 번의 렌더링이 동일하지 않음.

데모

  • 간단한 데모: rough.js를 사용하여 그려진 스케치 원을 wired-element 컨트롤로 변경하는 예시를 제공함.

라이브 데모

  • Sandbox에서 실시간으로 wired-elements를 사용해보기:
    • Vanilla JS: 기본 자바스크립트로 wired-elements 사용 가능.
    • Vue: Vue 프레임워크에서 wired-elements 사용 가능.
    • Svelte: Svelte 프레임워크에서 wired-elements 사용 가능.
    • React: React 래퍼 컴포넌트를 사용하여 wired-elements 사용 가능.

문서

  • 사용 방법: wired-elements 사용 방법은 GitHub 페이지에서 확인 가능.
  • API 문서: 특정 요소의 API는 문서 페이지에서 확인 가능.

구성 요소

  • 모든 wired 요소들의 구성 요소 쇼케이스 제공.

크레딧

  • RoughJS와 Lit을 사용하여 wired-elements가 구축됨.

프로젝트 지원

  • Open Collective 또는 GitHub에서 프로젝트 개발을 후원할 수 있음.

라이선스

  • MIT 라이선스 (c) Preet Shihn.

GN⁺의 의견

  • 디자인 유연성: 손으로 그린 듯한 스타일은 독특한 디자인을 원하는 프로젝트에 유용할 수 있음.
  • 프레임워크 호환성: 다양한 프레임워크와 호환되어 사용자의 선택 폭이 넓음.
  • 무작위성: 무작위성 요소가 있어 매번 다른 결과를 얻을 수 있어 신선함.
  • 학습 곡선: 초급 엔지니어에게는 새로운 라이브러리를 배우는 데 시간이 걸릴 수 있음.
  • 대안: 비슷한 기능을 제공하는 다른 라이브러리로는 Paper.js, Konva.js 등이 있음.
▲
neo 4달전  [-]
Hacker News 의견
  • Pencil and paper: 코드 작성 없이 손으로 그린 듯한 스케치 느낌을 줄 수 있음.
  • Balsamiq Wireframes: 빠르고 간단한 목업 제작에 유용한 도구로 추천됨.
  • 코드 작성: 빠르고 간단한 목업 제작의 취지에 맞지 않음.
  • 디자인 피드백: 체크박스를 토글할 때마다 손으로 다시 그린 듯한 느낌을 주면 좋겠음.
  • WireText: 손으로 그린 스타일의 목업을 빠르게 만들 수 있는 VSCode 플러그인에서 영감을 받음.
  • 스케치 UI 요소: 스케치 스타일의 UI 요소는 좋지만, 스케치 폰트는 별로임. 일반 산세리프 폰트와 스케치 UI가 스타일적으로 맞지 않음.
  • Balsamiq 회상: 약 10년 전 유행했던 Balsamiq를 떠올리게 함.
  • 스케치 목업 사용 이유: 사용자들이 완성된 인터페이스가 아님을 이해하도록 하기 위해 사용했음.
  • 실제 제품 사용: 이 스타일을 실제 제품이나 베타 버전에 사용하고 싶지만, 추가 작업이 너무 많을 것 같음.
  • DoodleCSS 추천: DoodleCSS도 좋아할 것 같음.
  • rough.js: 훌륭한 도구이며, excalidraw에도 사용되고 있음.
답변달기