# Rough.js: 손으로 그린 듯한 스케치 효과의 그래픽 생성

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=12487](https://news.hada.io/topic?id=12487)
- GeekNews Markdown: [https://news.hada.io/topic/12487.md](https://news.hada.io/topic/12487.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-12-23T10:01:32+09:00
- Updated: 2023-12-23T10:01:32+09:00
- Original source: [roughjs.com](https://roughjs.com/)
- Points: 4
- Comments: 1

## Topic Body

### Rough.js

- **Rough.js**는 스케치 같은 수제 드로잉 스타일로 그래픽을 그릴 수 있는 작은 그래픽 라이브러리임.
- 선, 곡선, 호, 다각형, 원, 타원을 그릴 수 있는 기본 도형을 정의하며, SVG 경로를 그리는 것도 지원함.
- Rough.js는 캔버스와 SVG 모두에서 작동함.

### 설치

- npm을 통해 설치: `npm install --save roughjs`
- 코드에서 사용: `import rough from 'roughjs';`

### 사용법

- 전체 Rough.js API는 Github에서 확인 가능함.
- 캔버스 사용 예: `const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);`
- SVG 사용 예: `const rc = rough.svg(svg); let node = rc.rectangle(10, 10, 200, 200); svg.appendChild(node);`

### 선과 타원

- 원과 타원, 선을 그리는 예: `rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line(80, 120, 300, 100);`

### 채우기

- 채우기 스타일에는 **hachure** (기본), **solid**, **zigzag**, **cross-hatch**, **dots**, **sunburst**, **dashed**, **zigzag-line** 등이 있음.
- 채우기 예: `rc.circle(50, 50, 80, { fill: 'red' }); rc.rectangle(120, 15, 80, 80, { fill: 'red' });`

### 스케치 스타일

- 스케치 스타일 조정 예: `rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' }); rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });`

### SVG 경로

- SVG 경로 그리기 예: `rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });`

### 예시

- 여기서 예시 확인 가능.

### API & 문서

- 전체 Rough.js API

### 크레딧

- 선과 타원 윤곽을 그리는 핵심 알고리즘은 handyprocessing 라이브러리에서 적용됨.
- SVG 호를 캔버스로 변환하는 알고리즘은 Mozilla 코드베이스에서 적용됨.

### 이 프로젝트 지원하기

- Github Sponsors나 Open Collective를 통해 이 프로젝트를 지원할 수 있음.
- 이 프로젝트는 Excalidraw, Cube, Diagrams.net, Terrastruct, SheetJS, Poster Maker, Chartle 등의 지원을 받고 있음.

### 라이선스

- MIT 라이선스, Preet Shihn 저작권.

---

##### GN⁺의 의견

- **Rough.js**는 사용자가 간단하게 수제 드로잉 스타일의 그래픽을 웹에서 구현할 수 있게 해주는 혁신적인 라이브러리임.
- 다양한 채우기 스타일과 스케치 스타일을 조정할 수 있는 기능은 웹 기반 그래픽 디자인에 새로운 차원을 제공함.
- 이 라이브러리는 오픈 소스 커뮤니티의 지원을 받으며, 다양한 웹 기반 도구와 통합되어 사용자 경험을 풍부하게 만드는 데 기여하고 있음.

## Comments



### Comment 21676

- Author: neo
- Created: 2023-12-23T10:01:32+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=38732049) 
- **RoughNotation & RoughJS 사용 사례**
  - RoughJS를 사용하여 밑줄, 강조 등을 지원하는 RoughNotation에 대한 언급.
  - 자신의 웹사이트에서 영감을 받아 구현한 예시로, 하이라이트된 제목에 마우스를 올리면 작동 방식을 요약한 글을 참조하도록 안내.
  - 관련된 해커뉴스 게시물들과 그들의 댓글 수를 나열하여 RoughJS의 인기와 사용 사례를 보여줌.

- **Wired Elements & svg2roughjs**
  - RoughJS를 사용하여 스케치 스타일로 렌더링하는 웹 컴포넌트 세트인 Wired Elements 소개.
  - SVG 파일을 스케치로 변환하는 svg2roughjs 래퍼를 만든 경험 공유.

- **RoughJS를 활용한 인터랙티브 목업 생성**
  - WiredJS와 함께 사용하여 인터랙티브 목업을 만드는 사례 소개.
  - 목업 예시와 소스 코드 링크 제공.

- **RoughJS의 다양한 활용**
  - Excalidraw와 비교하며 RoughJS의 효과를 좋아한다는 의견.
  - horserecords.info에서 RoughJS를 사용한 사례.
  - Boxy SVG 내의 "Sketchify" 생성기 구현 경험을 공유하며, RoughJS가 의존성이 거의 없고 웹 워커 내에서 실행될 수 있다는 장점을 강조.
  - 라이브러리의 사용 용이성과 시간에 견딘 안정성을 칭찬하며, usdc.cool에서 차트를 만드는 데 사용했다는 사례.
  - Rough.js에 감사를 표하며, Hatch 프로젝트에 추가할 수 있는 Sketchy Shapes를 만들고, 실시간으로 파라미터를 조정하는 것이 재미있다는 의견.

이 요약은 해커뉴스 댓글에서 RoughJS 및 관련 도구들의 다양한 활용 사례와 사용자들의 긍정적인 경험을 보여줌. RoughJS는 손으로 그린 듯한 스케치 스타일의 그래픽을 만들 수 있는 자바스크립트 라이브러리로, 웹 개발자들 사이에서 인기가 있으며, 목업, 차트, 인터랙티브 요소 등 다양한 웹 컴포넌트를 만드는 데 사용됨.