웹 화면 설계부터 아이콘·인터랙션까지
웹 화면을 만들 때 참고 사이트를 많이 모으는 것만으로는 다음 할 일이 선명해지지 않습니다. 사용자가 해야 할 행동을 먼저 정하고, 구조를 그린 다음, 필요한 아이콘과 움직임을 하나씩 선택해 보세요. 작은 서비스의 첫 화면을 만드는 순서로 도구를 묶었습니다.
이런 분에게 추천해요
혼자 웹 서비스를 만들거나 디자이너와 화면 구성을 의논해야 하는 개발자·기획자에게 맞습니다. 완성된 디자인 파일보다 화면의 행동과 흐름부터 정리하려는 상황을 기준으로 골랐습니다.
자료를 고른 기준
화면 구조를 표현하는 도구, 일관된 아이콘 자료, 구현 과정을 볼 수 있는 프런트엔드 튜토리얼을 한 가지씩 골랐습니다. 같은 기능의 도구를 여러 개 비교하기보다 지금 단계에 필요한 결정에 집중할 수 있습니다.
이 순서로 읽어 보세요
먼저 한 화면에서 가장 중요한 행동과 보조 행동을 정하고 와이어프레임을 그리세요. 그다음 아이콘의 모양과 크기를 통일하고, 마지막에 행동 결과를 이해하는 데 도움이 되는 움직임만 추가하세요. 작은 모바일 화면에서도 같은 흐름으로 확인해 보세요.
-
balsamiq.com
Balsamiq: 화면 구조와 프로토타입
와이어프레임과 프로토타입으로 화면의 구조와 흐름을 표현하는 도구입니다. 실제 코드를 작성하기 전에 버튼의 역할과 화면 이동을 설명하는 초안을 만들 때 사용할 수 있습니다.
직접 해 볼 일
첫 화면을 그리고 사용자가 완료해야 할 행동 하나를 표시하세요. 그 행동과 관계없는 요소를 빼도 화면이 이해되는지 살펴보세요.
제품 소개와 이용 조건을 확인한 뒤 사용하세요. 체험 가능 여부를 영구 무료 이용으로 해석하지 마세요.
-
heroicons.com
Heroicons: 웹 화면에 사용할 SVG 아이콘
검색할 수 있는 SVG 아이콘과 React·Vue 사용 안내를 제공합니다. 여러 출처의 아이콘을 섞기 전에 하나의 세트로 탐색·저장·설정 같은 행동을 표현해 보는 데 적합합니다.
직접 해 볼 일
세 가지 행동에 사용할 아이콘을 고르고 크기와 표현 방식을 맞추세요. 아이콘만으로 뜻이 불분명한 버튼에는 텍스트도 함께 붙여 보세요.
웹사이트의 SVG와 프로젝트에 설치한 패키지 버전을 구분하고, 아이콘 사용 시 라이선스 조건을 확인하세요.
-
tympanus.net
Codrops: 인터랙션과 프런트엔드 튜토리얼
화면 전환과 인터랙션을 구현하는 튜토리얼, 사례와 데모를 찾아볼 수 있습니다. 구조가 정해진 화면에서 어떤 움직임이 사용자의 이해를 돕는지 비교하는 마지막 단계로 골랐습니다.
직접 해 볼 일
데모 하나에서 효과를 한 가지만 골라 목적을 적어 보세요. 효과가 없어도 주요 기능을 사용할 수 있는지 함께 확인하세요.
모든 예제가 같은 프레임워크를 사용하지는 않습니다. 예제의 게시 시점·설치 의존성·사용 조건을 먼저 읽으세요.
실습 전에 확인하세요
도구의 요금·기능과 예제의 의존성은 바뀔 수 있습니다. Balsamiq 이용 조건, Heroicons 사용 방식, Codrops 예제별 라이브러리 버전과 라이선스를 적용 전에 확인하세요. 시각 효과는 키보드 조작과 움직임 감소 설정에서도 점검하세요.
추천 이유와 실습은 Pastelinkers가 작성했습니다. 원문 내용은 각 자료의 ‘원문 확인’에서 확인할 수 있습니다.