폼 디자인 설정

폼은 질문 항목만 잘 짜면 끝나는 것이 아니라, 고객이 처음 마주하는 모양도 중요합니다. 브랜드 색에 맞춰 입력칸과 버튼을 꾸미고 싶을 때는 폼 편집 화면의 디자인 설정을 사용합니다. 코드를 만질 필요 없이 색과 모양을 고르면서, 옆에서 바뀌는 폼을 바로 볼 수 있습니다. 이 글에서는 디자인 설정의 각 항목과 저장 후 확인하는 방법을 정리합니다.

1. 디자인 설정은 어디에 있나요

폼 빌더 > 폼 목록에서 폼의 편집을 누르면 가장 먼저 라이브 프리뷰 탭이 열립니다. 왼쪽 폼 미리보기에는 지금 폼이 보이고, 오른쪽 디자인 설정 카드에서 값을 바꿉니다. 값을 바꾸는 즉시 왼쪽 미리보기에 반영되므로 저장 전에 모양을 가늠해 볼 수 있습니다. 이 미리보기는 모양 확인용이라 입력은 되지 않습니다.

2. 색상 프리셋으로 한 번에 시작하기

카드 맨 위 색상 프리셋에는 브랜드 퍼플, 미니멀 모노, 소프트 파스텔, 다크 모드, 웜 선셋, 오션 프레시 여섯 가지가 있습니다. 하나를 누르면 배경색, 텍스트 색, 입력칸의 배경·테두리·글자 색, 버튼 색이 한 벌로 바뀝니다. 프리셋은 색만 바꾸고 라운드, 폰트 크기, 패딩 같은 크기 값은 건드리지 않으니, 먼저 프리셋으로 분위기를 잡고 아래 항목을 하나씩 다듬는 순서가 편합니다.

3. 폼 배경과 입력 필드

프리셋 아래에서 항목별로 직접 고칠 수 있습니다. 색 항목은 왼쪽 색상 선택기를 누르거나 오른쪽 칸에 색 코드를 입력합니다.

• 폼 배경: 배경색과 텍스트 색, 그리고 배경 투명도를 정합니다. 투명도를 낮추면 폼 뒤의 배경이 비쳐 보입니다.
• 입력 필드: 필드 배경, 테두리 색, 모서리를 둥글게 하는 라운드 (px), 글자 크기인 폰트 크기 (px)를 정합니다.

4. 제출 버튼

제출 버튼 묶음에서는 버튼 문구와 모양을 고칩니다. 버튼 텍스트에 적은 글자가 그대로 버튼에 표시되고, 기본 문구는 제출하기입니다.

• 버튼 배경, 버튼 텍스트 색: 버튼과 글자 색입니다.
• 버튼 라운드 (px): 값을 크게 하면 알약 모양이 됩니다.
• 버튼 너비: 전체 너비는 입력칸 폭에 맞추고, 자동 너비는 글자 크기에 맞춥니다.
• 버튼 상하 패딩 (px), 버튼 좌우 패딩 (px): 버튼 안쪽 여백입니다.
• 내부 패딩 (px): 폼 전체 바깥쪽 상자 안의 여백입니다.

5. 저장하고 실제 화면으로 확인하기

마음에 드는 모양이 되면 카드 맨 아래 디자인 저장을 누릅니다. 저장하지 않고 다른 화면으로 가면 바꾼 값은 사라집니다. 저장하면 같은 라이브 프리뷰 탭으로 돌아옵니다. 그다음 미리보기 위의 ▶ 실제로 테스트하기를 누르면 새 창에 고객이 보게 될 폼이 저장된 디자인대로 열립니다. 공개 URL을 게시하기 전에도 열 수 있고, 여기서 입력한 내용은 응답으로 저장되지 않습니다. 창 폭을 줄이거나 휴대폰에서 열어 모바일 모양도 함께 확인해 보세요.

6. 필드 관리의 제출 버튼 설정과 같은 값입니다

필드 관리 탭에서 제출 버튼 필드의 설정을 열면 버튼 문구, 배경색, 글자색, 모서리, 너비, 위아래 여백, 좌우 여백을 고칠 수 있습니다. 패널 안내대로 디자인 탭의 버튼 설정과 같은 값이라서, 어느 쪽에서 바꿔도 같은 버튼이 바뀝니다.

7. 이렇게 활용해 보세요

• 처음에는 프리셋 하나를 고른 뒤, 버튼 배경만 우리 브랜드 색으로 바꿔 보세요. 손이 가장 적게 가면서 분위기가 달라집니다.
• 입력칸이 많은 폼이라면 폰트 크기와 내부 패딩을 조금 키워, 모바일에서 눌러 보기 편한지 확인해 보세요.
• 버튼 문구를 제출하기 대신 "상담 신청하기"처럼 행동이 드러나는 말로 바꿔 보세요.

8. 알아 두실 점

• 색과 크기는 디자인 저장을 눌러야 실제 폼에 적용됩니다. 저장 후에는 ▶ 실제로 테스트하기로 한 번 더 확인하세요.
• 디자인 설정은 기본 표시 방식과 대화형 표시 방식의 버튼·입력칸 모양에 쓰이고, 자가진단 폼에서는 결과 화면의 색도 같은 값을 따릅니다.
• 폼 소개 화면(시작 화면)의 제목, 이미지, 배경은 랜딩페이지 & 공유 탭에서 따로 정합니다. 자세한 내용은 별도 글에서 다룹니다.
• 배경색과 글자색의 대비가 약하면 읽기 어렵습니다. 색을 바꾼 뒤에는 입력칸 안쪽 글자와 라벨이 또렷한지 살펴보세요.