블록체인은 금융, 예술, 게임, 그리고 조직 관리에 이르기까지 점점 더 많은 영역에서 혁신의 중심에 서고 있습니다. 특히, DAO(탈중앙화 자율 조직)는 블록체인의 가능성을 가장 극적으로 보여주는 사례 중 하나입니다.
WARP는 DAO(탈중앙화 자율 조직)를 구축할 수 있도록 지원하는 블록체인 기술 기반 서비스입니다. 이 프로젝트는 새로운 기술과 디자인을 접목해야 했던 도전적인 과제였지만, 학습과 협업을 통해 만족스러운 결과를 만들 수 있었습니다. 이번 글에서는 문제 정의부터 최종 개발까지 제가 고민하고 실행한 과정을 단계별로 정리해 보겠습니다.
1. 문제 정의
모든 프로젝트는 문제를 명확히 정의하는 것에서 시작합니다. 고객님께서 작성해주신 설문지를 기반으로 다음과 같은 요구사항을 확인했습니다.
- DAO 서비스를 홍보하기 위한 웹사이트 디자인
- 사용자 친화적인 대시보드 UI/UX 설계
하지만, 당시 블록체인 기술과 DAO에 대한 이해가 부족했기 때문에 먼저 학습이 필요했습니다. 조사와 학습을 통해 DAO란 중앙체제의 개입 없이 자율적으로 의사결정을 내리고 운영되는 조직이라는 점을 이해했습니다. 이를 바탕으로 WARP가 DAO를 쉽게 구축하고 관리할 수 있도록 돕는 사용자 중심의 도구를 만드는 것이 목표임을 명확히 설정했습니다.
2. 자료 조사 및 분석
디자인 방향을 정하기 위해 WARP와 비슷한 서비스를 제공하는 브랜드를 조사했습니다. 조사 과정에서 주요 브랜드의 디자인 특징은 두 가지 큰 방향으로 나뉘었습니다.
- 밝은 테마: 신뢰를 강조하는 심플하고 직관적인 디자인
- 대표 브랜드: Utopia
- 밝은 색상과 여백을 활용해 안정감을 전달
- 복잡한 개념을 간결한 구성으로 쉽게 이해할 수 있도록 디자인
- 전체적으로 사용자 친화적이고 깔끔한 이미지를 강조
- 어두운 테마: 미래지향적이고 기술력을 강조하는 디자인
- 대표 브랜드: Cosmosis
- 어두운 배경과 선명한 네온 색상을 사용해 시각적으로 강렬한 인상을 남김
- 첨단 기술과 혁신 이미지를 전달하며, 데이터 우선순위를 명확히 표현
조사한 내용을 바탕으로 고객사와 논의한 결과, WARP의 브랜딩과 디자인은 어두운 테마를 기반으로 하기로 결정했습니다. 고객사는 블록체인 기술이 가진 첨단성과 혁신성을 강조하기를 원했으며, 이를 시각적으로 강렬하게 전달하는 것이 중요하다고 판단했습니다. 특히, 어두운 배경과 네온 컬러 조합을 활용해 미래지향적인 느낌을 주는 동시에, 시각적 주목도를 높이고자 했습니다. 최종적으로 단순히 어두운 테마를 그대로 차용하는 데 그치지 않고, WARP만의 브랜드 아이덴티티를 반영한 여러 시안을 준비해보자는 방향으로 합의했습니다.
3. 브랜드 아이덴티티 디자인
기존의 WARP 로고는 서비스의 전문성을 충분히 전달하지 못하고 있었습니다. 이를 보완하기 위해 간단한 로고 리디자인 작업을 진행했습니다.
이미 많은 곳에 로고가 사용되었다면 변경하기 힘들었을테지만 실제로 아무곳에도 사용되고 있지 않아 빠르게 변경할 수 있었습니다.
- 로고 디자인: WARP의 'W'를 형상화해 공정한 연결과 기술력을 상징.
- 컬러 팔레트: 네온 블루를 메인 컬러로 설정해 미래지향적 이미지를 강화.
- 서체 선택: 지오메트리 기반 Circular 서체를 활용해 체계적인 느낌을 전달.
브랜드 일관성을 유지하기 위해 로고, 색상, 서체, 아이콘, 컴포넌트를 포함한 디자인 시스템을 구축했습니다.
4. 웹사이트와 대시보드 디자인
기획
- 사이트맵 작성: 모든 페이지와 필요 기능 정리.
- 와이어프레임 제작: 각 페이지별 정보의 우선순위 정리.
-
대시보드 디자인
대시보드는 사용자가 데이터를 직관적으로 확인할 수 있도록 설계했습니다.
두 가지 시안을 제작했으며, 최종적으로 새로운 컬러와 라운드 버튼을 활용한 시안이 선택되었습니다.
웹사이트 디자인
웹사이트는 각기 다른 특징을 가진 세 가지 시안을 제작했습니다.
- 대시보드가 강조된 형식.
- 3D 디자인으로 시각적 흥미를 유발하는 형식.
- 스크롤 애니메이션으로 사용자 참여를 유도하는 형식.
최종적으로, 전문성을 강화할 수 있는 대시보드 강조형이 선택되었습니다.
5. 개발
디자인 작업이 마무리된 후, 대시보드와 웹사이트를 개발했습니다.
- 대시보드 개발: 자바스크립트를 활용해 체계적으로 제작.
- 웹사이트 개발: Webflow 플랫폼을 활용해 구축.
개발 과정에서는 반응형 레이아웃을 통해 다양한 화면 크기를 지원하고,
브라우저에서 실제로 작동하는 모습을 점검하며 세부 디테일을 다듬었습니다.
마지막으로, 인트로 모션과 스크롤 애니메이션을 추가해 사용자 경험을 극대화했습니다.
프로젝트를 돌아보며
WARP 프로젝트는 새로운 기술과 디자인을 접목해야 했던 도전적인 과제였습니다. 블록체인과 DAO라는 생소한 개념을 이해하고, 이를 시각적으로 풀어내는 과정은 단순한 디자인 작업을 넘어선 큰 배움의 시간이었습니다.
특히, 이 프로젝트를 통해 얻은 가장 큰 교훈은 고객의 서비스를 깊이 이해해야 제대로 된 결과물을 만들 수 있다는 점입니다. 서비스의 본질을 파악하지 못한다면, 그 어떤 디자인도 고객의 목표를 성공적으로 지원할 수 없다는 것을 다시 한번 깨달았습니다.
또한, 대시보드와 웹사이트의 연계성을 설계하고, 후속 관리를 고려한 디자인 시스템을 구축하는 것이 얼마나 중요한지 몸소 느낄 수 있었습니다. 이는 단순히 현재의 프로젝트를 넘어서, 향후 유지 보수와 확장성을 위해 필수적인 요소라는 점을 확실히 이해하게 되었습니다.
마지막으로, '다음 프로젝트가 어떤 도전일지 모르니, 항상 배우는 자세로 발전해나가야 한다"는 다짐을 하게 되었습니다. 새로운 기술과 트렌드를 수용하면서 더 나은 솔루션을 제공할 준비를 갖추는 것이 디자이너로서의 역할임을 다시금 느낀 프로젝트였습니다.
