▲

Reshaped가 이제 오픈소스로 공개됨

 (reshaped.so)
1P by GN⁺ 8시간전 | ★ favorite | 댓글 1개
  • Reshaped는 디자이너와 개발자를 위해 React와 Figma 컴포넌트 라이브러리를 제공하는 프로젝트
  • 처음에는 유료 라이선스 방식이었지만, 이제 전면 오픈소스로 전환됨
  • 오픈소스화로 GitHub와 Figma Community에서 소스 코드와 디자인 라이브러리를 모두 이용 가능해짐
  • 이 프로젝트는 디자인과 엔지니어링의 연계를 강화하고, 실무에서 바로 활용 가능한 베스트 프랙티스를 제시함
  • 기존 구매자는 앞으로도 계속 업데이트와 지원을 받을 수 있음

Reshaped의 오픈소스 전환 배경

  • 약 5년 전, Reshaped 프로젝트를 시작한 동기는 React와 Figma 모두에서 사용할 컴포넌트 라이브러리가 필요했기 때문
  • 10년 이상 디자인 시스템을 다뤄 본 경험을 바탕으로, 디자인 시스템에서 공통적으로 발생하는 문제점과 좋은 기준을 명확히 이해하고 있음
  • 웹의 80%는 여전히 비슷한 핵심 디자인 원칙 위에 구축되고 있다는 점을 발견했으며, 이를 광범위하게 커버하면서도 개발자가 나머지 20%를 유연하게 처리할 수 있도록 저수준 유틸리티를 제공하는 시스템을 설계함
  • 처음부터 접근성이나 디자인 중 하나에만 집중하지 않고, 디자인과 엔지니어링의 정렬 및 UI 테마, 다크모드, 마이크로 애니메이션 등 다양한 실무 과제를 함께 해결하는 데에 중점을 두었음

유료 모델에서 오픈소스화 결정까지의 과정

  • 프로젝트 유지 가능성을 위해 초기에는 개인과 팀 단위의 유료 라이선스 판매 방식을 채택했음
  • 덕분에 작은 커뮤니티에 더욱 집중하고, 버그 리포트와 기능 요청에 깊게 대응할 수 있었음
  • 언젠가는 유료 장벽을 제거하고 싶다는 바람이 있었고, 2년 전에는 React 패키지를 먼저 무료화하며 새로운 가능성이 열림
  • 이제 모든 소스코드와 Figma 라이브러리를 오픈소스로 공개하게 되었으며, React는 GitHub, Figma는 Figma Community에서 이용 가능해짐

오픈소스 전환의 의의와 기대 효과

  • Reshaped는 디자인과 엔지니어링의 다리를 놓는 도구로, 양쪽 모두가 확장성 있는 디자인 시스템 구축 베스트 프랙티스를 배울 수 있음
  • 라이브러리 소스가 공개됨에 따라, 새로운 기능이 도입될 때 실제 구현 과정을 투명하게 공유할 수 있음
  • Figma나 React의 새로운 기능도 Reshaped의 예제를 통해 회사 디자인 시스템 적용 전에 미리 벤치마킹 할 수 있음

향후 계획 및 커뮤니티 지원

  • Reshaped의 컴포넌트 라이브러리는 앞으로도 계속 확장될 예정임
    • 기존 유료 구매자는 변동 없이 향후 업데이트 및 지원을 계속 제공받을 수 있음
    • 기존 소통 채널도 동일하게 유지됨
  • 앞으로는 코어 라이브러리 위에 더 고급스럽고 사용성 높은 프리미엄 컴포넌트 추가를 고려하고 있음
    • 50가지 랜딩페이지 레이아웃 같은 단편적 기능이 아닌, 복잡한 CSS와 React 논리가 필요한 고난이도 컴포넌트 중심임

커뮤니티에 환원하는 결심

  • 5년 간의 클로즈드 소스 운영을 마치고, 이제 모든 것을 커뮤니티에 환원하며, 새로운 재미를 기대하는 중임
▲
GN⁺ 8시간전  [-]
Hacker News 의견
  • 정말 멋진 라이브러리임과 동시에 많은 코드를 무료로 사용할 수 있음에 감사함을 표함
  • 디자인이 깔끔하게 잘 되어 있다는 인상을 받음
    • Manjaro Linux와 LibreWolf v135 조합에서 탭 전환이나 문서 페이지 내비게이션 시 몇 밀리초 동안 프리즈 현상이 있음
      • Android의 Fennec 브라우저에서도 유사하게 Documentation과 Properties 탭을 전환할 때 약 0.5초 정도 멈추는 현상 경험, 실제 프리즈가 아니라 애니메이션 소수점 처리가 잘못된 것일 수도 있다고 생각함
      • 느린 내비게이션 현상이 있음은 인지 중이며 확인 예정임, 현재는 내비게이션 시 mdx 파일 탐색 및 간단한 인증을 서버에서 처리하고 있어서 서버 사용 중이지만, 오픈소스 전환을 계기로 이제는 정적 웹사이트로 바로 전환이 가능해졌다고 생각함
      • Next JS 서버가 정적 콘텐츠를 렌더링하는 데 약 0.5초가 걸림 이미지 참고
  • 개인적으로 완전히 설계되고 개발된 마이크로 인터랙션이 잘 구현된 프레임워크/라이브러리를 찾고 있음, 최고의 UI 툴킷들도 미묘한 점프나 글리치처럼 느껴지는 경우가 많음
    • 개선하거나 추가 되었으면 하는 마이크로 인터랙션 예시가 있다면 공유해줬으면 좋겠음, 현재 컴포넌트 셋을 추가로 개발 중이며, 그런 마이크로 인터랙션을 구현할 수 있을 것 같음
  • 디자인이 훌륭하다고 생각함, 본인은 현재 Mantine을 활발히 사용 중이고 만족스럽지만 이 라이브러리도 기억해둘 예정임, 다만 ReactNative용으로 이만한 품질의 라이브러리가 있으면 좋겠다는 생각, 현재 존재하는 솔루션들은 아직 만족스럽지 않음
    • 예전에 Mantine이 a11y(접근성) 이슈가 있었던 것으로 아는데 Mantine으로 접근성 준수 체크를 해 본 적이 있는지 궁금함
  • README에서 getting started 링크가 changelog로 연결되어 시작 가이드가 바로 나오지 않음
    • 고마움의 표시와 함께, 해당 이슈를 바로 PR로 올림
  • 이 라이브러리는 매우 정돈되고 깔끔하게 보여서 인상적임, WordPress와 손쉽게 연동하는 방법이 있었으면 한다는 바람이 있음, 아니면 혹시 이미 존재하는지 궁금함
  • 아름다운 컴포넌트 구성과 동시에 아주 대담한 결정을 내렸다고 생각함, 지금까지의 성공을 축하하며 이런 변화가 본인뿐만 아니라 생태계 전체에 큰 도움이 될 것이라 기대함
  • 이 라이브러리의 요금제나 결제 유도, 기부 옵션이 사이트에 아예 없는 게 궁금함, 즉 완전한 오픈소스화에 더 이상 수익 창출에 관심이 없는 것인지에 대해 궁금함
    • 지난 5년간 이 라이브러리를 판매하며 충분히 수익을 얻었고, 이제는 구매가 어려운 사람들도 사용할 수 있도록 공개함에 만족함 (기존 가격은 팀 중심이었음), 앞으로 일부 추가 컴포넌트는 플러스 라이선스 형태로 출시하겠지만, 핵심 React 및 Figma 라이브러리는 계속 무료 오픈소스로 유지할 예정임
    • 기사 하단에 “Reshaped를 더 발전시키기 위해 핵심 라이브러리 위에 복잡하고 견해가 뚜렷한 프리미엄 컴포넌트를 도입할 계획이 있음, 단순한 '랜딩페이지 50종 레이아웃'이 아니라 정교한 CSS 및 React 논리가 필요한 고급 컴포넌트를 의미함”이라는 언급이 있음
  • 오토컴플리트 기능에서 백스페이스 입력이 동작하지 않는 이슈를 발견했으며 (OSX Safari & Chrome에서 확인), 이 부분이 흥미로움
    • 바로 사과하며, 오늘 문서 redeploy 예정이고 해당 이슈는 이미 최신 패치에서 수정됨을 알림
답변달기