일러스트레이터 없이 AI 파일을 웹용 SVG로 변환하는 방법과 변환 후 코드 최적화, 웹 적용 시 주의사항을 정리했습니다. Illustrator 파일을 Inkscape로 여는 이유, 왜 Inkscape에서 만든 SVG를 Figma에서 다시 다듬는가?, Inkscape에서 AI 파일 열기 및 SVG 저장, Figma에서 SVG 다듬기, 웹 최적화를 위한 SVG 정리 등을 다룹니다.
FontDrop으로 로컬 폰트 파일을 브라우저에서 바로 미리보는 방법과 폰트 확인, 비교 작업에 활용하는 실무 팁을 소개합니다. 폰트드롭 FontDrop!, FontDrop! 등을 다룹니다.
아이콘 폰트는 클래스 추가만으로 적용하기 쉽지만 전체 폰트 파일을 불러와 용량이 큽니다. SVG 아이콘은 필요한 것만 불러와 가볍고 선명하지만 마크업 관리가 늘어납니다. 사이트 제작 방식에 맞춰 선택하는 것이 좋습니다.
FWA의 역할과 수상작을 볼 때 체크할 포인트를 정리해 웹디자인 레퍼런스를 단순 감상이 아니라 실무 분석에 활용할 수 있도록 구성했습니다. FWA는 어떤 서비스인가, FWA 수상작에서 읽을 수 있는 기준, FWA 사례를 분석할 때 보는 항목, 플래시 이후, FWA의 변화, FWA를 레퍼런스로 활용하는 방법 등을 다룹니다.
웹사이트 가독성을 높이는 한글, 영문 웹폰트를 비교해 Noto Sans KR, 나눔고딕, Roboto 등 실무에서 자주 쓰는 서체를 정리했습니다. Noto Sans Korean, Nanum Gothic, Open Sans, Roboto, Lato 등을 다룹니다.
숏폼 영상의 권장 비율과 해상도를 기준으로 홈페이지, 쇼핑몰에서 왜곡 없이 노출하는 방법과 레이아웃 설계 포인트를 정리했습니다. 왜 중요할까?, 플랫폼 현황, 웹사이트 제작 설계에 미치는 영향, 권장 비율과 사이즈 맵, 반응형 구현 예시 등을 다룹니다.
설치 없이 브라우저에서 바로 사용할 수 있는 무료 온라인 이미지 편집 도구를 모아 디자인 수정과 빠른 작업에 활용할 수 있도록 정리했습니다. iLoveIMG, PicResize, ResizePixel, LunaPic, Pixlr 등을 다룹니다.
웹사이트 제작에서는 이미지 품질과 로딩 속도를 함께 관리해야 합니다. 포토샵, GIMP, Inkscape, Pixlr 같은 이미지 편집 프로그램은 배너 제작과 시각 보정에 유용하며, Squoosh, ImageMagick, iMazing HEIC Converter 같은 변환 도구는 파일 형식 변경과 이미지 최적화에 적합합니다. 용도에 맞는 도구를 함께 활용하면 웹사이트 제작과 운영 효율을 높이는 데 도움이 됩니다.
웹디자인 작업에서 아이디어 수집과 벤치마킹에 활용하기 좋은 디자인 분야 참고 사이트를 모아 정리했습니다. designboom, Core77, The Cool Hunter, Wallpaper*, Dezeen 등을 다룹니다.