Codex로 검색 UI 만들기

검색 UI는 어디서 활용될까요? 연락드릴 고객을 관리하는 화면부터 문의 고객의 주문 정보를 찾고 대응하는 시스템, 등록된 상품들을 필터링해서 찾아보는 화면 등 다양한 곳에서 볼 수 있습니다.

AI의 발전으로 이러한 UI를 생성하기가 쉬워졌습니다. 동시에 AI의 특성을 이해하면 더 효율적으로 좋은 결과물을 만들 수 있습니다.

가볍게 요청하기

AI는 어떤 요청이든 답변을 주기 때문에 보통 우리는 가볍게 요청하게 됩니다.

로컬(내 컴퓨터) 환경에서 많은 사람들이 테스트해보기 쉬운 코덱스(Codex)로 진행해보겠습니다.

검색 UI 만들어줘

그럴듯한 결과물이 나왔습니다. 하지만 동작하지 않는 부분들도 많고, 임의로 생성된 내용이 많습니다.

구체적인 내용을 담아서 요청하기

이번에는 좀더 구체적인 목적을 담아보겠습니다.

고객 검색 UI를 만들어줘. 이름, 전화번호 검색이 가능하고 VIP, 휴면고객 등 필터를 걸어둘 수 있어야해. 

요구한 내용이 어느정도 담겼고, 맥락을 반영해 화면이 채워졌습니다.

하지만 검색 UI는 다양한 방식들이 있기 때문에 만약 원하는 방향이 있다면 AI에게 더 많은 정보가 필요합니다.

이미지와 함께 요청하기

이번에는 검색에 좀더 집중해 참고 이미지를 던져주고 만들어보겠습니다.

해당 이미지와 같은 검색 UI를 만들어줘

꽤 비슷한 결과가 나왔지만 동작하지 않는 부분(화살표 키로 탐색하기, 인기 주식 선택하기)들이 많았습니다. AI가 하나의 이미지만 보고 해당 검색 UI가 어떻게 동작하는지 알기 어려운 부분들이 있기 때문입니다.

ChatGPT가 설명한 이미지 내용과 요청하기

이번에는 ChatGPT(이하 GPT)에게 이미지를 설명해달라고 하여 나온 내용을 갖고 Codex에게 전달해 만들어달라고 해보겠습니다.

화살표 위아래 키로 탐색, 인기 주식 선택하기 같이 안되던 동작이 잘 됩니다.

문제는 GPT가 만든 설명이 구성이나 예시 모두 불필요하게 길었다는 겁니다. 사람이 설명을 읽고 이해하고 확인, 수정하는것이 어려웠습니다.

직접 요구사항 작성하고 요청하기

때문에 직접 토스증권의 검색 UI에 대해 간결하게 작성해보았습니다.

검색 UI 만들기
- 검색창을 클릭하면 아래로 영역이 확장되게
- 확장 영역 안에 최근 검색, 인기 주식, 지금 뜨는 산업, 버튼 순으로 표시
- 버튼은 왼쪽부터 종목으로 이동하기(Enter), 지우기(ESC), 탐색하기(위아래 화살표 키)
- 검색어 입력하면 전체, 종목, 카테고리, 뉴스, 지수 탭 표시
- 검색어 입력된 상태 화면에서 탭 아래 왼쪽은 종목, 오른쪽은 해당 종목에 대한 간략한 설명. 종목에 마우스 올렸을때 표기
- 검색어 입력된 상태 화면 아래에는 해당 검색어 관련 뉴스 표시

그리고 해당 요구사항만 Codex에게 전달했습니다.

전체적으로 유사하게 나왔으나, 요구사항에 최근 검색어 삭제(x 아이콘) 설명이 없어서 기능에서 빠졌고 최근 검색, 인기 주식에서 탐색(위아래 화살표)이 안되었습니다.

추가로 요구사항과 이미지를 함께 전달하는 방법도 테스트해보았습니다.

이미지와 굉장히 유사하게 나왔지만, 여전히 검색어 입력 전에는 화살표 키로 탐색하기가 안되었고 검색어에 부합하지 않는데도 종목 결과가 나오고 있었습니다.

이미지를 보고 추측해서 반영하기보다 요구사항 내용이 더 우선되는것으로 보입니다.

수정은 어떻게 해야할까요?

기존 대화를 이어서 수정 요청하거나 프롬프트를 바꿔서 새로 진행할 수 있습니다.

먼저 기존 대화에서 아래 문장을 사용해 해결해보겠습니다.

- 검색어 입력 전에도 화살표 키(탐색)로 최근 검색 항목, 인기 주식 항목 선택할 수 있게
- 최근 검색 항목은 엔터시 검색어 입력 
- 인기 주식 항목은 엔터시 종목 페이지로 이동. 검색창 닫힘
- 검색어에 부합하지 않으면 결과가 나오지 않아야함
- 종목 선택후 엔터시 종목 페이지로 이동. 검색창 닫힘

잘 되지만 최근 검색어 클릭과 삭제가 안됩니다.

또는 기존 프롬프트를 고치고 새로 시도해볼 수도 있습니다.

검색 UI 만들기
- 검색창을 클릭하면 아래로 영역이 확장되게
- 확장 영역 안에 최근 검색, 인기 주식, 지금 뜨는 산업, 버튼 순으로 표시
- 버튼은 왼쪽부터 종목으로 이동하기(Enter), 지우기(ESC), 탐색하기(위아래 화살표 키)
- 키보드 위아래 화살표 키로 최근 검색, 인기 주식 선택 가능. 
- 최근 검색은 선택후 엔터시 검색어 반영
- 인기 주식은 선택후 엔터시 종목 페이지로 이동
- 검색어 입력하면 전체, 종목, 카테고리, 뉴스, 지수 탭 표시
- 검색어 입력된 상태 화면에서 탭 아래 왼쪽은 종목, 오른쪽은 해당 종목에 대한 간략한 설명. 종목에 마우스 올렸을때 표기
- 나머지 탭에 어울리는 내용 추가
- 검색어 입력된 상태 화면 아래에는 해당 검색어 관련 뉴스 표시
- 검색어에 부합하지 않으면 결과가 나오지 않게
- 종목 선택후 엔터시 종목 페이지로 이동. 검색창 닫힘

전체적으로 잘 되지만 최근 검색어 삭제가 안됩니다.

두 방식 모두 특정 요소에 대해 언급하면 이미지에 유추 가능한 부분이 있어도 임의로 기능 추가를 하지 않는것으로 보입니다.

다만 처음 생성할때 사용하는 프롬프트를 계속 관리, 개선하는 편이 재사용하기 용이합니다.

배울 수 있는 점

이번 시도를 통해 아래와 같은것들을 배울 수 있습니다.

GPT나 Codex에게 적당히 맡겨도 어느정도 만들어지지만 결국 문제 없이 돌아가게 하기 위해서는 세부사항을 모두 알고 있어야한다.

AI는 이미지 속에 숨은 의미, 맥락을 놓칠수 있고 요청자가 직접 정리하더라도 AI에게 전달해야할 정보를 놓칠 수 있다.

GPT에게 정리를 요청하면 원하는대로 결과가 나오지 않을 수 있기 때문에, 요구사항 내용은 작성자가 직접 파악하고 직접 수정하기 쉬워야한다.

처음에 만들고 이어서 Codex에게 수정 요청하더라도 한번에 고쳐지지 않을 수 있다.

높은 수준의 검색 UI를 만들기 위해서는 디테일이 많다.

테스트할 때 팁

이러한 테스트를 Codex 프로젝트 안에서 진행하는 경우 기존 파일을 참고하고 수정하려고 하기 때문에 만약 새로 만들어야하는 경우 매번 언급을 해줘야하는 불편함이 있었습니다.

아울러 빌드, 로컬 호스트 등의 과정을 거쳐서 앱을 확인하려고 하는 경우가 많기 때문에 이 또한 화면을 빠르게 만들어보기 어렵게 하였습니다.

이 때 아래와 같이 AGENTS.md 파일을 프로젝트 안에 추가해두면, 프롬프트 테스트와 개선을 좀더 빨리 할 수 있게 됩니다.

# AGENTS.md

- HTML, Tailwind CSS, Vanilla JavaScript만 사용한다.
- 필요 시 `window` 객체를 사용한다.
- localhost 실행 테스트를 전제로 하지 않는다.
- 사용자가 조작 가능한 UI 요소는 상호작용 가능해야 한다.
- 페이지에 제목은 없어야한다.
- 기본적으로 하나의 독립적인 `index.html` 파일을 사용한다.
- 구현 규모가 커질 경우 여러 HTML 파일과 `app.js`를 사용할 수 있다.
- 새로운 구현, 프로토타입, 실험을 시작할 때만 현재 시각 기준 `HHmmss` 폴더를 생성한다.
- 처음 html 파일을 생성할때 스타일은 미니멀하게 적용한다.
- 사용자가 기존 폴더나 파일의 수정을 요청한 경우에는 새 폴더를 만들지 않고 해당 위치에서 작업한다.
- AGENTS.md와 수정 대상 파일 외에는 읽거나 참고하지 않는다.

위 AGENTS.md는 테스트 과정에서 반복되는 불편함을 줄이기 위해 문장을 하나씩 추가하였습니다. 예제로 참고하시고 본인의 환경에 알맞게 작성하여 사용하시길 권장합니다.

실험은 ChatGPT 5.5 와 추론(Reasoning) Low 환경에서 진행하였습니다.