Web3 제품을 위한 디앱 개발: 프론트엔드, 지갑, 데이터를 한 번에 납품

디앱 개발 범위

빠른 확인: 사용자가 완료해야 할 3가지 액션을 나열해 보세요. 3개 이상의 화면이 필요하다면, 먼저 플로우를 단순화하세요.

디앱 개발은 사용 가능한 인터페이스를 블록체인 기능과 제품이 표시해야 하는 데이터에 연결합니다. 작업에는 웹 프론트엔드, 지갑 연결, 컨트랙트 상호작용 및 인덱싱 레이어가 포함될 수 있습니다. 정확한 범위는 이미 구축된 것과 사용자가 수행할 수 있어야 하는 작업에 따라 달라집니다.

기술 목록이 아닌 사용자 액션부터 시작하세요. 예를 들어, 방문자가 지갑을 연결해야 하는지, 온체인 포지션을 확인해야 하는지, 트랜잭션을 제출해야 하는지, 활동을 검토해야 하는지 지정하세요. 이를 통해 구현을 시작하기 전에 화면, 오류 상태 및 데이터 요구사항을 정의할 수 있는 기반이 팀에 제공됩니다.

유용한 첫 번째 기획 노트는 다음 질문에 답합니다:

• 어떤 사용자 그룹이 애플리케이션을 사용할 것이며, 각 그룹은 무엇을 할 수 있어야 합니까?
• 계획된 체인은 무엇이며, 컨트랙트가 이미 준비되어 있습니까?
• 인터페이스에 어떤 정보가 표시되어야 하며, 얼마나 최신 상태여야 합니까?
• 데스크톱뿐만 아니라 모바일 브라우저에서도 작동해야 합니까?

제품에 컨트랙트 로직도 필요하다면, 스마트 컨트랙트 개발과 앱 기획을 조정하세요. 더 넓은 기술 로드맵은 Web3 개발을 참조하세요. 우리는 귀하의 답변을 기능 경계, 종속성 및 승인 기준으로 전환하며, "디앱 구축"을 완전한 사양으로 취급하지 않습니다.

화면, 지갑, 데이터는 어떻게 연결되나요?

프론트엔드는 제품 액션을 제시하고, 지갑 연결은 사용자가 지원되는 체인과 상호작용할 수 있는 방법을 제공하며, 인덱싱은 선택된 블록체인 데이터를 애플리케이션이 검색하고 표시하기 쉽게 만듭니다. 이러한 부분은 하나의 사용자 여정으로 설계되어야 합니다. 명확한 화면이 혼란스러운 연결이나 데이터 상태를 보상할 수 없기 때문입니다.

프론트엔드의 경우, 주요 화면과 각 화면이 표시할 수 있는 상태(연결 해제, 연결됨, 로딩 중, 완료됨, 주의 필요)를 식별하세요. 지갑 연결의 경우, 계획된 체인과 액션을 문서화한 다음, 사용자에게 요청 승인을 요청하기 전에 인터페이스가 무엇을 설명해야 하는지 결정하세요. 인덱싱의 경우, 제품에 필요한 레코드, 해당 레코드가 기능과 어떻게 관련되는지, 인터페이스가 지연되거나 사용할 수 없는 데이터를 어떻게 처리해야 하는지 나열하세요.

실용적인 요구사항 체크리스트는 다음과 같습니다:

• 각 기본 액션을 해당 화면 및 결과 상태에 매핑하세요.
• 사용자가 계정이나 네트워크를 변경할 때 무엇이 표시되는지 지정하세요.
• 제품에 필요한 데이터 필드, 기록 및 필터를 식별하세요.
• 오류 및 불완전한 정보가 어떻게 설명되어야 하는지 합의하세요.

제품이 기존 지갑을 연결하는 대신 자체 지갑이 필요한 경우, 독립형 암호화폐 지갑 개발 계획도 수립할 수 있습니다. Web3 웹사이트 및 랜딩 개발 서비스는 대화형 애플리케이션이 아닌 마케팅 사이트가 필요할 때 더 적합합니다.

디앱 납품 내용

유용한 디앱 납품은 팀에 작동하는 구현체와 이를 검토, 운영 및 확장할 수 있는 충분한 컨텍스트를 제공합니다. 작업을 시작하기 전에, 귀하의 계획에 어떤 결과물이 적용되고 각각이 어떻게 확인될지 합의합니다. 이는 저장소나 데모를 완료의 전체 정의로 취급하는 것을 방지합니다.

브리프에 따라 납품 범위는 프론트엔드 구현, 지갑 연결 플로우, 데이터 검색 및 인덱싱 작업, 합의된 여정에 대한 테스트 커버리지, 설정 노트 및 워크스루를 포함할 수 있습니다. 프로젝트에 기존 코드베이스가 있는 경우, 액세스 권한과 현재 아키텍처에 대한 간략한 설명은 새로운 작업과 통합 또는 수정 작업을 구분하는 데 도움이 됩니다.

명확한 승인 체크리스트를 위해 다음에 합의하세요:

• 합의된 환경에서 작동해야 하는 사용자 여정.
• 포함되는 체인, 지갑 시나리오 및 데이터 보기.
• 완료된 테스트의 기준과 결과를 검토할 담당자.
• 납품되는 설정, 운영 노트 및 소스 파일.

우리는 승인 기준을 가시적인 동작에 연결합니다. 검토자는 합의된 플로우를 따르고, 예상되는 인터페이스 상태를 확인하며, 애플리케이션이 오류에 어떻게 응답하는지 확인할 수 있습니다. 빌드에 별도의 모바일 애플리케이션이 포함된 경우, 모바일 브라우저 지원과 네이티브 앱을 동일한 납품 항목으로 취급하기 전에 Web3 제품용 모바일 앱 개발과 계획을 조정하세요.

디앱 브리프 체크리스트 6가지

개발을 시작하기 전에 다음 6가지 항목을 준비하세요. 이를 통해 빌더는 정확하게 견적을 제시할 수 있고, 팀은 각 마일스톤을 명확한 기준에 따라 검토할 수 있습니다. 체크된 목록을 기록으로 보관하세요. 나중에 합의된 사항을 설명하는 가장 빠른 방법입니다.

• 컨트랙트 주소를 나열하고 ABI를 공유하세요.
• 3가지 주요 사용자 액션을 설명하세요.
• 지원할 체인과 지갑을 지정하세요.
• 화면에 표시해야 하는 데이터를 결정하세요.
• 브랜드 자산과 디자인 노트를 공유하세요.
• 납품 항목(코드, 노트 및 테스트 단계)에 합의하세요.

용어 한 줄 설명

ABI (쉽게 말해, 프론트엔드가 컨트랙트를 호출하기 위해 필요한 함수의 설명).

인덱싱은 앱이 빠르게 읽을 수 있는 형태로 온체인 데이터를 수집하는 것을 의미합니다.

브리프에서 납품까지

경험 법칙: 사용자가 현재 위치를 추측하지 않도록 모든 화면에 지갑 및 네트워크 상태를 표시하세요.

디앱은 사용자, 핵심 여정, 체인 요구사항 및 종속성이 결정을 내릴 수 있을 정도로 명확해지면 구현 단계로 넘어갑니다. MarketingExtra에서는 초기 구조화된 검토를 통해 브리프가 요청한 프론트엔드, 지갑 및 인덱싱 작업과 일치하는지 확인한 후, 팀과 함께 계획 및 검토 시점을 확정합니다.

작업 순서는 실용적입니다: 제품 플로우를 명확히 하고; 사용 가능한 컨트랙트, 체인 세부 정보 및 데이터 소스를 확인하고; 인터페이스 상태 및 승인 기준을 정의하고; 합의된 구성 요소를 구현한 다음; 결과를 검토하고 합의된 자료를 납품합니다. 컨트랙트나 외부 서비스가 여전히 변경 중인 경우, 해당 종속성을 조기에 표시하여 팀이 먼저 확정할지 또는 관련 애플리케이션 작업을 분리하여 유지할지 결정할 수 있도록 합니다.

킥오프를 생산적으로 만들기 위해 다음을 준비하세요:

• 간결한 제품 설명과 주요 사용자 액션.
• 가능한 경우 기존 디자인, 저장소, 컨트랙트 세부 정보 및 테스트 액세스.
• 체인 및 지갑 요구사항과 인터페이스에 필요한 데이터.
• 제품 결정을 해결하고 작업 플로우를 검토할 수 있는 연락 담당자.

일정은 확정된 계획, 통합 및 피드백 주기에 따라 달라지므로, 일반적인 기간을 제시하는 대신 이러한 종속성을 검토한 후에 계획합니다. 귀하는 합의된 계획, 검토를 위한 체크포인트 및 납품 기준에 부합하는 납품을 받게 됩니다.

지갑과 네트워크에 따라 달라지는 동작

일부 애플리케이션 동작은 인터페이스가 합의된 대로 구현되더라도 개발 팀의 통제 범위를 벗어납니다. 지갑 제공업체는 프롬프트나 지원되는 동작을 변경할 수 있으며, 체인의 트랜잭션 확인 또는 인덱싱 서비스의 데이터 가용성은 사용자에게 표시되는 내용에 영향을 미칠 수 있습니다. 이러한 조건은 프론트엔드 빌드로 보장할 수 없습니다. 우리는 명확한 상태를 설계하고 합의된 플로우를 테스트하지만, 타사 동작은 여전히 종속성으로 남습니다.

계획된 지갑과 네트워크를 기록하고, 테스트 환경에 대한 액세스를 준비하며, 연결 또는 데이터 요청이 실패할 때 애플리케이션이 어떻게 응답해야 하는지 합의함으로써 예상치 못한 문제를 줄이세요. 제품이 특정 인덱싱된 레코드에 의존하는 경우, 해당 레코드의 출처를 확인하고 검토 중에 팀이 이를 검증할 수 있는 방법을 합의하세요.

승인 중에는 인터페이스가 로드되는지 여부만 확인하는 것이 아니라 실제 사용자 경험을 확인하세요:

• 검토자가 진행하기 전에 요청된 지갑 액션을 이해할 수 있습니까?
• 사용자가 거절하거나 연결을 끊을 때 제품이 유용한 응답을 제공합니까?
• 로딩, 데이터 누락 및 오류 상태가 명확하고 이해할 수 있습니까?
• 팀이 표시된 정보가 합의된 소스와 일치하는지 확인할 수 있습니까?

이러한 확인은 종속성을 가시적으로 만들고 팀이 납품할 준비가 되었는지 결정할 수 있는 구체적인 기준을 제공합니다. 또한 애플리케이션 문제와 업스트림 지갑, 네트워크 또는 데이터 서비스 문제를 구분하는 데 도움이 되며, 어떤 개발자도 제어할 수 없는 동작을 약속하지 않습니다.

3가지를 보내주세요: 컨트랙트 주소와 ABI, 사용자 플로우, 지원할 지갑과 체인.

이용 방법

1. 제품 브리프 공유제품 사용 사례, 주요 사용자 액션 및 기존 디자인이나 코드를 보내주세요. 이미 알고 있는 체인, 지갑 및 데이터 요구사항을 포함하세요.
2. 계획 및 종속성 검토프론트엔드, 지갑 및 인덱싱 요구사항을 확인하고, 여전히 필요한 결정이나 액세스 권한을 식별하며, 납품 범위에 포함될 사항을 확정합니다.
3. 승인 기준 합의팀이 구현을 검토하는 데 사용할 사용자 여정, 환경 및 가시적 동작을 정의합니다.
4. 구축 및 검토팀이 합의된 계획을 구현하고 승인 기준에 따라 검토를 위해 공유하며, 결정과 피드백을 기록합니다.
5. 납품합의된 파일, 설정 정보 및 워크스루를 제공하여 팀이 다음 제품 단계를 진행할 수 있도록 합니다.