홈페이지를 제작하거나 디자인 레퍼런스를 분석하다 보면 “이 화면을 피그마에서 바로 수정할 수 있으면 좋겠다.”라는 생각을 한 번쯤 해보셨을 것입니다. 예전에는 참고하고 싶은 홈페이지를 캡처한 뒤 피그마에 넣고, 버튼과 이미지, 텍스트를 하나씩 다시 만들어야 했었습니다. 시간도 오래 걸렸고, 레이아웃을 다시 만드는 과정도 생각보다 번거로웠습니다. 그러다 알게 된 것이 html.to.design입니다. html.to.design은 현재 보고 있는 웹페이지를 Figma 디자인 … 더 읽기
홈페이지를 제작하거나 상세페이지를 디자인하다 보면 “이 버튼은 몇 픽셀일까?”, “이미지 크기는 얼마나 될까?”처럼 요소의 정확한 크기가 궁금한 순간이 자주 있습니다. 예전에는 화면을 캡처한 뒤 포토샵에서 직접 크기를 재거나 개발자 도구를 열어 하나씩 확인했었습니다. 하지만 이런 방법은 시간이 오래 걸리고, 빠르게 레퍼런스를 분석하기에는 번거로운 경우가 많았습니다. 그러다 사용하게 된 것이 Page Ruler였습니다. Page Ruler는 웹페이지에서 원하는 … 더 읽기
홈페이지를 보다 보면 “이 사이트는 어떤 프로그램으로 만들었을까?”라는 궁금증이 생기는 경우가 있습니다. 특히 홈페이지 제작을 시작하거나 좋은 레퍼런스를 분석하다 보면 디자인뿐 아니라 어떤 기술을 사용했는지도 함께 알고 싶어집니다. 예전에는 홈페이지 소스를 직접 확인하거나 개발자에게 물어봐야 하는 경우가 많았습니다. 하지만 개발자가 아니라면 소스를 보고 어떤 CMS나 프레임워크를 사용했는지 판단하기는 쉽지 않았습니다. 그러다 알게 된 것이 Wappalyzer였습니다. … 더 읽기
홈페이지나 쇼핑몰 상세페이지를 보다 보면 참고하고 싶은 이미지가 여러 장 있는 경우가 있습니다. 예전에는 필요한 이미지를 하나씩 저장하거나 화면을 캡처해서 사용했었습니다. 하지만 이미지가 많은 페이지에서는 같은 작업을 반복해야 했고, 저장하는 데만도 꽤 많은 시간이 걸렸습니다. 그러다 사용하게 된 것이 Imageye였습니다. Imageye는 현재 보고 있는 웹페이지의 이미지를 한 번에 찾아 보여주고, 원하는 이미지를 선택해 다운로드할 수 … 더 읽기
