> ## Documentation Index
> Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 개인화된 스왑 UI
> Helius AI 도구를 사용하여 Solana에서 개인화된 스왑 인터페이스 구축.
## 소개
이 가이드는 Solana에서 토큰 스왑 UI를 구축하기 위한 AI 지원 개발 흐름을 안내합니다. 주요 기능은 사용자의 가장 빈번한 거래 쌍을 보여주는 패널로, 한 번의 클릭으로 선택할 수 있게 합니다. 이를 통해 개인화된 경험을 제공합니다.
각 섹션은 사용된 정확한 프롬프트, 모델이 생성한 출력, [Helius AI 도구](/docs/ko/agents/overview) 사용 방식을 보여줍니다.
이 가이드는 다음 기술을 소개합니다:
* [Phantom](/docs/ko/agents/skills/phantom) 지갑 통합
* 견적 및 스왑을 위한 [DFlow](/docs/ko/agents/skills/dflow)
* 빠른 거래 전송을 위한 [Helius Sender](/docs/ko/sending-transactions/sender)
* 거래 분석을 위한 [Helius Enhanced Transactions](/docs/ko/enhanced-transactions/overview)
## 최종 결과
## 설정
시작하기 전에, Claude Code용 [Helius Claude Code 플러그인](/docs/ko/agents/claude-code-plugin)을 설치하십시오:
```bash theme={"system"}
claude plugin install helius @claude-plugins-official
```
또는 Claude Code 내의 Helius 마켓플레이스에서 설치하십시오:
```
/plugin marketplace add helius-labs/core-ai
/plugin install helius@helius-labs
```
이 가이드에서는 모델로 Opus 4.6을 사용합니다. 필요 시 전환하세요.
이 가이드는 데모 목적으로 제공됩니다. 대형 언어 모델(LLM) 출력은 본질적으로 무작위적이기 때문에, 이 가이드의 프롬프트를 정확히 사용하더라도 결과가 다를 수 있습니다.
## 초기 프롬프트
한 번에 전체 UI와 동작을 정의하려면 이 프롬프트를 사용하세요:
Solana용 개인화된 토큰 스왑 인터페이스를 구축하십시오.
중앙에 두 개의 토큰 선택기와 스왑 버튼이 있는 일반적인 스타일의 토큰 스왑 UI를 추가하십시오.
오른쪽에는 사용자가 직접 선택할 수 있는 토큰 쌍 목록을 표시합니다. 각 토큰의 로고를 이름과 함께 표시합니다.
목록을 계산하려면 다음을 수행하십시오: 사용자가 지갑을 연결한 후, 그들의 스왑 기록을 보고 사용한 가장 최근의 거래 쌍 10개를 추출하십시오. 스왑 빈도로 정렬합니다.
이 프롬프트는 다음을 설정합니다:
* 핵심 레이아웃(스왑 상자 + 최근 쌍 레일)
* 개인화 규칙(지갑 기록)
* 정렬 전략(최근 사용 빈도)
이 경우, 모델은 다음을 제안했습니다:
> 프로젝트를 스캐폴딩하겠습니다. Vite + React + TypeScript 앱을 Phantom 지갑 연결, Helius Sender를 통한 DFlow 스왑, Helius Wallet API에서의 스왑 이력과 함께 만들겠습니다.
이것은 합리적인 스택입니다:
* 현대적이고 타입 안전한 UI를 위한 Vite + React + TypeScript
* 지갑 연결 및 서명을 위한 Phantom
* 최적의 견적을 위한 DFlow
* 지갑 기록을 위한 Helius API
* 거래 전송을 위한 Helius Sender
모델은 Helius API 키가 포함된 `.env` 파일을 추가하라고 지시했습니다. 이를 추가한 후, `npm run dev`를 사용하여 앱을 시작했습니다.
## 누락된 최근 쌍
지갑을 연결한 후, 최근 쌍 패널에 최근 거래한 일부 거래 쌍이 누락된 것을 발견했습니다. 그래서 에이전트에게 조사해달라고 요청했습니다:
최근 스왑에도 불구하고 Bonk / SOL이 최근 쌍으로 표시되지 않습니다. 왜 그런지 확인해 줄 수 있나요?
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
이 문제를 해결하려면 에이전트가 주어진 지갑의 거래 이력을 알아야 했습니다. 우리는 지갑의 주소만 제공했기 때문에, 두 개의 [Helius MCP](/docs/ko/agents/mcp) 도구를 사용하여 정보를 직접 얻기로 결정했습니다: `getTransactionHistory` 및 `parseTransactions`.
이를 통해 버그를 빠르게 식별할 수 있었습니다:
> 코드가 실제 토큰 전송을 분석하지 않고 events.swap에만 의존합니다.
> 스왑 기록 추출을 수정하여 tokenTransfers 및 nativeTransfers를 직접 사용하겠습니다.
지갑에서의 토큰 입출금을 확인하여 거래 쌍을 감지하는 방식으로 문제를 해결했습니다.
이제 모든 거래 쌍이 앱에 표시됩니다:
## UI 개선
앱의 전반적인 디자인은 이미 좋지만, 스왑 UI의 레이아웃은 여전히 몇 가지 개선이 필요합니다:
토큰 선택 상자의 디자인을 개선하십시오:
토큰 선택기를 오른쪽에 배치합니다.
입력 필드의 너비를 유연하게 만들어 상자에 깔끔하게 맞추십시오.
에이전트는 즉시 이러한 UI 변경을 구현했습니다:
## 견적 표시
현재 스왑 UI의 토큰 양은 수동으로 설정해야 합니다. 즉, 사용자가 반환받을 토큰 수를 보지 못합니다.
최근 DFlow 견적으로 토큰 양 필드를 자동으로 채우는 것이 유용할 것입니다.
사용자가 한 토큰의 양을 입력하면, 견적을 받고 다른 토큰의 출금량을 표시하십시오.
이를 구현하기 위해 에이전트는 [DFlow](/docs/ko/agents/skills/dflow) 스킬을 사용하여 견적을 가져올 적절한 엔드포인트를 찾았습니다.
이제 스왑 UI는 동적으로 견적 출력량을 가져와 표시합니다:
## 스왑 정보 추가
스왑이 완료되면 사용자가 체인에서 검증할 수 없습니다. 이를 UI에 추가해 보겠습니다:
스왑이 성공하면 전체 거래 서명을 출력해 주세요. 또한 탐색기로 연결해 주세요.
테스트를 위해 샘플 스왑을 수행합니다:
이제 정보가 UI에 표시됩니다:
