웹플로우(Webflow), 디자인 5가지 체크리스트
소상공인, 1인 기업가라면 제발 보세요
글을 진행하기 전..
무료 전자책 이벤트를 진행하고 있어요!
[당신의 홈페이지가 잘못 만들어졌다는 5가지 증거] 무료 전자책을 여기서 배포 중입니다.
매출을 부르는 모바일 디자인 6대 법칙
6가지 목표 설정 케이스와 팁
배포 후 체크리스트
...
를 담았으니 많은 도움 되실 거예요.
더 많은 소상공인 분들과 일해보고 싶어요!
협업과 교육 문의는 언제든지 환영입니다 :)
배포 전 검토(QA) 목록입니다. MVP용 사이트가 아래 조건을 모두 충족시키지 않아도 좋으나, 일반적으로 홈페이지가 배포될 때 아래가 검토되니 참고하시면 좋습니다.
오늘은 '디자인' 쪽을 깊게 들여다보고자 합니다.
✔️ 페이지 레이아웃 검토하기
웹플로우(Webflow) 프로젝트를 Designer 모드로 접속해 주세요.
X ray mode를 켜고, 화면 바깥으로 튀어나온 Div나 Section이 없는지 확인해 주세요.
같은 방법으로 모바일, 태블릿도 확인해 주세요. 아래처럼 튀어나온 박스가 보인다면 Size나 Spacing 조정이 필요합니다.
✔️ 모바일과 태블릿 뷰 UI 확인하기
1. 직접 배포 후, 배포된 사이트와 서버 내의 화면을 비교해 주세요.
2. 모바일과 태블릿 UI가 데스크톱 버전과 다른지 확인해 주세요.
3. 데스크톱에서 바꾼 UI는 태블릿 → 모바일에도 영향을 주지만, 모바일에서 바꾼 UI는 태블릿 → 데스크톱에 영향을 주지 않습니다.
4. 아래 디자인을 꼼꼼히 검토하세요. Footer(푸터 하단)까지 모든 뷰에서 스크롤이 끝까지 되는지?
5. Slide(Slide) 기능이 있다면, 손가락으로 터치하지 않아도 자동으로 슬라이딩되는지? Header(헤더 상단)이 안정적으로 구동되는지? 모든 버튼이 제대로 클릭 및 작동되는지? 기획한 대로 새 탭, 혹은 기존 탭으로 페이지가 잘 열리는지?
✔️ 콘텐츠 문구 검토하기
Editor 모드로 프로젝트에 들어가 주세요. 전반적인 문구를 한 번에 검토할 수 있어요.
잘못된 스펠링이 없는지, 어색한 카피라이팅은 없는지 보고 수정해 주세요.
✔️ Visual hierarchy, 여백 확인하기
삽입된 텍스트 블락의 계층을 확인해 주세요. H1, H2, H3가 차례로 들어가야 하며 이를 웹플로우(Webflow)에서도 확실히 지정해 주는 것이 중요합니다.
모바일의 스페이싱 및 마진 여백을 전반적으로 확인해 주세요.
섹션의 패딩의 양옆 여백 (10~20px)을 모든 섹션에 공통적으로 적용해 주는 것을 추천합니다.
b. 섹션의 위아래 여백도 공통적인 픽셀(px)로 넉넉히 넣어주세요. 일반 인플루언서들이 블로그 글을 쓸 때 가독성을 위해 문단을 세네 줄로 나누는데, 같은 원리입니다. 모바일 뷰를 구성할 때도 여백을 충분히 넣어주세요. 유저 대부분은 모바일을 우리 서비스를 볼 가능성이 높지요.
모바일에서 텍스트(Text)를 크기가 너무 작지 않은지 봐주세요. 되도록 14px 아래로 조정하지 않습니다(시각적으로 너무 작을 수 있기 때문이에요).
✔️ 스테이징 도메인 스펠링 확인하기
스테이징 도메인이 우리 서비스 이름을 잘 대표하는지 확인해 주세요.
에러가 있다면 도메인 이름을 바꿔주세요.
이미 로그인과 회원가입을 구현하기 위해 멤버스택(Memberstack)을 연결한 상태라면, 이 가이드를 클릭하세요.
