Squints — 실제 웹페이지에서 쓰는 디자인 도구

AI 요약

Squints는 브라우저에서 열려 있는 웹페이지 위에 디자인 확인 도구를 겹쳐 보여줍니다. 페이지의 간격을 재고 가이드와 컬럼 그리드를 표시하며, 원하는 형식으로 색상을 확인합니다. 브라우저가 실제로 렌더링한 글꼴도 볼 수 있고, 애니메이션을 느리게 재생하거나 타임라인을 움직여 특정 구간을 살펴볼 수 있습니다. 제작자는 Figma에서 쓰던 도구를 브라우저에서도 사용하고 싶어 처음에는 개인 용도로 만들었다고 설명합니다. 주석을 단 스크린샷을 AI 도구에 바로 복사하는 기능도 포함합니다. 무료로 제공하며 계정 생성과 추적은 하지 않습니다.

Product Hunt 반응

• @andreasktz — 안녕하세요, Product Hunt 여러분. 저는 코펜하겐 근처에서 일하는 프로덕트 디자이너이자 프론트엔드 엔지니어 Andreas입니다. 점점 더 코드에서 직접 디자인하고 있습니다. 하지만 브라우저에서는 Figma에서 익숙하게 쓰던 눈금자, 가이드, 컬럼 그리드, 제대로 된 색상 선택기가 아쉬웠습니다. 그래서 처음에는 저만 쓰려고 Squints를 만들었습니다. 실제 웹페이지 위에 그런 도구를 띄우고, Figma에는 없는 기능도 몇 가지 더했습니다. 모든 애니메이션의 속도를 낮추거나 구간별로 살펴보고, 실제로 렌더링된 글꼴을 확인하고, 주석을 단 스크린샷을 AI 도구에 바로 복사할 수 있습니다. 어떤 용도로 쓰실지, 무엇이 빠졌는지 듣고 싶습니다.
  • @matthewschapiro — 와, 정말 좋네요. 오늘 제 출시 페이지에서 써보겠습니다. 업보트했습니다.
  • @andreasktz — 감사합니다. 당신의 출시 페이지도 정말 멋지네요.
• @daniel_carter19 — 애니메이션을 구간별로 살펴보는 건 단순한 아이디어인데, 저도 자주 쓰게 될 것 같습니다.
  • @andreasktz — 솔직히 제가 가장 좋아하는 기능입니다. 보기 좋은 애니메이션을 만들기가 훨씬 쉬워집니다.
• @grace_gui02 — 브라우저에서 간격을 계속 확인하는 편이라, 도구가 바로 옆에 있다는 점이 잘 맞습니다.
• @nathan_holdstein36 — 실제 렌더링된 글꼴을 보여주는 세부 기능이 좋네요. 브라우저가 예상과 다른 글꼴을 쓴 적이 분명히 있었습니다.
• @sathesharayu12 — 컬럼 그리드를 많이 쓰게 될 것 같습니다. 늘 정렬을 눈대중으로 맞추고 있습니다.
• @trevor_loy23 — 이건 실제로 꽤 유용하겠네요.
  • @andreasktz — 유용하다고 생각해 주셔서 기쁩니다. 처음에는 저만 쓰려고 만들었는데, 다른 사람에게도 쓸모가 있을 것 같았습니다.
• @bouzadamanuel0934 — 실제 페이지를 기준으로 만든 점이 좋습니다. 최종 확인은 보통 그 페이지에서 하게 되니까요.

원문: Product Hunt / 번역·요약: Trawling