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

 (wiredjs.com)
4P by GN⁺ | ★ favorite | 댓글 1개
  • Wired Elements는 와이어프레임, 목업, 장난스러운 UI에 붙이기 좋은 손그림풍 공통 UI 요소 모음임
  • 요소마다 무작위성이 들어가 같은 컴포넌트도 렌더링할 때마다 완전히 동일하게 보이지 않음
  • 데모에서는 wired-element 컨트롤로 rough.js가 그린 스케치풍 원을 바꾸며 동작 방식을 보여줌
  • Vue, Svelte, React용 CodeSandbox 예제가 있고, React는 별도 wrapper components를 사용함
  • 사용법과 요소별 API는 GitHub 문서에서 확인할 수 있으며, 전체 요소는 component showcase에서 살펴볼 수 있음

스케치풍 UI 컴포넌트

  • Wired Elements는 손으로 그린 듯한 스케치 스타일의 공통 UI 요소 세트임
  • 와이어프레임, 목업처럼 완성 전 느낌을 살리거나 손그림 분위기의 UI를 만들 때 활용할 수 있음
  • 각 요소는 충분한 무작위성으로 그려져, 렌더링마다 완전히 같은 도형처럼 보이지 않음
  • 간단한 데모는 wired-element 컨트롤을 사용해 rough.js로 그린 스케치풍 원을 변경하는 방식임

예제와 문서

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 보기 좋고 묘하게 향수를 자극함. 한 가지 피드백은 체크박스를 토글할 때마다 체크 표시가 매번 손으로 다시 그린 것처럼 조금씩 달라질 거라고 기대했다는 것임
    노이즈를 조금 넣으면 2.0 기능으로 괜찮을 듯함

    • 노이즈를 넣으면 렌더링할 때마다 모습이 달라질 텐데, 그게 좋은지는 잘 모르겠음

  • 이 용도로는 Balsamiq Wireframes가 제일 좋음: https://balsamiq.com/wireframes/
    코드를 써야 하면 빠르고 대충 만드는 취지가 사라짐

    • 이런 건 고객에게 지금 보고 있는 게 완성품이 아니라 동작하는 프로토타입이라는 걸 보여주는 데 유용할 수 있음
      예전 Swing의 “napkin look&feel”처럼 디자인을 갈아끼울 수 있다면 더 잘 맞음: https://napkinlaf.sourceforge.net/
      다만 웹에서는 “테마를 바꿔 디자인을 교체한다”는 발상이 오래전에 사라진 듯함
    • 휴대폰에서 손그림 스타일로 와이어프레임을 만들려면 이게 있음: https://www.tinyux.app
      작은 터치 화면에서 끌어놓기를 쓰고 싶지 않아서 비표준 UX를 택했음
    • https://wireframesketcher.com/를 정말 좋아함
      클라우드 의존성이 없고 평생 라이선스가 $99임. 이런 제품이 점점 희귀해지고 있음
    • Balsamiq를 좋아함. 이런 와이어프레임 스타일은 “이건 그냥 스케치”라는 걸 전달하고, “폰트가 좀 애매한데요” 같은 질문을 피하게 해줘서 유용함
    • Balsamiq는 정말 빠르고 쉬움. 예전에 제3자가 만든 후처리 도구가 Balsamiq Mockups를 코드로 바꿔줬던 걸로 기억하는데, 아직도 남아 있는지 궁금함
      찾아보니 이름은 napkee였고, 오픈소스화됐지만 거의 10년 가까이 손대지 않은 듯함

  • 약 10년 전에 유행했던 Balsamiq가 떠오름

    • 아직도 Balsamiq가 아주 유용하다고 봄
    • 지금도 목업을 만들 때 가장 먼저 쓰는 도구임. 이해관계자에게 제품 동작을 전달하는 데 가장 강력하다고 느낌
    • 맞음, 같은 말을 하려던 참이었는데 이미 보였음
      기억이 맞다면 Balsamiq 창업자 Peldi가 당시 이에 대해 블로그에 썼던 듯함. 나도 좋아함. 더 예전에 유행했던 Comic Sans 글꼴도 어렴풋이 떠오름
    • X 윈도 매니저 중에도 같은 방식으로 스킨을 입힐 수 있는 게 있지 않았나?
    • 거의 매일 씀

  • 예전에는 사용자가 이게 완성된 동작 인터페이스가 아니라는 걸 이해하도록 스케치풍 목업을 쓰곤 했음. 이제는 그런 의미가 사라진 건가 싶음

    • 이게 바로 그 목적임. 목업 소프트웨어를 만들기 위한 것임

  • 손그림 느낌 요소로는 Excalidraw가 가장 좋음: https://excalidraw.com/
    UX와 원하는 작업, 특히 아키텍처 다이어그램과 저충실도 목업을 빠르게 끝낼 수 있는 점에 바로 반했음. 모든 데이터를 브라우저 로컬에 저장해서 오프라인 작업도 쉬움

    • tldraw.com도 훌륭함

  • 이전 논의: https://news.ycombinator.com/item?id=17146451 (650점, 댓글 121개)

    • 펼치면 다음과 같음: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - 2018년 5월 (댓글 120개)
      이것 또는 아주 비슷한 것에 대한 다른 스레드도 있었던 것 같음. 누가 찾으면 목록에 추가할 수 있음

  • 스케치풍 UI 요소는 좋지만 스케치풍 텍스트 글꼴은 싫음. 일반 산세리프 글꼴과 스케치풍 UI는 스타일상 같이 쓰기 어려운 건가?

    • 개인적으로 글꼴은 마음에 들었지만, 이런 “손글씨” 글꼴은 늘 스케치 같지만 규칙적인 불쾌한 골짜기에 걸림
      특정 글리프가 따로 보면 아무리 스케치 같아도, 매번 정확히 똑같아 보임
    • 쇼케이스의 많은 항목이 일반 글꼴을 쓰고 있으니 참고할 수 있음: https://wiredjs.com/showcase
    • 필기체 글꼴이라면 적어도 오른쪽으로 기울어야 함

  • 이 프로젝트에서 영감을 받아 손그림 스타일 목업을 빠르게 만들 수 있는 VSCode 플러그인 WireText를 만들었음
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • 미감 때문에 마음에 듦. 귀엽다. 피드백을 받는 데 더 유용한지 같은 건 별로 신경 쓰지 않음

    • 시각적인 느낌만 원하고 JS 부분이 필요 없다면 PaperCSS를 쓰면 됨

  • 개인적으로는 이런 스타일이 충분히 좋아서 실제 제품에 쓰고 싶음. 아니면 제품의 베타 버전에 쓰다가 정식 출시 때 바꿀 수도 있겠음
    다만 추가 작업이 너무 많을 것 같음

    • 디자인 일을 막 시작했을 때 고객 성공 팀 일부를 대상으로 저충실도 프로토타입 사용자 테스트를 진행했음
      시각적 표현은 우리가 보여주는 것이 아직 바뀔 수 있다는 뜻을 전달하려는 의도였는데, “스케치 느낌이 정말 좋다”는 피드백을 받았음. 그 이후로는 디자인 과정의 단계 표시로 그 표현에 의존하지 않게 됨
    • 베타나 알파 빌드에 이런 스타일을 쓰는 데는 이유가 있음. 받게 되는 피드백의 종류가 달라짐
      오래전에 “완성되지 않은 것처럼 보이게 만들기”에 관한 글을 읽었는데, 아마 AWT look and feel 맥락이었던 것 같음. 관련해서 xkcd 스타일 그래프도 있음: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) 그리고 https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      제품이 완성돼 보이면, 받는 피드백도 완성품이라는 전제에서 나옴
      예전에 JavaScript 내부 로직을 작업하면서 괜찮아 보이는 헤더를 쓴 실수를 했음. 기존에 쓰던 늘어난 GIF보다 낫고 CSS 그라데이션도 들어가 있었음
      “이 작업 흐름의 페이지 순서가 맞나? 이 기능에 필요한 UI 요소가 페이지에 있나? 빠진 기능은 없나?”를 확인하고 싶었는데, 돌아온 피드백은 파란색과 그라데이션이 어두운 쪽에서 밝은 쪽으로 가야 하는지 반대여야 하는지에 관한 것이었음
      더 찾아보니 그 look and feel은 https://napkinlaf.sourceforge.net였고, 여기서 다음 블로그 글로 이어짐: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...
답변달기