Front-End 화면구성 및 Routing

백문이 불여일견이라고, 무슨 뜬구름 잡는 이야기를 하나 할 수 있습니다. 그래서 코딩을 시작하기 전에 먼저 어떤 DApp이 될지 살펴보려고 합니다. 특히 이번에는 DApp의 화면 구성을 살펴보겠습니다.

DApp이라고 해서 스마트 컨트랙트만 있는 게 아닙니다. 스마트 컨트랙트는 핵심적이지만 매우 간결하게 작성되어야 합니다. 나머지는 사용자에게 보여지는 웹페이지에 관한 것입니다. 그래서 이번에는 스마트 컨트랙트에 대해서 알아보기 전에 만들고자 하는 DreamChain DApp의 화면을 구성해 보겠습니다.

DApp의 주요 참여자에 대한 정의를 살펴보겠습니다.

  • 작가(author 또는 dreamer): 꿈스토리를 올리는 사람, 드리머.
  • 기부자(contributor): 특정 꿈스토리에 일정 금액을 기부한 사람
  • 다운로드자(downloader): 기부자로 꿈스토리 사용권을 구매한 사람


DApp의 일반적인 동작 흐름은 다음과 같습니다.

드리머가 꿈스토리를 업로드 -> 일반유저가 꿈스토리에 일정 금액을 기부 -> 일반유저는 기부자로 등록됨 -> 기부자는 기부한 꿈스토리의 사용권을 다운로드할 수 있는 권한 부여됨 -> 꿈스토리의 다운로드 이력을 관리 -> 기부와 다운로드로 발생한 금액을 작가가 인출

위와 같은 동작 흐름을 생각하고 아래 화면 구성을 보면 이해하는데 도움이 될 것입니다.

참고로 아직 스마트 컨트랙트를 코딩하기 전이기 때문에 화면 구성은 개발을 진행하며 변경될 수 있습니다.


Index 페이지

  • 라우팅: /
  • 사용자들이 업로드한 Dream Story 요약 List가 표시되는 화면
  • 이곳에는 각 Story의 Thumbnail(제목과 고유 주소)만 표시되고, View Story Details을 누르면 해당 내용으로 이동
  • Create a Story 버튼 클릭하면 새로운 Story 작성 페이지로 이동


Create a Story 페이지

  • 라우팅: /storeis/new
  • 드리머Dreamer가 새로운 Story를 업로드할 수 있는 Form 페이지
  • 드리머가 Story의 최소 다운로드 가격을 설정한 후 Story 생성
  • Download는 Story의 사용 권한을 다운로드하는 것을 의미함


Story Detail 페이지

  • 라우팅: /stories/0x8147 (Story마다 고유의 주소가 할당)
  • 해당 Story의 상세 내용이 표시
  • Story Balance : 해당 꿈스토리에 적립된 총액이 표시
  • Number of Votes: 기부자가 보팅한 횟수
  • Number of Downloads: 해당 Story가 다운로드된 횟수(사용 권한 다운로드 횟수)
  • Download Price: 드리머가 설정한 최소 다운로드 가격
  • 기부자는 금액을 입력하고 Contribute 버튼을 클릭하면 해당 금액 전송. Balance 증가.
  • View Downloads 버튼을 클릭하면 기존에 다운로드된 리스트 페이지로 이동
  • Request Download 버튼을 클릭하면 다운로드 요청 페이지로 이동
  • Find a Similar Story 버튼은 유사한 Story를 찾아주는 기능. 미구현. 구현 예정 없음. 

유사한 꿈스토리를 찾아 주는 기능은 구현계획에 없습니다. 이 서비스가 정말 상용화된다면 딥러닝 기술로 구현해 보고 싶은 기능 중의 하나입니다. 더불어서 구현하고 싶은 기능이 바로 Dream Sign 즉 드리머에게 꿈 내용중에 꿈임을 암시하는 것들을 알려주는 것입니다. 그러면 정말 괜찮은 서비스가 되겠죠?


다운로드된 리스트 페이지

  • 라우팅: /stories/0x8147/downloads
  • 해당 Story가 다운로드된 내역을 표시. 다운로드한 계정, 다운로드 금액 표시


신규 다운로드 요청 페이지

  • 라우팅: /stories/0x8147/request
  • 해당 Story의 최소 다운로드 금액 표시
  • 구매자는 희망하는 다운로드 금액 설정 후 Download 클릭. 최소 금액보다 커야 함.



라우팅 구성도 

라우팅 구성은 아래와 같은 구조로 만들어 볼까 합니다. 각 페이지의 흐름은 다음과 같습니다.


라우팅 구성을 보면 간단하지만은 않습니다. 각 꿈스토리마다 고유의 주소를 갖게 되는데, 이 주소들은 미리 알 수 없는 것들이라 동적 라우팅이 필요합니다. 이것도 함께 개발할 예정입니다.

위 그림에서 회색 부분은 희망사항으로 구현 예정에 없습니다. DreamChain의 개발 취지는 사용자의 Dream Story를 올리고, 자신의 Story와 유사한 Story를 찾아주는 서비스입니다. 누군가 자신과 비슷한 꿈을 꾸는 사람이 있다면 어떨까요? 그룹 꿈도 가능하다는데... 비슷한 꿈을 꾸는 사람은 어떤 관계일까요? 사실 한 존재가 여러 존재로 세분화되어 꿈을 꾸는 걸까요?

당장 구현은 어렵지만, 향후에는 가능하겠지요? 꿈 관련해서 더욱 다양한 것을 할 수 있을 거 같은 기분이 듭니다!


오늘의 실습: 꿈 일기를 써보세요. 꿈이 기억나지 않는다면, 잠에서 깬 후 몸을 움직이지 말고 꿈 내용을 기억해보세요.