Wix Blocks: 앱 디자인 가이드라인
5 분 분량
Wix Blocks는 모든 Wix Studio 사용자가 사용할 수 있습니다. Blocks에 액세스하려면, Wix Studio에 가입하세요.
Wix Blocks를 사용하면 Wix 사이트를 구축하는 방법과 유사한 방식으로, 코드를 거의 사용하지 않고 간단한 드래그-앤-드롭 기능으로 멋진 앱을 디자인할 수 있습니다. 시작하기 전, 권장하는 몇 가지 간단한 가이드라인이 있습니다.
다음 지침을 참고하세요.
반응형 앱 제작하기
Blocks를 사용하면 반응형 앱을 구축하고 모든 Wix 에디터에 설치할 수 있습니다. 디자이너는 뷰포트/위젯 크기 변경 및 사용자 지정 콘텐츠를 지원하는 완전히 유동적이고 기능적인 위젯을 구축할 수 있습니다. 이것이 Blocks 작업을 시작하기 전에 반응형 및 유동적인 디자인의 기본을 알아야 하는 중요한 이유입니다.
레이아웃터, 그리드, 스택 및 반복 레이아웃과 같은 레이아웃 요소로 구축하면 반응형 동작을 생성하는 데 도움이 됩니다.
반응형 동작 생성을 위한 6가지 레이아웃 요소
도움말: 미리 계획을 세워보세요!
구축을 시작하기 전 반응형 동작 및 원하는 사용자 지정을 정의하면 사용해야 하는 구조 및 레이아웃 도구를 결정하는 데 도움이 됩니다. 예를 들어, 그리드에 필요한 열 수를 미리 결정하는 데 도움이 될 수 있습니다.
사용자 지정 가능한 콘텐츠 지원하기
Blocks에서 앱을 구축할 때는 Wix 에디터에서 사용자 지정할 수 있으며 이 사용자 지정 가능한 콘텐츠를 지원해야 한다는 점을 고려해야 합니다. 예를 들어, 에디터에서 앱을 설치한 사용자는 일부 요소를 삭제할 수 있습니다. 따라서 섹션 중 하나가 삭제될 때 표시되는 경우와 같이 다양한 종류의 극단적인 시나리오에 맞게 앱 디자인을 조정하는 것이 중요합니다. 예를 들어, 다음 위젯을 확인하세요.
여기에서는 사용자가 이미지 삭제를 선택한 후에도 동일한 위젯을 볼 수 있습니다.
콘텐츠를 사용자 지정 가능한 상태로 유지하려면:
- 그리드(최소 콘텐츠) 및 스택과 같은 요소를 사용해 콘텐츠 길이를 다르게 설정하고 콘텐츠를 표시하거나 숨겨도 레이아웃이 깨지지 않도록 합니다.
- 다양한 콘텐츠(텍스트 길이, 다양한 이미지, 언어 등)로 앱을 테스트합니다.
- 예상한 대로 작동할 수 있도록 요소를 공개 및 비공개해 확인합니다.
디자인 및 레이아웃에 프리셋 사용하기
디자인 프리셋을 사용하면 하나의 앱에 대해 다양한 디자인을 제작할 수 있습니다. 여러 중단점에서 디자인하고 동일한 요소를 재구성해 위젯에 대해 여러 레이아웃을 생성합니다(예: 데스크톱 및 모바일). 모든 프리셋에는 순서가 변경되었지만 상위 요소는 변경되지 않는 동일한 요소가 포함되어 있습니다. 모든 것은 동일한 논리로 연결되어 있습니다. 예를 들어, 모든 프리셋의 그리드는 동일한 수의 셀을 가져야 합니다.
디자인 프리셋 생성 및 관리하기에 대한 자세한 도움말을 확인하세요.
프리셋의 장점
프리셋의 제한 사항
프리셋별 변경 vs 전체 변경
최대한 유동적으로 유지하기
위젯 내 위젯 사용하기
사이트 테마에 요소 연결하기
위젯은 독립형이 아니라 사이트에 설치되므로, 위젯 구축 시에는 사이트 테마에 연결하는 것이 중요합니다.
테마에 요소 연결 시 요점:
테마에 색상 연결하기
다음을 위해 사이트의 색상 팔레트에 요소를 연결합니다.
- Wix 사이트 색 구성표와 앱이 통일되고 일관적이게 유지합니다.
- 앱이 시각적으로 접근 가능합니다.
텍스트 테마 연결하기
다음을 위해 텍스트 구성 요소를 텍스트 테마에 연결합니다.
- Wix 사이트 텍스트 테마와 앱이 통일되고 일관적이게 유지합니다.
- 앱이 시각적으로 접근 가능합니다.
참고: 테마에서 글꼴 크기 연결을 해제할 수 있습니다. 이렇게 하면 사용자가 테마 패널에서 테마를 변경할 때 글꼴의 모양을 유지합니다.
도움말: 미리보기에서 테마를 테스트하세요.
모든 요소를 사이트 테마에 연결했다면, Blocks에서 미리보기로 이동해 테마 테스트를 클릭합니다. 이는 위젯의 요소를 놓치지 않고 모든 것이 완벽하게 연결되어 있는지 확인하는 데 도움이 됩니다.
다음을 확인하세요.
- 디자인이 다양한 색상 구성표와 함께 작동하며 올바르게 연결되어 있어야 합니다.
- 디자인이 다양한 글꼴 모음에서 올바르게 작동해야 합니다.
위젯 디자인을 완료한 후에는 앱을 설치해 제대로 작동하는지 확인하는 것이 좋습니다.
도움이 되었나요?
|