양식 디자인하기

Sami B2B Onboarding의 Appearance 설정에서는 글꼴, 크기, 너비, 필드 스타일, 색상 등 양식 전체의 모양을 변경할 수 있습니다. 이 설정은 양식 하나에 적용되므로 양식마다 다른 모양을 지정할 수 있으며, 테마는 변경되지 않습니다.

Appearance 설정 열기

1. 양식 열기

   Forms로 이동해 양식 옆의 Edit을 클릭합니다. 빌더가 열립니다.

2. Appearance 열기

   왼쪽 레일에서 Appearance를 클릭합니다. 패널에 아래의 모든 설정이 표시되며, 가운데 미리보기는 설정을 변경하는 즉시 바뀝니다.

   

   Appearance 설정을 변경하면 미리보기에 바로 반영됩니다.

3. 저장

   양식이 마음에 들면 저장 바에서 Save를 클릭합니다. 양식이 게시된 상태라면 구매자가 다음에 양식을 열 때 새 모양이 표시됩니다.

Appearance 설정

설정	변경되는 내용	기본값
Font	양식 전체의 서체입니다. Select font 패널이 열립니다.	Theme default
Font size scale	양식의 모든 텍스트 크기이며, 테마 크기의 80%에서 130%까지 5% 단위로 조절합니다.	100%
Width	양식의 최대 너비이며, px(3201200) 또는 양식이 놓인 공간의 %(30100)로 지정합니다. 양식은 가운데에 정렬되고 작은 화면에서는 좁아집니다.	640 px
Layout	Default는 필드를 페이지에 바로 배치합니다. Boxed는 여백과 테두리가 있는 별도의 카드 안에 양식을 넣습니다.	Default
Style	모든 필드 상자의 모양입니다. 필드 스타일을 참고하세요.	Classic
Field spacing	필드 사이의 간격이며 Comfortable 또는 Compact입니다.	Comfortable
Color scheme	양식의 배경, 텍스트, 버튼 색상입니다. 색상을 참고하세요.	Default
CSS class	양식에 직접 만든 클래스 이름을 추가해 테마의 스타일이 양식을 대상으로 적용되게 합니다(예: wholesale-form).	비어 있음

Width를 px와 % 사이에서 전환하면 640 px 또는 100%에서 다시 시작합니다.

글꼴 선택하기

1. 글꼴 목록 열기

   Appearance에서 Font 상자를 클릭합니다. Select font 패널이 열립니다.

2. 글꼴 찾기

   Search에 입력하거나 스크롤합니다. 목록은 두 그룹으로 구성됩니다.

   • System fonts: 테마가 이미 사용하는 글꼴인 Theme default와 System UI, Helvetica, Arial, Georgia, Times New Roman, Monospace가 있습니다. 이 글꼴은 추가로 불러오는 것이 없습니다.
   • Other fonts: 1,000개에 가까운 웹 글꼴입니다. 각 글꼴은 자체 서체로 표시됩니다. 스토어프런트에서 Google Fonts로부터 불러오므로 페이지 로딩이 조금 느려질 수 있습니다.

3. 글꼴과 두께 선택하기

   글꼴을 클릭하면 미리보기가 즉시 바뀝니다. 글꼴에 여러 두께가 있다면 패널 아래쪽의 Weight 목록에서 하나를 선택합니다(예: Regular, Bold, Italic). Done을 클릭합니다.

   Font 아래의 안내에 선택한 내용이 표시됩니다(예: Bold. Loads from Google Fonts on the storefront.).

필드 스타일

Style 상자를 클릭하면 8가지 스타일이 각각 Company name 필드 샘플로 표시됩니다. 하나를 클릭하면 양식의 모든 필드에 적용됩니다.

스타일	필드 모양
Material filled	위쪽에 레이블이 들어 있는 회색 상자입니다.
Material outlined	테두리가 있는 상자이며 레이블이 위쪽 테두리에 걸쳐 있습니다.
Classic	은은한 그림자와 둥근 모서리가 있는 연한 회색 상자입니다. 기본값입니다.
Classic rounded	Classic이며, 한 줄 상자가 완전히 둥급니다.
Flat	모서리가 각지고 그림자가 없는 회색 상자입니다.
Flat rounded	Flat이며, 한 줄 상자가 완전히 둥급니다.
Line	답변 아래에 선만 있습니다.
Line rounded	Line과 모양이 같습니다. 밑줄에는 둥글게 할 모서리가 없기 때문입니다.

둥근 스타일에서도 Long text처럼 여러 줄을 담는 상자는 완전히 둥글어지지 않고 부드럽게 둥근 모서리를 유지합니다.

각 카드는 해당 스타일에서 필드가 어떻게 보이는지 보여 줍니다.

색상

Color scheme 행에는 Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark, Midnight의 10가지 기본 제공 구성표가 표시됩니다. 각 견본에는 배경, 텍스트, 버튼 색상이 나타나며, 하나를 클릭하면 사용할 수 있습니다.

• Default는 페이지 자체의 색상을 따르므로 양식이 테마와 어울립니다. 이 색상을 바꾸려면 테마 설정을 변경하세요.
• 그 외의 구성표는 양식 자체의 배경을 뒤에 칠합니다. 버튼과 단계 표시는 구성표의 버튼 색상을 따릅니다.

나만의 색상 만들기

1. 구성표 열기

   견본 아래에서 Edit scheme을 클릭합니다. 선택한 구성표에 대한 Editing 패널이 열립니다(예: Editing Warm Sand).

2. 색상 변경하기

   색상을 클릭하면 색상 선택기가 열립니다. 사각형과 색상 막대에서 드래그하거나, 16진수 코드를 입력하거나, 브라우저에서 지원하는 경우 스포이트로 화면의 색을 고를 수 있습니다. 설정할 수 있는 색상은 다음과 같습니다.

   색상	칠해지는 부분
   Background	양식 뒤쪽입니다.
   Text	레이블, 제목, 답변입니다.
   Solid button background	Submit application 같은 주요 버튼과 단계 표시입니다.
   Solid button label	해당 버튼의 텍스트입니다.
   Outline button	Back 같은 윤곽선 버튼의 테두리입니다.

   Background, Text, Outline button에는 Theme color가 표시될 수 있으며, 이는 양식이 해당 부분에 테마의 색상을 사용한다는 뜻입니다.

   색상을 변경하는 즉시 구성표가 Custom으로 바뀌고 행에 Custom 견본이 추가됩니다. 이 색상은 이 양식에만 적용되며 테마 자체의 색상 구성표는 변경되지 않습니다.

   

   색상을 하나라도 변경하면 양식에 고유한 Custom 구성표가 만들어집니다.

3. 닫기 또는 초기화

   패널을 닫으면 색상이 유지됩니다. 테마의 색상으로 되돌리려면 패널 아래쪽의 Remove color scheme을 클릭하세요. 양식이 Default로 돌아갑니다.

로고 추가하기

로고는 양식 헤더의 제목 위에 표시됩니다.

1. 헤더 열기

   레일에서 Elements를 클릭한 다음 목록 맨 위의 Header를 클릭합니다.

2. 로고 업로드하기

   Show store logo를 켠 다음 Upload image를 클릭하고 파일을 선택합니다. 1 MB 이하의 .jpg, .png 또는 .svg 이미지여야 합니다. 약 200×60 px 크기가 가장 잘 맞습니다.

   나중에 변경하려면 Replace image를 클릭하고, 제거하려면 Remove를 클릭합니다.

3. 저장

   저장 바에서 Save를 클릭합니다.

디자인 확인하기

빌더의 미리보기는 스토어프런트와 같은 코드로 양식을 그리므로, 미리보기에서 보이는 레이아웃, 필드 스타일, 간격, 구성표가 구매자에게 그대로 표시됩니다.

• 미리보기 위의 Desktop preview와 Mobile preview 버튼으로 두 가지 화면 크기를 모두 확인하세요.
• 테마에 맡긴 설정(글꼴의 Theme default와 색상의 Default)은 스토어프런트에서 테마의 글꼴과 색상을 따릅니다. 이를 확인하려면 도구 모음의 Preview(눈 모양 버튼)를 클릭하세요. 마지막으로 저장된 상태의 양식 페이지가 스토어에서 새 탭으로 열립니다.

다음 단계

• 양식 구성하기 — 각 필드의 너비, 레이블, 플레이스홀더를 설정합니다.
• 구매자가 제출한 후 — 이 양식 제출 후 구매자에게 표시되는 감사 화면을 작성합니다.
• 스토어에 양식 추가하기 — 완성된 양식을 페이지, 테마 섹션 또는 HTML을 쓸 수 있는 모든 곳에 넣습니다.