📸 “개발 없이도, Retool로 로그 검증 도구를 직접 구현한 실험기”
👀 시작하며
기획자의 아이디어는 빠르게 검증되어야 한다.
하지만 “기획자 혼자선 구현이 어렵다”는 한계 때문에,
대부분은 문서나 프로토타입 단계에서 머무르는 경우가 많다.
이번엔 Retool이라는 노코드 툴을 활용해,
서버 개발이나 API 없이도 로그 비교 PoC를 직접 구현해 보는 실험을 진행했다.
사실 이 실험은 거창한 계획에서 시작된건 아니고
개발팀에서 “기능 통계 개발이 누락되었다”는 말을 N번째 듣던 중
문득 이런 생각이 들었다.
“이런 통계 로그 QA를 꼭 개발에서만 해야 할까?
기획자도 약속된 키 값으로 로그가 잘 쌓이는지
직접 테스트할 수 있지 않을까?”
🧩 Retool이란?
Retool은 노코드 플랫폼이다.
SQL, REST API, 스프레드시트 등 다양한 데이터 소스를 연결해
실제 동작하는 내부 도구(Admin, Dashboard, PoC)를 쉽게 만들 수 있다.
가장 좋았던 점은, 비개발자도 직관적으로 끌어서 만들 수 있게 다양한 UI 컴포넌트를 제공한다는 점이다.
Retool의 주요 장점
- 🧱 UI 모듈이 다양: 버튼, 입력폼, 테이블, 드롭다운, 차트 등 모두 기본 제공
- 🔗 데이터 연동이 단순: API URL만 입력해도 바로 결과 시각화 가능
- ⚙️ JS 표현식 지원: 완전한 코딩이 아닌, 필요한 로직만 간단히 삽입 가능
- ⚡ 빠른 PoC 제작: 프론트·백 구분 없이 한 화면에서 테스트 및 배포
SQL·API 구조만 이해하는 기획자라면 Retool 하나로 충분히 부가적인 환경세팅 없이 PoC를 만들어 볼 수 있다.
🎯 실험 목표
사용자가 입력한 값과 Mock API로 불러온 로그 데이터를 비교해
일치 여부를 시각적으로 보여주는 툴 만들기.
입력 필드
- user_id
- hospital_id
- event_name
- gender
- age_band
버튼
- btn_send: (추가 확장용)
- btn_fetch: 로그 조회
출력 영역
- tbl_logs: API 응답 데이터 표시
- 하단 텍스트 3종: 일치 여부 결과 표시
⚙️ 구현 과정
1️⃣ Mock API 연동
Retool에서 새 쿼리(Query) 를 생성하고,
아래처럼 Mock API를 연결했다.
GET https://mockapi.io/api/v2/endpoint.json
응답 예시
{
"id": "1",
"event_name": "caregiver_apply_completed",
"user_id": "u-001",
"hospital_id": "h-001",
"result": "success",
"correlation_id": "demo-123",
"params": {
"gender": "F",
"age_band": "30-39"
}
}이 데이터 구조를 기준으로 테이블과 비교 로직을 설계했다.
2️⃣ 테이블 구성 (tbl_logs)
데이터 소스
{{ getLogs.data }}
컬럼 매핑
| ID | {{ item.id }} |
| Event Name | {{ item.event_name }} |
| User ID | {{ item.user_id }} |
| Hospital ID | {{ item.hospital_id }} |
| Result | {{ item.result }} |
| Correlation ID | {{ item.correlation_id }} |
| Gender | {{ item.params.gender }} |
| Age Band | {{ item.params.age_band }} |
테이블이 정상적으로 데이터 바인딩되면,
조회 버튼(btn_fetch) 클릭 시 바로 Mock API 데이터가 표시된다.
3️⃣ 비교 로직 추가
테이블 아래에는 세 개의 텍스트 컴포넌트를 배치했다.
각 텍스트는 JavaScript 식으로 동작하며,
선택된 행(selectedRow)과 입력 폼의 값(input.value)을 비교한다.
✅ 이벤트 일치 확인 (txt_event_ok)
{{
(() => {
const row = tbl_logs.selectedRow?.data || tbl_logs.data?.[0];
if (!row) return "ℹ️ 선택된 로그가 없어요";
const inEvent = event_name.value;
return inEvent === row.event_name
? `✅ 이벤트 일치: ${row.event_name}`
: `⚠️ 이벤트 불일치\n입력 ▶ ${inEvent}\n로그 ▶ ${row.event_name ?? "-"}`;
})()
}}
✅ ID 일치 확인 (txt_ids_ok)
{{
(() => {
const row = tbl_logs.selectedRow?.data || tbl_logs.data?.[0];
if (!row) return "ℹ️ 선택된 로그가 없어요";
const u = user_id.value, h = hospital_id.value;
return (u === row.user_id && h === row.hospital_id)
? `✅ ID 일치: user=${row.user_id}, hospital=${row.hospital_id}`
: `⚠️ ID 불일치\n입력 ▶ user=${u}, hospital=${h}\n로그 ▶ user=${row.user_id ?? "-"}, hospital=${row.hospital_id ?? "-"}`;
})()
}}✅ 필드 일치 확인 (txt_fields_ok)
{{
(() => {
const row = tbl_logs.selectedRow?.data || tbl_logs.data?.[0];
if (!row) return "ℹ️ 선택된 로그가 없어요";
const g = gender.value, a = age_band.value;
const lg = row.params?.gender, la = row.params?.age_band;
return (g === lg && a === la)
? `✅ 필드 일치: gender=${lg}, age=${la}`
: `⚠️ 필드 불일치\n입력 ▶ gender=${g}, age=${a}\n로그 ▶ gender=${lg ?? "-"}, age=${la ?? "-"}`;
})()
}}
✅ 최종 결과
버튼 클릭 → API 호출 → 테이블 표시 → 자동 비교
결과 예시 👇
✅ 이벤트 일치: caregiver_apply_completed
✅ ID 일치: user=u-001, hospital=h-001
✅ 필드 일치: gender=F, age=30-39
테이블의 행을 클릭하면 하단 결과가 즉시 갱신된다.
입력-조회-검증의 흐름이 한 화면 안에서 완결되는 구조다.
💡 느낀 점
- Retool은 기획자에게 강력한 실험 환경이다.
개발 리소스 없이도 뚝딱뚝딱 손쉽게 만들 수 있다. - UI 구성 요소가 직관적이고 컴포넌트가 많아
HTML/CSS 지식이 없어도 완성도 높은 화면을 만들 수 있다. - 데이터 구조 파악이 빠르다: API 응답을 바로 테이블로 시각화할 수 있음
- 기획과 개발 간 커뮤니케이션 도구로도 유용
실제 동작 예시를 보여주며 “이 API는 이렇게 작동해야 한다”를 명확히 설명할 수 있다.
이번 실험은 단순히 “Retool을 써봤다”가 아니라,
기획자도 직접 작동하는 쉬운 검증 도구를 찾아서 기분이 좋았다.
물론 2주 동안만 무료라서 조금 조급하긴 한데;;
비개발자인 기획자라면 Retool 완전 추천이다.
문서나 와이어프레임이 아닌 ‘작동하는 프로토타입’을 만들어낼 수 있다.
약간의 코드가 필요하지만 그건 Chat GPT가 있으니 상관없고, 서버도 필요 없다는 것👍
'AI 바이브코딩' 카테고리의 다른 글
| AI 요약 노트 메이커 만들기 실험기 (0) | 2025.12.02 |
|---|