본문으로 건너뛰기
이 페이지는 영어로 된 기계 번역을 사용하므로 오류나 불명확한 언어가 포함될 수 있습니다. 가장 정확한 정보는 영어 원문을 참조하시기 바랍니다. 잦은 업데이트로 인해 일부 콘텐츠는 원래 영어로 되어 있을 수 있습니다. Crowdin에서 이 페이지의 번역을 개선하는 데 동참하여 도움을 주세요. (Crowdin translation page, Contributing guide)

dApp용 UI 구축

이 섹션에서는 지갑 연결, 잔액 업데이트, 채굴 기능 등 디앱의 사용자 인터페이스(UI)를 구축해 보겠습니다.

메인 장면 설정 ​

1단계: 장면 폴더 만들기 ​

  • 프로젝트의 자산 폴더로 이동합니다.
  • 마우스 오른쪽 버튼을 클릭하고 폴더 만들기를 선택합니다.
  • 장면**의 이름을 지정합니다. (이미지 삽입)
  • 씬 폴더 내에서 마우스 오른쪽 버튼을 클릭하고 만들기 → 씬을 선택합니다.

  • 메시지가 표시되면 장면 파일을 저장합니다.
  • 새로 생성한 장면을 두 번 클릭하여 기본 장면으로 설정합니다.

2단계: 기본 캔버스 만들기 ​

  • 계층 구조 창에서 씬을 마우스 오른쪽 버튼으로 클릭합니다.
  • 생성 → UI 컴포넌트 → 캔버스**로 이동합니다.
  • 이름을 캔버스로 변경합니다.

3단계: Web3UI 컨테이너 만들기 ​

  • 새로 만든 캔버스를 마우스 오른쪽 버튼으로 클릭합니다.
  • 생성 → 노드 비우기**를 선택합니다.
  • Web3UI**로 이름을 변경합니다.

4단계: 기본 UI 개체 설정하기 ​

Web3UI 내에서 다음 컴포넌트를 생성합니다:

1. 지갑 연결 버튼

  • Web3UI → 생성 → UI 컴포넌트 → 버튼**을 마우스 오른쪽 버튼으로 클릭합니다.

  • 이름을 ConnectWallet으로 변경합니다.
  • 검사기 창**에서 버튼 레이블 텍스트를 지갑 연결로 설정합니다.

2. 민트 버튼

  • Web3UI → 생성 → UI 컴포넌트 → 버튼**을 마우스 오른쪽 버튼으로 클릭합니다.
  • 민트버튼**으로 이름을 변경합니다.
  • 버튼 라벨 텍스트를 민트 버튼으로 설정합니다.

3. 주소 라벨

  • Web3UI → 생성 → 2D 개체 → 레이블**을 마우스 오른쪽 버튼으로 클릭합니다.

  • 주소 라벨**로 이름을 바꿉니다.
  • 레이블 텍스트를 **연결된 주소:**로 설정합니다.

4. 잔액 라벨

  • Web3UI → 생성 → 2D 개체 → 레이블**을 마우스 오른쪽 버튼으로 클릭합니다.
  • 밸런스 라벨**로 이름을 바꿉니다.
  • 라벨 텍스트를 0.000ET로 설정합니다.

모든 컴포넌트를 추가한 후 계층 구조는 다음과 같이 보일 것입니다:


Canvas
└── Web3UI
├── ConnectWallet
├── MintButton
├── AddressLabel
├── BalanceLabel

노트

컴포넌트를 올바르게 정렬하려면 씬 상단의 정렬 도구를 사용합니다. 각 구성 요소를 클릭하고 필요에 따라 위치를 조정합니다.

페이지를 개선해 주세요