API 테스트와 운영 콘솔을 한곳에서

API 테스트와 운영 콘솔을 하나로. 셀렉트어드민은 API 요청을 검증하면서도 운영 데이터와 로그인 컨텍스트를 살린 화면을 제공합니다. 테스트 화면이 곧 운영 도구가 됩니다.

Hakbeom Kim

28 10월 2025 — 5 min read

운영에 바로 쓸 수 있는 API 테스트 콘솔이 필요할 때,
API를 만든 직후 호출·검증·시각화를 한곳에서 처리할 수 있다면 어떨까요?
셀렉트어드민은 프론트엔드 코드나 별도 배포 없이 이를 구현합니다.

개발자가 흔히 겪는 상황

스테이징과 운영을 오가며 토큰과 헤더를 계속 바꾼다.
테스트 화면과 운영 화면이 분리되어 팀이 같은 맥락으로 보기 어렵다.
비개발 사용자는 실수 없이 제한된 화면에서만 테스트해야 안전하다.

요청·응답 테스트는 Postman 같은 API 클라이언트로 충분히 할 수 있습니다.
하지만 팀 단위로 운영 환경에 연결된 화면을 제공하고,
비개발 사용자가 별도 설치 없이 바로 쓰게 하려면 한계가 있습니다.

Postman은 협업 워크스페이스, 웹 공유, 시각화(Visualizer)를 지원하지만,
본질은 테스트 클라이언트이며 “운영 콘솔로 배포”하는 모델은 아닙니다.

셀렉트어드민이 해결하는 방식

제약 화면 제공: 개발자(편집자)가 페이지·파라미터·권한을 미리 구성합니다.
사용자는 정해진 입력만 가능하며, 화면 밖으로 벗어날 수 없습니다.
즉시 공유: URL로 즉시 배포되어 팀과 운영이 같은 화면을 봅니다.
운영 컨텍스트 자동 주입: 로그인 사용자나 액세스 토큰 등을 자동으로 주입해
운영 환경 그대로 테스트할 수 있습니다.
요금 체계: 개발자(편집자) 단위 과금이며, 내부 일반 사용자는 좌석 비용이 없습니다.
Postman 보완: 테스트는 Postman으로, 반복 사용·운영 공유는 셀렉트어드민으로 역할을 구분합니다.

기본 예시 — 붙여서 바로 실행 가능

blocks:
  - type: http
    method: GET
    fetchFn: |
      const r = await fetch('https://api.example.com/v1/users?limit=10')
      const data = await r.json()
      return data.rows || data

배열을 return하면 자동 렌더링됩니다.

파라미터 기반 조회 — 비개발자도 안전하게 테스트

blocks:
  - type: http
    method: GET
    fetchFn: |
      const q = (name || '').trim() || 'all'
      const r = await fetch(`https://api.example.com/v1/search?name=${encodeURIComponent(q)}`)
      return await r.json()
    params:
      - key: name
        placeholder: 검색어 입력

허용된 입력만 노출되어 실수 가능성을 줄입니다.

POST + 폼 + 기본 검증

blocks:
  - type: http
    method: POST
    fetchFn: |
      if (!text || !text.trim()) {
        return { error: 'text is required' }
      }
      const r = await fetch('https://api.example.com/v1/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text })
      })
      return await r.json()
    params:
      - key: text
        label: 텍스트 입력
        format: textarea
    display: form

키발급 없이 세션 자동 주입 예시

blocks:
  - type: http
    method: POST
    fetchFn: |
      const r = await axios({
        url: `${API || 'https://api.example.com'}/v1/secure-endpoint`,
        method: 'POST',
        data: { token: SELECT_ACCESS_TOKEN }
      })
      return r.data

JWT 세션으로 로그인 컨텍스트를 활용합니다.

결과 테이블 + 상세 모달 — 테스트 화면이 곧 운영 화면

blocks:
  - type: http
    method: GET
    fetchFn: |
      return [
        { id: 1, name: 'Alpha', created_at: '2025-10-01' },
        { id: 2, name: 'Bravo', created_at: '2025-10-03' }
      ]
    columns:
      name:
        openModal: detail-:id
    modals:
      - path: detail-:id
        blocks:
          - type: http
            method: GET
            fetchFn: |
              return [{ id, detail: `detail-${id}` }]
            params:
              - key: id
                valueFromRow: id