# Custom Previewer Tab (커스텀 프리뷰어 탭)

> Proxyman Custom Previewer Tab을 추가해 요청 또는 응답 본문을 JSON, Protobuf, HTML, MessagePack으로 보거나 Connection Log 탭을 추가하세요.

## 1. 기능 소개 {#1-whats-it}

Custom Previewer Tab을 사용하면 Request 및 Response 패널에 탭을 추가할 수 있습니다. 각 탭은 항상 한 가지 형식으로 콘텐츠를 렌더링합니다.

이 도구는 다음과 같은 경우에 유용합니다:

* Content-Type이 `application/json`이 아니더라도 BODY를 **JSON**으로 포맷
* Content-Type이 `application/x-protobuf`가 아니더라도 본문을 **Protobuf**로 포맷
* Web View에서 HTML 페이지 렌더링
* 압축된 파일(HTML, CSS, JS)을 **Beautify**로 보기 좋게 정리
* Multipart/form-data 보기
* `Content-Type`과 관계없이 선택한 형식으로 본문 포맷 시도
* MessagePack(msgpack)을 JSON으로 변환
* [Code Generator](https://proxyman.com/docs/ko/advanced-features/code-generator)로 Swift, Node, Javascript, cURL 등 코드 생성
* GraphQL 쿼리 Prettier 포맷
* DNS, TCP, TLS, HTTP 세부 정보를 확인하는 [Connection Log](https://proxyman.com/docs/ko/basic-features/connection-log)

![Request 및 Response 체크박스, Connection Log가 체크되어 있고 Add Custom Tabs 버튼이 있는 Proxyman Custom Body Previewer Tabs 창](https://proxyman.com/docs/assets/proxyman-custom-previewer-tab-window.jpg)

_Request / Response 패널의 Custom Tabs 선택하기_

> **노트:** 선택한 커스텀 탭은 Request 또는 Response 보기의 오른쪽에 추가됩니다 

## 2. 사용 방법 {#2-how-to-use-it}

Custom Previewer Tab 창을 열려면:

1. Request/Response 탭 바의 "+" 버튼을 클릭하거나 **Tools** → **Custom Previewer Tab…** 항목을 선택합니다.
2. 체크박스를 체크하거나 해제해 커스텀 탭을 표시하거나 숨깁니다.
3. 새 탭이 Request 또는 Response 패널에 나타납니다 ✅

### 2.1 Server-Sent Events 및 OpenAI 탭 {#21-server-sent-events-and-openai-tabs}

Proxyman 5.22.0 이상에서는 다음을 지원합니다:

* OpenAI 엔드포인트에서 오는 Server-Sent Events용 **SSE** 탭: 각 데이터 이벤트의 인라인 JSON을 자동으로 보기 좋게 정리
* **OpenAI** 탭: 스트리밍된 콘텐츠를 자동으로 병합해 채팅 화면의 출력과 비슷한 최종 결과 표시

### 2.2 Connection Log (연결 로그) {#22-connection-log}

* **Connection Log**는 선택한 요청의 연결 정보를 보여줍니다. DNS 조회, TCP 연결, TLS 협상, 인증서, HTTP 헤더가 포함됩니다.
* Request 탭 바에서 **+**를 클릭합니다. **Request** 아래에서 **Connection Log**를 체크하면 표시되고, 체크를 해제하면 숨겨집니다.
* 이 탭은 Request 패널의 **Summary** 옆에 나타납니다. 기본으로 켜져 있으며, Proxyman은 선택 내용을 기억합니다.
* 샘플 로그는 [HTTP/2 가이드](https://proxyman.com/docs/ko/basic-features/http2)를, 모든 항목은 [Connection Log 가이드](https://proxyman.com/docs/ko/basic-features/connection-log)를 참고하세요.

## 3. ⚡️ 고급: Scripting 도구로 커스텀 탭 만들기 {#3-️-advanced-create-a-custom-tab-with-the-scripting-tool}

* ✅ 탭에 직접 만든 데이터 표시
* 본문을 디코딩하거나 본문 일부를 직접 만든 탭에 표시하고 싶을 때 유용합니다

### 사용 방법 {#how-to-use}

1. Request/Response 탭 바의 "+" 버튼을 클릭하거나 **Tools** → **Custom Previewer Tab…** 항목을 선택합니다.
2. **Add Custom Tabs** 버튼을 클릭합니다.
3. Request 또는 Response 패널을 선택하고 탭 이름을 입력합니다.
4. "..." 버튼을 클릭해 JavaScript 코드를 표시합니다.
5. **Scripting** → **Script List…** 메뉴를 열고 새 [스크립트](https://proxyman.com/docs/ko/scripting/script)를 만든 뒤, 이 코드를 사용해 원하는 데이터를 표시합니다.

![onRequest와 onResponse에서 customPreviewerTabs 값을 설정하는 Proxyman Script Editor](https://proxyman.com/docs/assets/343035431-1a336092-5c50-4e23-afbb-9a41f9679bb9.jpg)

_데이터를 표시하는 코드 작성하기_

6. 완료

![스크립트에서 가져온 데이터로 채워진 커스텀 body 탭과 json 탭을 보여주는 Proxyman](https://proxyman.com/docs/assets/343035436-dc7e6346-9ac6-4601-b07a-8294de2c4a02.jpg)

_새 탭에 데이터 표시하기_

## 4. 예제 {#4-examples}

### JSON TreeView 강제 렌더링 {#force-render-json-treeview}

Proxyman은 더 보기 좋게 확인할 수 있도록 JSON Tree View를 지원합니다.

컬럼 헤더를 우클릭하면 컬럼을 표시하거나 숨길 수 있습니다.

### HTML 페이지 강제 렌더링 {#force-render-html-page}

Response 패널 목록에서 **HTML Webview**를 체크하면 HTML 응답을 원시 HTML 대신 웹 페이지로 렌더링합니다.

### JavaScript 파일 Beautify {#beautify-the-javascript-files}

Custom Previewer Tab 창 하단에서 **Auto beautify the minified content**를 체크합니다. 그러면 Proxyman이 압축된 HTML, CSS, JavaScript를 읽기 쉬운 형태로 정리합니다.

## 더 알아보기 {#learn-more}

* [Proxyman으로 OpenAI Server-Sent Events 디버깅하기](https://proxyman.com/posts/debug-server-sent-event-openapi-endpoint-with-proxyman)
* [HTTP 요청 및 응답의 multipart/form-data 본문 미리 보기](https://proxyman.com/posts/2021-06-24-preview-multipart-formdata)