라디오 버튼과 체크박스는 어떻게 고르나 — UI는 정답이 있는 문제다

제출 버튼 뒤에는 저장이 있다

서비스 소개 페이지 아래쪽에 흔히 있는 상담 신청 칸을 떠올려 보자. 이름을 적고, 문의 내역을 적고, 상담 유형을 고르고, 제출 버튼을 누른다. 이렇게 값을 입력해 한 번에 보내는 양식을 폼이라고 한다. 설문을 만들 때 쓰는 구글 폼의 그 폼이다.

강의는 이 폼을 볼 때 한 가지를 먼저 떠올리라고 한다. 제출을 누르면 이 값들은 어딘가에 저장된다. 고객이 남긴 문의를 운영하는 쪽이 관리자 화면, 즉 운영자만 들어가는 화면에서 읽어야 하니 값이 어딘가에 남아 있어야 한다. 그 어딘가가 데이터베이스, 값을 표 모양으로 쌓아 두는 곳이다.

엑셀로 생각하면 쉽다. 열 이름을 이름, 문의 내역, 유형으로 두고 문의가 들어올 때마다 한 줄씩 채운다. 제출 버튼은 저장하는 행동이지 저장되는 값이 아니므로 열이 되지 않는다.

이때 같은 열에는 같은 모양의 값이 들어가야 한다. 어떤 줄은 유형 칸에 값이 하나, 어떤 줄은 여러 개가 제각각 적혀 있으면 나중에 필터를 걸거나 검색할 때 곤란하다. 그래서 칸마다 어떤 모양의 값이 들어가는지가 먼저 정리돼야 한다.

칸마다 값의 모양이 정해진다

이름은 그냥 글자다. 글자로 된 값을 데이터베이스에서는 문자열, 영어로 string이라고 부른다. 01편에서 본 데이터 타입, 즉 칸마다 들어갈 값의 형태로 말하면 짧은 글을 담는 varchar에 해당한다.

문의 내역은 길어질 수 있다. 이런 값은 긴 글, text로 따로 부른다. 둘 다 글자지만 길이에 따라 이름을 나눠 둔 것이다.

상담 유형은 두 갈래 중 하나다. 한 개만 고르게 한다면 고른 값 하나만 저장하면 되므로 문자열 하나다. 여러 개를 고를 수 있게 한다면 값의 모양 자체가 목록이 된다. 선택지가 열 개이고 그중 세 개를 골랐다고 생각하면 분명하다.

여러 값을 순서대로 담은 묶음을 배열 또는 리스트라고 부른다. 대괄호로 열고, 고른 값을 쉼표로 구분해 적고, 대괄호로 닫는다. 복수 선택 칸이라면 하나만 골라도 목록 안에 값이 하나 들어 있는 모양이 된다. 글자로 이어 붙여 저장할 수도 있지만 값의 기본 성격은 목록이다.

이름     문의 내역                            유형
───────  ───────────────────────────────────  ──────────
김민수   다음 달에 도입 상담을 받고 싶습니다  ["A", "C"]
이서연   견적이 궁금합니다                    ["B"]

이서연은 하나만 골랐지만 목록 안의 값 하나로 저장된다

하나만이면 라디오 버튼, 여러 개면 체크박스

값의 모양이 정해지면 화면에서 할 일도 정해진다. 사용자가 선택지를 누르는 흐름을 따라가 보자.

하나만 고르는 칸에서는 A를 고른 상태로 B를 누르면 A의 선택이 풀려야 한다. 이렇게 동작하는 화면 요소가 라디오 버튼이다. 한 무리의 동그란 표시 가운데 하나만 켜진다.

여러 개를 고르는 칸에서는 A를 고른 상태로 B를 눌러도 A가 그대로 남아 있어야 한다. 이렇게 동작하는 것이 체크박스다. 네모 칸마다 체크 표시가 따로 쌓인다.

둘은 겉보기가 비슷해도 동작이 다르고, 그 차이는 저장되는 값의 모양에서 바로 나온다. 값 하나를 저장하는 칸에 체크박스를 붙이거나 목록을 저장하는 칸에 라디오 버튼을 붙이면 화면과 저장이 어긋난다. 강의가 이 둘을 두고 너무나도 정답이 명확한 문제라고 말하는 이유다.

UI는 정답이 있는 문제다 — 폼은 스도쿠처럼 푼다

UI 디자인이라고 하면 흔히 예술적인 감각의 영역이고 선택지가 끝없이 많을 거라고 생각한다. 강의는 전문 UI 디자이너가 아닌 사람에게 다른 마음가짐을 권한다. UI는 정답이 있는 문제이고, 그 정답은 문제를 어떤 시각으로 보느냐에 따라 보인다.

강의는 화면을 크게 폼인 것과 폼이 아닌 것 두 갈래로 나눈다. 폼이 들어간 화면은 대부분 스도쿠처럼 풀면 되는 문제였다고 한다. 제출된 값이 저장되는 흐름까지 생각하면 반드시 지켜야 할 약속의 범위가 생기고, 그 안에서 어떤 UI를 골라야 하는지는 이미 정해진 게임이 된다.

물론 라디오 버튼과 체크박스에서 갈라져 나온 UI 형태도 많다. 이런 형태를 넉넉히 알고 있을수록 바이브 코딩, 즉 AI에게 말로 시켜 화면과 코드를 만드는 방식으로 나온 결과물을 판단하는 눈이 선명해진다는 것이 강의의 설명이다.

오늘 바로 해볼 수 있는 일은 이렇다. AI가 만들어 준 폼 화면이 있다면 입력 칸을 하나씩 짚으며 이 값이 어떤 모양으로 저장되는지 묻는다. 새로 만들게 한다면 아래처럼 저장될 값의 모양을 먼저 적어 주고 화면 요소를 거기에 맞추게 한다.

다음 편에서는 폼이 아닌 곳, 사례 카드 목록 위의 필터에도 정답이 있는지 본다.

이 상담 신청 폼의 입력 칸마다 제출된 값이 어떤 모양으로 저장되는지 표로 정리해 줘.
열은 입력 칸 / 저장되는 값의 모양(짧은 글·긴 글·값 하나·목록) / 지금 쓰인 화면 요소.
값이 하나만 저장되는데 체크박스를 쓴 칸, 목록으로 저장되는데 라디오 버튼을 쓴 칸이 있으면 알려 줘.

상담 신청 폼을 만들어 줘. 제출된 값의 모양은 이렇게 정한다.
- name: 이름, 짧은 문자열
- message: 문의 내역, 긴 글
- types: 상담 유형, A·B·C 중 여러 개 선택 가능, 문자열 목록 (예: ["A", "C"])
types는 체크박스로 만들고, 여러 개를 골라도 앞의 선택이 남게 해 줘.