▲

GN⁺: HTML to React & Figma - 웹사이트를 React 컴포넌트로 변환하는 크롬 확장

 (chromewebstore.google.com)
18P by neo 1일전 | favorite | 댓글 6개
  • 웹 페이지의 HTML을 React 코드나 Figma 디자인으로 변환할 수 있는 도구
    • 사용자는 기존 디자인을 가져와 React 코드로 변환하거나, Figma에서 편집 가능한 디자인으로 변환할 수 있음
    • AI를 사용하여 기존 디자인을 맞춤화하고 수정할 수 있는 기능을 제공
  • 주요 기능
    • 마음에 드는 기존 디자인을 가져와 자신의 프로젝트에 사용할 수 있는 React 코드로 즉시 변환 가능함
    • 기존 디자인을 가져와 편집하고 작업할 수 있어 처음부터 시작할 필요가 없음
    • AI를 활용하여 디자인을 맞춤화하고 수정 가능
▲
charychary 32초전  [-]

후기
사이트 전체를 한번에 복제하긴 어려움.
복제하는 컴포넌트가 커질수록 에러가 생길 가능성이 커서 헤더, 메인, 아티클, 사이드, 푸터처럼 주요 컴포넌트를 별도로 복제하고 컨테이너 레이아웃은 개발자가 직접 짜야했음.

스타일링 기능
기본 인라인은 컴포넌트마다 style태그를 생성하거나 html마다 style 속성을 부여했는데, 이건 개발자 입장에서 유지보수하기에는 코드가 js랑 분리가 덜 되고 지저분하다고 느꼈음.
Tailwindcss로 변환하는 기능은 정말 좋았음.

컴포넌트 분할 기능
있긴 한데, 거의 없다고 봐야함. 여기에 더해 환장할 양의 css, 재사용될만한 컴포넌트 상당수가 그대로 html로 사용됨.
따라서 몇 천줄 단위의 jsx코드가 나와버림.

Ai 업데이트
Ai채팅으로 디자인 컨셉을 바꿀 수 있었는데, 생각만큼 엄청 참신한게 나오진 않지만, 3번에 한번 꼴 정도로 신선한 디자인이 나왔음,
그런데 유료라서 몇 번 못 써봄.

정적 파일 생성
Svg나 png들을 하나의 파일로 통합하는 이미지 스프라이트 기법을 사용해서 아이콘들을 통합한다는 점이 좋았음

결론
기존의 생성형 ai를 사용하듯이,
"전체적으로 괜찮지만 디테일 측면의 부족으로 개발자가 만져줘야 하는 코드"를 만들어냄.
특히 컴포넌트 분할 기능이 부족해서, 아직까지는 "레이아웃 및 정적 파일 추출기" 정도로만 쓸모 있어 보임.
기존에 gpt같은 ai로는 비즈니스 로직이 아니라 디자인 css의 레이아웃 관련 문제는 다루기 조금 어려웠는데, 이건 측면을 보완할 수 있을지 좀 더 다뤄봐야 겠음.

답변달기
▲
iolothebard 13시간전  [-]

HTML을 왜 react로 변환(?)해야할까요?

답변달기
▲
roxie 23시간전  [-]

너무 잘 되네..

답변달기
▲
kws730 1일전  [-]

아 너무 좋네요

답변달기
▲
neo 1일전  [-]
Hacker News 의견

  • 실제 제품이 매우 매력적임. 기본 테스트만으로도 일반 LLM 모델보다 훨씬 세련된 디자인을 생성함을 알 수 있음. 이번 주에 프로토타이핑에 사용할 예정임

    • 표준 LLM에서 어떤 변화를 주었는지 궁금함. 가드레일을 설정하거나, 구성 요소를 제공하거나, 좋은 웹사이트의 코퍼스를 기반으로 미세 조정했을 가능성을 상상할 수 있음

  • 이 도구는 페이지의 섹션을 깨끗하고 인쇄 가능한 HTML로 얻는 좋은 방법임. 예를 들어, Claude 웹 UI는 전체 채팅 기록을 인쇄할 수 없고 화면에 보이는 것만 인쇄함

    • 이 도구를 사용하면 두 채팅 버블 사이의 지점을 선택하여 전체 기록을 선택할 수 있음
    • 유사한 기능을 가진 간단한 Chrome 확장을 만들었지만, 출력의 품질이 떨어짐

  • 이런 도구의 출력물에 대한 저작권이 어떻게 되는지 궁금함. 모든 웹사이트가 라이선스를 포함하지 않기 때문에, 일반 LLM보다 더 불명확할 수 있음

  • 매우 유용한 브라우저 확장임. 스타일을 TailwindCSS로 변환할 수 있는 점이 매우 마음에 듦. 매우 영리함

  • 이 도구는 정말 훌륭함. 약 10개의 웹사이트에서 시도해봤는데, 약 80%의 웹사이트 요소에서 잘 작동함

    • 우리 사이트에서도 시도해봤고, 가장 중요한 구성 요소를 완전히 복제할 수 있었음
    • 몇몇 사이트는 선택을 허용하지 않음. 선택 모드를 활성화하고 요소 위에 마우스를 올려도 아무것도 선택되지 않음. 우리 사이트도 복제를 방지할 방법을 고민하게 됨
    • 훌륭한 작업임. 오랫동안 사용할 것임

  • 멋진 도구임. 요즘 프론트엔드 개발이 복잡해져서 이런 도구가 필요하다는 점이 아쉬움. 예전의 view-source와 단일 style.css의 시절이 그리움

  • Hacker News 로고의 폰트를 확인했는데, 다름

    • 원래는: Verdana, Geneva, sans-serif
    • 당신의 것은: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    • 멋지지만, 왜 이런 일이 발생하는지 이해가 안 됨

  • 좋은 작업임. Firefox와 호환되도록 만들 계획이 있는지 궁금함

  • 내 Framer 페이지에서도 작동하여 직접 호스팅할 수 있을지 궁금함

  • 웹사이트의 HTML과 CSS를 얻는 매우 유용한 방법임

답변달기