# 손으로 그린 스케치 스타일의 UI 요소

> Clean Markdown view of GeekNews topic #15121. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=15121](https://news.hada.io/topic?id=15121)
- GeekNews Markdown: [https://news.hada.io/topic/15121.md](https://news.hada.io/topic/15121.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-06-01T18:34:27+09:00
- Updated: 2024-06-01T18:34:27+09:00
- Original source: [wiredjs.com](https://wiredjs.com/)
- Points: 4
- Comments: 1

## Topic Body

### 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 등이 있음.

## Comments



### Comment 25817

- Author: neo
- Created: 2024-06-01T18:34:27+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40540952) 
- **Pencil and paper**: 코드 작성 없이 손으로 그린 듯한 스케치 느낌을 줄 수 있음.
- **Balsamiq Wireframes**: 빠르고 간단한 목업 제작에 유용한 도구로 추천됨.
- **코드 작성**: 빠르고 간단한 목업 제작의 취지에 맞지 않음.
- **디자인 피드백**: 체크박스를 토글할 때마다 손으로 다시 그린 듯한 느낌을 주면 좋겠음.
- **WireText**: 손으로 그린 스타일의 목업을 빠르게 만들 수 있는 VSCode 플러그인에서 영감을 받음.
- **스케치 UI 요소**: 스케치 스타일의 UI 요소는 좋지만, 스케치 폰트는 별로임. 일반 산세리프 폰트와 스케치 UI가 스타일적으로 맞지 않음.
- **Balsamiq 회상**: 약 10년 전 유행했던 Balsamiq를 떠올리게 함.
- **스케치 목업 사용 이유**: 사용자들이 완성된 인터페이스가 아님을 이해하도록 하기 위해 사용했음.
- **실제 제품 사용**: 이 스타일을 실제 제품이나 베타 버전에 사용하고 싶지만, 추가 작업이 너무 많을 것 같음.
- **DoodleCSS 추천**: DoodleCSS도 좋아할 것 같음.
- **rough.js**: 훌륭한 도구이며, excalidraw에도 사용되고 있음.