코드 없이 나만의 영구 웹페이지를 만드세요

여러분은 항상 자신의 웹 페이지를 만들어서 인터넷에 영구적으로 게시하고 싶었지만, 코드를 쓰는 방법을 몰랐던 적이 있나요? 괜찮아요! 이 가이드에서는 코드 한 줄도 없이 처음부터 영구적인 웹 페이지를 만드는 방법을 단계별로 알려드립니다. 몇 가지 간단한 단계만 거치면 나만의 디지털 명함, 개인 블로그, 심지어 포트폴리오까지 만들어서 손쉽게 독창적인 디지털 공간을 선보일 수 있습니다!

저자: Marshal Orange

리뷰어: Kyle 출처: Content Guild - 뉴스

조판: AyamGoreng

자신의 웹사이트/dApp을 갖고 싶지만, 코드 작성 방법을 몰라서 늘 망설이시나요? 사실, 코드 없이 영구적인 웹 페이지를 만드는 일은 더 이상 프로그래머만의 전유물이 아닙니다. 기술적 배경 지식이 없더라도 이 글에서 소개하는 방법을 활용하면 정적 페이지를 직접 만들고 이를 블록체인에 영구적으로 배포한 뒤 인터넷을 통해 접근할 수 있습니다. 어서요, 10분이면 당신만을 위한 영구 웹페이지가 생길 거예요!

먼저 페이지 배포 프로세스를 살펴보겠습니다.

페이지 디자인하기

디자인을 HTML 코드로 변환

Arweave에 코드 업로드

도메인 이름을 통해 페이지에 액세스하기 위해 ArNS를 설정하세요

마지막 단계를 완료한 후에는 Arweave의 모든 게이트웨이를 통해 웹 페이지에 액세스할 수 있습니다. 이 과정은 프로그래밍 경험이 없어도 쉽게 완료할 수 있습니다~

1. 페이지 디자인하기

선호하는 선택은 드래그 앤 드롭 이미지 디자인 웹사이트를 사용하여 페이지를 디자인하는 것입니다. UI 디자인 산업은 또한 종종 Figma 또는 Canva를 사용하여 디자인을 선택합니다. PPT를 디자인하는 것처럼, 보여주고 싶은 콘텐츠를 쉽게 디자인할 수 있습니다. 페이지. 브라우저를 열기만 하면 온라인으로 디자인할 수 있으며, 기본적으로 반나절이면 시작할 수 있습니다.

이 글에서는 디자인 업계에서 가장 일반적으로 사용되는 Figma를 선택하여 페이지를 디자인합니다. 구체적인 작업 튜토리얼은 다음과 같습니다.

1. 파일 만들기: "+ 새 파일"을 클릭하여 새 파일을 만듭니다.

2. 페이지 추가: 왼쪽의 "페이지" 열에서 페이지를 관리할 수 있습니다. 기본값은 한 페이지이며, 필요에 따라 여러 페이지를 추가할 수 있습니다.

3. 디자인 시작: 도구 모음 사각형, 텍스트 상자 및 기타 요소를 사용하여 페이지 레이아웃을 구축하거나 커뮤니티 템플릿에서 직접 영감을 얻으세요.

4. 구성 요소 관리: 자주 사용되는 요소(예: 버튼이나 탐색 모음)를 구성 요소로 저장하여 쉽게 재사용할 수 있습니다.

더 많은 튜토리얼을 보려면 https://help.figma.com/을 참조하세요.

4. 구성 요소 관리: 자주 사용되는 요소(예: 버튼이나 탐색 모음)를 구성 요소로 저장하여 쉽게 재사용할 수 있습니다.

더 많은 튜토리얼을 보려면 https://help.figma.com/을 참조하세요.

Wix와 Webflow와 같은 코드 없는 웹 디자인 도구를 사용할 수도 있는데, 이 역시 사용하기 매우 쉽고 더 나은 페이지를 만들어냅니다. 이러한 도구는 사전 설정된 템플릿을 수정하여 직접 코드를 생성할 수 있습니다(유료 기능이 필요할 수 있음).

2. 디자인을 HTML 코드로 변환

Figma 페이지 디자인이 완료되면 Figma 커뮤니티(https://www.figma.com/community)에서 "Figma to HTML" 플러그인을 검색하여 디자인된 페이지를 정적 웹 페이지 코드로 변환할 수 있습니다. 플러그인은 자동으로 디자인 요소를 읽고 해당 HTML과 CSS 코드를 생성합니다.

3. Arweave에 코드 업로드

웹 페이지 코드를 내보낸 후 먼저 HTML 파일을 직접 열거나 Live Server를 사용하여 로컬에서 테스트할 수 있습니다. 정상적으로 표시되면 코드를 Arweave에 업로드합니다. Arweave는 웹 페이지 파일에 대한 프런트엔드 호스팅을 제공하므로 액세스할 수 있습니다. 웹 페이지 파일을 업로드한 후. 여기서는 PermaDAO 커뮤니티 기여자 FarMer가 만든 도구인 SiteUploaderOnArweave(https://www.rawoid.com/SiteUploaderOnArweave/)를 사용하여 클릭 한 번으로 웹 페이지를 업로드하는 것을 직접 권장합니다.

웹사이트에 전체 파일 디렉토리를 업로드하고 홈페이지에서 "인덱스로 설정"을 체크한 다음 "파일 업로드 및 매니페스트 생성"을 클릭하여 Arweave에 업로드합니다(지갑은 파일 업로드 수수료로 일부 $AR을 예약해야 함) , 따라서 파일이 크지 않으면 어떤 경우에는 0.01 AR로 충분합니다)

업로드 후, 웹페이지의 트랜잭션 해시와 업로드 후 대상 웹페이지가 표시됩니다. 하단의 SiteURL을 클릭하여 웹페이지에 액세스합니다. 그러면 영구 웹페이지가 생성됩니다!

4. 도메인 이름을 통해 페이지에 액세스하도록 ArNS를 설정합니다.

URL 형식이 "arweave.net/{hash}"인 것을 알아차렸는지 궁금합니다. 예를 들어, 여기에 업로드한 웹페이지는 https://arweave.net/ggNu6qRCrPK0dCd3WAI22lv5Yti7h9OA1MiWx8bdrXQ입니다.

4. 도메인 이름을 통해 페이지에 액세스하도록 ArNS를 설정합니다.

이러한 URL은 읽기 쉽지 않습니다. 그러면 이 해시를 기억하기 쉽고 사용하기 쉬운 도메인 이름으로 변경할 수 있을까요? 물론입니다. ArNS를 사용하면 Arweave 블록체인의 모든 해시, 주소 및 영구 웹사이트에 대해 친화적인 도메인 이름을 제공할 수 있습니다.

먼저, ArNS(https://arns.app/#/?search=)에서 원하는 도메인 이름을 등록해야 하고, Permaswap(https://www.permaswap.network/)에서 $tARIO를 구매해야 합니다. #/) 도메인 이름 기간을 "1년" 또는 "영구"로 선택하고 도메인 이름의 길이와 도메인 이름의 기간에 따라 얼마의 $tARIO를 지출할 것인지 결정합니다.

도메인 이름을 등록한 후 도메인 이름을 트랜잭션 해시에 바인딩하면 ArNS를 사용하여 웹 페이지에 액세스할 수 있습니다. 예를 들어, 제 ArNS는 marshalorange입니다. 바인딩한 후 marshalorange.arweave.net을 통해 웹 페이지에 액세스할 수 있습니다. AR.IO Gateway에 접속해서 웹 페이지에 접근할 수도 있습니다.

위의 4가지 간단한 단계를 거치면 프로그래밍 경험이 없어도 쉽게 영구적인 웹 페이지를 만들고 Arweave 블록체인에 배포할 수 있습니다. 페이지 디자인부터 코드 업로드, 그리고 친화적인 도메인 이름 연결까지, 여러분의 웹 페이지는 오직 여러분만의 영구적인 디지털 공간이 될 것입니다.

그럼 지금 시작해볼까요! 첫 번째 영구 웹 페이지를 만들고 Web3를 향한 첫 걸음을 내딛어보세요~