플러그인 맛집 Codex활용 웹앱 제작기 - 터치형 점수판 웹앱 제작기

Codex와 함께 시안에서 터치형 스포츠 점수판을 만들었습니다

시각 시안을 모바일 터치 UI로 구현하고, AI가 만든 초안을 사람이 실제 화면과 손가락 조작 기준으로 검증해 완성한 사례입니다.

핵심 요약

Codex가 만들어주는 시안(@Product Design)을 바탕으로 모바일용 터치형 경기 점수판을 구현(@Sites)했습니다.
Codex로 구현 초안을 만들고, 사람이 실제 viewport와 터치 조작을 검증했습니다.
화면이 만들어졌다에서 끝내지 않고, 실제로 눌러보고 여러 화면 상태를 바꿔보며 문제가 없는지 확인했습니다.

01 / Audience

🎯 이런 분들께 도움돼요

AI를 활용해 화면형 프로토타입을 만들어보고 싶은 분
시각 시안을 실제 모바일 UI로 옮겨야 하는 기획자·디자이너
AI가 만든 결과물을 어디까지 검증해야 할지 고민하는 분

02 / Before

😫 문제 상황

게임바이브코딩 대화글을 보다가 토옵이님이 보내주신 점수기록표 웹앱을 보았습니다.(https://thebull.kr/game_score/)

마침 필요한 게 생각났습니다. 사내에서 종종 탁구를 쓰는게 점수 카운트하는 게 막내의 일 이었거든요 ㅎ.

일영 ~ 이영 ~ ㅎㅎ

그래서 저에게 필요한 [모바일스포츠 점수판]을 만들고 싶었습니다.

디자인을 고민하다가 두통이와서.. Codex 스터디방에서 배운 플러그인으로 시각 시안을 만들고자 했습니다.

점수판은 보기만 좋은 화면과 실제로 경기 중 사용할 수 있는 화면을 동시에 고려해야 했습니다. 한눈에 보여야 하고, 점수를 올리는 행동은 빠르고 크게 눌러야 합니다. 반대로 실수로 점수를 내리는 일은 필요 하지만 쉽게 일어날 필요가 없어 별도의 조작으로 분리해야 합니다.

그래서 보면서 터치해 가면서 만드는 과정이 필요했습니다.

이번 작업의 목표는 시안을 모바일 화면으로 옮기는 것 + 경기 중 가장 자주 하는 행동인 점수 기록을 가장 쉽게 만들고, 선수명·세트 기록·서브 상태·최근 액션까지 한 화면에서 확인할 수 있는 모바일 점수판을 만드는 것이었습니다.

03 / Tools

🛠️ 사용한 도구(이번 주에 지식공유로 알게된 플러그인 사용!)

Codex - React 기반 UI 구현 초안 작성과 반복 수정

@Product Design - 시각 시안을 분석해 화면 구조와 디자인 방향을 구체화하는 플러그인.

@Sites - 만든 웹앱을 실행하고 프리뷰·배포 상태를 확인하는 플러그인.

Codex Desktop 내장 브라우저: 로컬 프로젝트 화면을 앱 안에서 열어 확인

모바일 프로토타입 탭: 프로젝트의 모바일 런타임과 구현된 UI가 실행된 화면을 열어 직접 확인

프로젝트 모바일 런타임: iPhone·Pixel 화면, 터치, 키보드, 안전 영역 제공

04 / Process

🔧 작업 과정

시안을 화면의 구조로 다시 읽기

먼저 Product Design 플러그인을 사용하기 앞서 시안에 대한 약간의 고민을 하려고 했으나, Product Design 플러그인을 먼저 실행했습니다.(해줘~^^)

어떤 옵션을 선택해야 할까요, 어떤 옵션을 선택해야 할까요, 어떤 옵션을 선택해야 할까요, 어떤 옵션을 선택해야 할까요, 어떤 옵션을 선택해야 할까요?

사용자 : @Product Design "스포츠 경기에서 쓰는 점수판을 모바일용 웹앱으료 구현하고 싶어"

codex : 3개의 시안과 함께, "옵션 1, 2, 3 중 어떤 것을 만들지 정하려면 몇 가지 구체적인 내용이 필요합니다. 먼저 어떤 주제나 프로젝트를 고민 중이신지 알려주세요."

codex가 제시한 시안을 확인하니, 내가 만들고자 하는 구체적인 내용이 더 떠올라 더 이야기를 할 수 있었습니다.

사용자 : 양쪽에는 선수별 점수 영역을 두고, 가운데에는 VS와 세트 기록을 배치하자. 점수를 터치해서 +1을 만드록, -1하는 감점 버튼은 별도로 분리하자.

Codex로 첫 번째 모바일 구현 만들기

원하는 시안을 선택하자 Codex가 화면 구조를 실제로 움직이는 프로토타입으로 바꿨습니다.

이 과정에서 Codex Desktop 내장 브라우저를 사용했습니다. 브라우저에서 바로 보고 모바일 프로토타입까지 확인 할 수 있었습니다. 원하는 기기를 선택하고 여러 사이즈 확인도 가능했습니다.

Codex Desktop

└─ 내장 브라우저 에서 확인

└─ Mobile Prototype탭 에서 확인

└─ 프로젝트의 MobileRuntime 위에서 모바일 프로토타입 프리뷰 테스트

첫 화면을 그대로 받아들이지 않고 QA하기

첫 구현이 나온 뒤에는 “화면이 보인다”만 확인하지 않았습니다. 실제 앱 화면의 크기, 손가락으로 누를 수 있는 영역, 긴 이름이 들어왔을 때의 레이아웃, 가로로 돌렸을 때의 런타임 상태를 차례로 확인했습니다.

가로 미리보기에서는 회전된 화면 가장자리에 런타임 키보드 레이어가 남아 점수판을 방해했습니다. 가로 전환 전에 키보드를 숨기고, 가로 상태에서는 키보드 레이어도 숨기도록 수정했습니다.

긴 선수명도 문제였습니다. 편집 입력은 유지하되 화면에 보여주는 이름은 두 줄로 제한하고, 입력 길이도 제한해 읽을 수 있는 상태를 보장했습니다.

AI가 만든 첫 결과물의 품질보다 더 중요한 것은 실제 사용 환경에서 어떤 상태가 깨지는지 찾아내고, 그 문제를 다시 AI에게 전달해 수정하는 반복 과정이었습니다.

Sites로 호스팅하고 모바일 프리뷰로 검증하기

Product Design 프로젝트에서 정리한 시안과 UI 방향을 바탕으로 모바일 점수판을 구현했습니다. 완성된 프로젝트를 Sites 플러그인에 연결해 웹앱으로 빌드했습니다. Sites가 필요한 파일과 실행 환경을 구성해 브라우저에서 열 수 있는 형태로 준비했습니다. 생성된 호스팅 프리뷰에서 모바일 화면과 주요 인터랙션을 직접 확인했습니다.

05 / After

✅ 결과

항목

Before

After

형태

모바일에서 확인할 시각 시안

실제로 눌러볼 수 있는 모바일 프로토타입

핵심 조작

점수판 구조만 제시

큰 영역 +1, 별도 버튼 -1

화면 대응

가로 시안 중심

393×852 세로 화면과 가로 미리보기 대응

상태 처리

정적 화면

점수·선수명·서브·최근 액션 갱신

검증

시각적 확인

터치 조작·경계 상태·런타임·Sites 검증

큰 점수 영역을 눌러 선수 점수 +1
색상별 -1 버튼으로 점수 감소, 0 미만 방지
선수명 편집과 긴 이름 표시
탁구·테니스 종목 전환
서브 선수와 최근 액션 표시
경기 점수 초기화 및 선수명 랜덤 재생성
세로·가로 미리보기 전환

와 같은 시각 QA를 Codex 에서 처리할 수 있었습니다.

06 / Lessons

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

시안 고민은 AI에게 위임하고 내가 만들고자 하는 것에 집중하기
웹앱 제작 시 화면 구조와 핵심 조작으로 분리해서 고민하기
실제 앱 viewport 크기와 보호해야 할 런타임 범위를 먼저 확인하기
AI가 만든 첫 결과물을 성공 화면이 아니라 계속 검증하기
문제를 반응형 기준, 색상 대비, 키보드 레이어, 긴 텍스트처럼 구체적으로 다시 전달하기

이렇게 하면 안 돼요

첫 번째 화면이 비슷해 보인다는 이유로 구현을 끝내기
브라우저 전체 화면만 보고 실제 모바일 viewport를 확인하지 않기
색상 상속이나 자동 레이아웃이 모든 조작 상태를 해결해줄 것이라고 가정하기

07 / Reuse

🌍 다른 업무에 적용한다면?

이 방식은 경기 점수판를 넘어 많은 사용에 적용 될 수 있습니다.

출석 체크, 주문 수량 조절, 재고 카운터, 현장 설문, 대시보드의 빠른 상태 변경처럼 사용자가 같은 행동을 반복하는 화면에도 적용할 수 있습니다.

핵심은 화면을 작게 만드는 것이 아니라, 가장 자주 하는 행동을 가장 넓고 명확한 조작으로 만드는 것이 핵심이라고 생각합니다.

AI에게 화면 구현을 맡기더라도 실제 사용 환경에서 깨질 수 있습니다. 따라서 도구를 활용해 같이 눌러가면서 디벨롭 할 수 있습니다.

08 / Next

🚀 앞으로의 계획

현재 프로토타입을 발전시킨다면 경기 기록 저장, 실행 취소, 세트 종료 처리, 실제 기기 터치 테스트를 추가할 수 있습니다. 여러 기기에서 같은 점수판을 공유하거나 외부 화면에 실시간으로 보여주는 기능도 다음 단계의 후보입니다.

회사 사람들에게 보여주니 디자인에 대한 피드백이 있어.. codex Product Design 플러그인 기능으로 다양한 시안을 더 뽑아보았습니다. 투표를 통해 변경하려고 합니다. ㅎㅎㅎ

한국 테니스 앱 - 한국 테니스 앱 - 한국 테니스 앱 - 한국 테니스 앱

09 / Prompt

📋 재사용 가능한 프롬프트

아래 문구는 이번 작업의 실제 대화 원문이 아니라, 비슷한 UI를 만들 때 재사용할 수 있도록 정리한 템플릿입니다.

시안을 터치 UI로 바꾸기

다음 시각 시안을 바탕으로 모바일 터치 UI를 구현해줘. 화면에서 사용자가 가장 자주 할 행동을 먼저 정하고, 주요 조작 영역은 충분히 크게 만들어줘. 시안의 색상·계층·간격은 유지하되, 실제 모바일 viewport에서 읽히고 눌리는지 기준으로 설계해줘. [시안 이미지] [사용할 런타임 제약] [핵심 조작]

구현 결과 QA하기

현재 구현을 실제 앱 viewport 기준으로 검증해줘. 기본 상태뿐 아니라 0점, 긴 텍스트, 가로 전환, 키보드 노출, 반복 터치 같은 경계 상태를 확인하고, 문제를 현상·원인·수정 방향·검증 방법으로 정리해줘. 시안과 비교했을 때 달라진 부분도 우선순위별로 알려줘.

AI는 시안을 빠르게 화면으로 옮겼지만, 실제로 쓸 수 있는 점수판을 만든 것은 손가락으로 눌러 보고, viewport를 확인하고, 실패 상태를 끝까지 검증한 과정이었습니다.

🔥<24기 AI 스터디> 얼리버드 신청하기 🔥