홈페이지를 제작하거나 기존 사이트를 분석하다 보면 단순히 디자인만 보는 것보다 실제 구조를 확인해야 하는 경우가 많습니다. 이미지 ALT 태그가 제대로 적용되었는지, CSS를 제거하면 콘텐츠 구조가 어떻게 보이는지, JavaScript를 끄면 페이지가 정상적으로 작동하는지처럼 개발자나 SEO 담당자가 확인하는 항목을 살펴봐야 하는 순간도 있습니다. 예전에는 이런 작업을 위해 브라우저 개발자 도구(F12)를 열고 필요한 기능을 하나씩 찾아 사용했었습니다. 하지만 … 더 읽기
홈페이지를 제작하거나 블로그를 운영하다 보면 한 번쯤 이런 궁금증이 생깁니다. “이 홈페이지는 방문자가 얼마나 될까?” “검색으로 많이 들어오는 걸까?” “광고를 하고 있는 걸까?” 예전에는 이런 정보를 알기 위해 직접 검색을 하거나 여러 SEO 분석 사이트를 이용했었습니다. 하지만 대부분 유료 서비스였고, 원하는 정보만 빠르게 확인하기에는 번거로운 경우가 많았습니다. 그러다 사용하게 된 것이 Similarweb이었습니다. Similarweb은 현재 방문한 … 더 읽기
홈페이지를 운영하거나 블로그를 작성하다 보면 “이 페이지는 SEO가 제대로 적용되어 있을까?”라는 궁금증이 생기는 경우가 있습니다. 특히 워드프레스나 자체 홈페이지를 운영하면서 검색 노출을 신경 쓰기 시작하면 제목(Title), 메타 디스크립션, H태그, 이미지 ALT 태그 등 확인해야 할 항목이 생각보다 많다는 것을 알게 됩니다. 예전에는 이런 정보를 확인하기 위해 개발자 도구를 열거나 페이지 소스를 직접 살펴봤었습니다. 하지만 필요한 … 더 읽기
홈페이지를 제작하거나 디자인 레퍼런스를 분석하다 보면 “이 화면을 피그마에서 바로 수정할 수 있으면 좋겠다.”라는 생각을 한 번쯤 해보셨을 것입니다. 예전에는 참고하고 싶은 홈페이지를 캡처한 뒤 피그마에 넣고, 버튼과 이미지, 텍스트를 하나씩 다시 만들어야 했었습니다. 시간도 오래 걸렸고, 레이아웃을 다시 만드는 과정도 생각보다 번거로웠습니다. 그러다 알게 된 것이 html.to.design입니다. html.to.design은 현재 보고 있는 웹페이지를 Figma 디자인 … 더 읽기
좋은 홈페이지를 보다 보면 단순히 색상이나 폰트만 참고하는 것이 아니라 버튼 크기, 여백, 카드 디자인, 그림자 효과까지 분석하고 싶을 때가 있습니다. 예전에는 이런 정보를 확인하기 위해 개발자 도구(F12)를 열어 HTML과 CSS를 직접 찾아보곤 했었습니다. 하지만 개발자가 아니라면 수많은 코드 속에서 원하는 정보를 찾는 것이 쉽지 않았고, 시간이 오래 걸리는 경우도 많았습니다. 그러다 사용하게 된 것이 … 더 읽기
홈페이지를 보다 보면 “이 사이트는 어떤 프로그램으로 만들었을까?”라는 궁금증이 생기는 경우가 있습니다. 특히 홈페이지 제작을 시작하거나 좋은 레퍼런스를 분석하다 보면 디자인뿐 아니라 어떤 기술을 사용했는지도 함께 알고 싶어집니다. 예전에는 홈페이지 소스를 직접 확인하거나 개발자에게 물어봐야 하는 경우가 많았습니다. 하지만 개발자가 아니라면 소스를 보고 어떤 CMS나 프레임워크를 사용했는지 판단하기는 쉽지 않았습니다. 그러다 알게 된 것이 Wappalyzer였습니다. … 더 읽기
홈페이지나 쇼핑몰 상세페이지를 보다 보면 참고하고 싶은 이미지가 여러 장 있는 경우가 있습니다. 예전에는 필요한 이미지를 하나씩 저장하거나 화면을 캡처해서 사용했었습니다. 하지만 이미지가 많은 페이지에서는 같은 작업을 반복해야 했고, 저장하는 데만도 꽤 많은 시간이 걸렸습니다. 그러다 사용하게 된 것이 Imageye였습니다. Imageye는 현재 보고 있는 웹페이지의 이미지를 한 번에 찾아 보여주고, 원하는 이미지를 선택해 다운로드할 수 … 더 읽기
좋은 홈페이지나 상세페이지를 발견하면 나중에 참고하기 위해 캡처해 두는 경우가 많습니다. 하지만 일반 화면 캡처는 현재 보이는 화면만 저장되기 때문에 긴 웹페이지를 여러 번 나눠 캡처해야 하는 번거로움이 있습니다. 예전에는 스크롤을 조금씩 내리면서 여러 장을 저장한 뒤 하나씩 이어 붙여 정리했었습니다. 시간도 오래 걸리고 중간이 잘리거나 겹치는 경우도 자주 있었습니다. 그러다 사용하게 된 것이 GoFullPage였습니다. … 더 읽기
홈페이지를 보거나 상세페이지를 분석하다 보면 “이 폰트는 어떤 글꼴일까?”라는 궁금증이 생기는 경우가 많습니다. 특히 디자인 작업을 시작한 지 얼마 되지 않았을 때는 마음에 드는 홈페이지를 발견하면 폰트부터 찾아보고 싶었습니다. 예전에는 폰트를 확인하기 위해 개발자 도구(F12)를 열고 CSS를 하나씩 살펴보거나, 이미지로 저장한 뒤 폰트 찾기 서비스를 이용하기도 했었습니다. 하지만 이런 방법은 시간이 오래 걸렸고, 원하는 정보를 … 더 읽기
웹사이트를 보다 보면 마음에 드는 색상을 발견하는 경우가 있습니다. 브랜드 홈페이지의 메인 컬러가 깔끔해 보이기도 하고, 상세페이지의 버튼 색상이 눈에 들어오기도 합니다. 예전에는 이런 색상을 참고하려면 화면을 캡처한 뒤 포토샵을 열어 스포이드(Eyedropper) 도구로 직접 색상을 추출 했었습니다. 과정도 번거롭고, 이미지 압축 때문에 실제 색상과 조금 다르게 추출되는 경우도 있었습니다. 하지만 ColorZilla를 사용하기 시작한 이후에는 작업 … 더 읽기
