드롭다운 필터가 오답에 가까운 이유
앞 편에서는 상담 신청 폼, 즉 값을 입력해 한 번에 보내는 양식이 저장 흐름을 따라가면 스도쿠처럼 풀린다는 강의 내용을 정리했다. 강의는 이어서 폼이 아닌 곳에도 정답이 있는지 묻는다. 예시는 서비스 소개 페이지의 사례 섹션, 즉 페이지를 위아래로 나눈 구역 가운데 고객 사례를 모아 둔 한 칸이다. 이 회사가 파는 서비스 패키지는 A·B·C 세 가지이고, 그 사례가 카드 여러 장으로 줄지어 있다.
카드 목록 위에는 필터가 하나 있다. 전체라고 적힌 상자 오른쪽에 아래 방향 꺾쇠가 붙어 있고, 누르면 전체·A·B·C가 펼쳐진다. B를 고르면 상자 글자가 B로 바뀌고 B 사례만 남는다. 이렇게 눌러야 목록이 펼쳐지는 선택 상자를 드롭다운이라고 한다. 흔히 보는 모양이고 동작도 멀쩡하다.
강의는 이것이 정답인지 오답인지 묻는다. 판단 기준은 이 섹션의 의도다. 사례는 일종의 증언이다. A·B·C 각각의 사례를 보여 줘서 방문자가 상담을 신청하고 싶게 만드는 자리다.
그런데 방문자 상당수는 이 섹션에 와서야 이 회사 서비스가 A·B·C로 나뉜다는 것을 처음 안다. 페이지 위쪽 배너, 즉 큰 홍보 이미지 칸이 A·B·C를 한 장씩 넘겨 가며 소개하더라도 넘겨 보지 않고 쭉 내려온 사람에게는 보이지 않았다. 드롭다운은 그 세 이름을 다시 상자 안에 접어 둔다. 눌러 보지 않으면 전체라는 한 단어만 보인다.
그래서 정답에 가까운 쪽은 선택지를 처음부터 밖으로 꺼내 두는 것이다. 전체·A·B·C가 나란히 보이고, 지금 무엇을 보고 있는지가 표시된다. 서비스 구분이 있다는 섹션의 의도가 누르기 전부터 전달된다.
| 모양 | 선택지가 보이는가 | 지금 무엇을 보는지 보이는가 |
|---|---|---|
| 드롭다운 | 눌러야 펼쳐진다 | 상자 안 글자 하나로만 |
| 밖으로 꺼낸 선택지 | 처음부터 나란히 보인다 | 고른 것이 눈에 띄게 표시된다 |
카드 한 장에 들어 있는 데이터
강의는 여기서 한 걸음 더 들어간다. 이 카드들에도 데이터가 숨어 있다. 사례 1번, 2번, 3번, 4번 카드는 두 방식 가운데 하나로 화면에 온다.
하나는 보여 줄 내용을 화면 코드에 직접 적어 두는 방식이다. 값을 코드에 단단히 때려 박았다고 해서 하드코딩이라고 부른다. 사례를 바꾸려면 코드를 고쳐야 한다. 다른 하나는 관리자가 입력한 값을 보여 주는 방식이다. 운영자만 들어가는 관리자 화면에서 사례를 등록하면 그 값이 데이터베이스, 즉 값을 엑셀 표처럼 쌓아 두는 곳에 들어가고, 사례 목록은 그 값을 받아 와서 그때그때 보여 준다. 상담 신청 내역을 관리자가 확인하듯 사례도 보통 이쪽이다.
받아 온 값은 어떻게 생겼을까. 카드가 여러 장이니 목록이다. 여러 값을 순서대로 담은 목록을 배열이라고 부르고, 대괄호로 열고 쉼표로 구분해 적는다. 대괄호 안에 사례 1, 2, 3, 4가 차례로 들어 있다.
카드 한 장에 필요한 값을 세어 보자. 사례 제목, 고객사, 이미지, 날짜다. 자세히 보기 버튼은 모든 카드에 똑같이 붙으니 값이 아니다. 이미지는 고정이 아니라면 값이다. 화면에 이미지를 띄우려면 그 이미지가 저장된 주소가 필요하므로 카드마다 이미지 주소가 들어간다. 이렇게 카드 한 장 몫의 값을 중괄호로 묶은 덩어리를 객체라고 한다.
그런데 이것이 전부가 아니다. B를 누르면 B 사례만 남아야 하므로, 카드마다 어느 서비스의 사례인지 알려 주는 값이 하나 더 있어야 한다. 화면에는 보이지 않는 유형 값이다. 정리하면 카드 목록의 데이터는 배열 안에 객체가 여러 개 든 모양이고, 객체마다 보이는 값 넷과 안 보이는 값 하나가 들어 있다.
[
{
title: "사례 1 제목",
customer: "고객사 1",
imageUrl: "/cases/case-1.webp",
createdAt: "2026-09-01",
type: "A" ← 화면에는 안 보인다
},
{
title: "사례 2 제목",
customer: "고객사 2",
imageUrl: "/cases/case-2.webp",
createdAt: "2026-09-08",
type: "B"
},
...
]
대괄호 [ ] = 목록(배열), 중괄호 { } = 카드 한 장(객체)지금 무엇을 보여 주는가 — 상태
데이터만으로는 화면이 끝나지 않는다. 방문자가 B를 누르면 B 사례만 보여 주는 동작이 일어나야 한다. 그러려면 화면이 지금 어떤 유형을 보여 주는 중인지를 어딘가에 기억하고 있어야 한다.
이 기억을 상태, 영어로 state라고 부른다. 눈에 보이지 않지만 화면 쪽에 붙어 있는 값이다. 엑셀로 치면 표에 쌓인 값이 데이터이고, 지금 걸어 둔 필터 조건이 상태에 가깝다. 데이터가 무엇이 있는가라면 상태는 지금 그중 무엇을 보여 주는가다.
상태 값의 모양은 두 가지로 생각해 볼 수 있다. 여러 유형을 동시에 고를 수 있게 하면 상태는 목록이다. 전체일 때는 A·B·C가 배열로 다 들어 있고, A와 C를 고른 상태면 A와 C 사례가 보이며, 셋을 다 고르면 다시 전체를 보여 준다. 앞 편 상담 신청 폼의 체크박스, 즉 앞의 선택이 남은 채로 여러 개를 고를 수 있는 칸과 구조가 같다.
반대로 B를 누르는 순간 A가 풀리고 B만 보여야 한다면, 그리고 전체도 A·B·C를 다 고른 것이 아니라 따로 떨어진 선택지 하나로 다룬다면 상태는 값 하나다. 다른 것을 고르면 앞의 선택이 풀리는 논리, 곧 라디오 버튼이다.
강의가 요구하는 사고가 이것이다. 필터를 보면서 이것이 체크박스 논리인지 라디오 버튼 논리인지를 먼저 묻는다. 그 답이 정해지면 상태의 모양이 정해지고, 상태의 모양이 정해지면 AI에게 무엇을 요청할지도 정해진다.
여러 개를 고를 수 있을 때 (체크박스 논리)
selectedTypes = ["A", "B", "C"] → 전체
selectedTypes = ["A", "C"] → A와 C 사례만
하나만 고를 때 (라디오 버튼 논리)
selectedType = "all" → 전체
selectedType = "B" → B 사례만탭은 겉모습만 다른 라디오 버튼이다
라디오 버튼 논리와 비슷하게 동작하는 익숙한 모양이 있다. 탭이다. 전체·A·B·C가 나란히 붙어 있고, 누른 것이 맨 앞으로 드러나 보이는 모양이다. 선택지를 밖으로 꺼내 두라는 앞의 정답과도 맞는다.
탭은 두 가지로 만들 수 있다. 하나는 전체 화면과 A·B·C 화면을 각각 미리 만들어 두고 누를 때마다 해당 화면으로 바꿔 끼우는 방식이다. 다른 하나는 속을 라디오 버튼과 똑같이 두는 방식이다. 상태에는 고른 유형 하나만 들고, 탭은 선택된 것을 앞으로 드러내는 연출만 맡고, 아래 카드 목록은 상태가 바뀔 때마다 새로 그려진다. 겉보기는 같아도 뒤는 다르다.
강의의 결론은 이렇다. 화면에서 보는 많은 UI, 즉 사람이 보고 누르는 화면 요소는 두 가지 데이터에 연결해서 생각하면 상당 부분 정답이 나온다. 데이터베이스에 입력되는 데이터, 그리고 상태에 들어가는 데이터다.
오늘 해볼 일은 이렇다. 자기 서비스나 자주 쓰는 앱에서 필터나 탭 하나를 골라 세 가지를 확인한다. 선택지가 누르기 전부터 보이는가, 지금 무엇을 보고 있는지 드러나는가, 하나만 골라지는가 여러 개가 골라지는가. 고칠 자리가 보이면 아래처럼 AI에게 요청한다.
남는 문제가 하나 있다. 어떤 의도에 어떤 UI 선택지가 있는지를 아는 일이다. 다음 편에서는 그 선택지들의 이름, 곧 컴포넌트 이름을 알아야 AI에게 화면을 전달할 수 있는 이유를 다룬다.
고치기 전에 두 가지를 먼저 보여 줘.
1) 사례 목록 데이터가 어떤 모양인지 (배열 안 객체의 값 이름)
2) 지금 선택된 필터를 어떤 값으로 기억하고 있는지 (상태의 이름과 모양)
그다음 사례 목록 위의 드롭다운 필터를 탭으로 바꿔 줘.
- 전체·A·B·C가 처음부터 모두 보이게 한다.
- 한 번에 하나만 선택된다(라디오 버튼 논리). 전체는 따로 하나의 선택지다.
- 지금 선택된 탭이 눈에 띄게 표시되게 한다.
- 카드 목록은 각 사례의 type 값으로 거른다.