6번째 webflow 템플릿 Synex가 출시되었습니다. 깔끔한 구조와 매끄러운 인터렉션이 특징입니다. 완벽한 반응형 디자인을 지원하며 체계적인 변수 시스템으로 만들어진 figma 파일도 제공합니다.

시선을 끌고 기억에 남는 웹사이트를 만들려면 이미지와 인터랙션이 무엇보다 중요하다고 생각합니다. 그래서 Midjourney와 GSAP을 사용해 인터랙티브 슬라이더를 연습용으로 만들어봤습니다.

Midjourney 이미지 생성

작업을 시작하면서 가장 먼저 고민한 건 이미지의 톤과 스타일을 어떻게 통일할 것인가였습니다. AI 이미지 플랫폼을 둘러보다가 비비드한 일러스트 스타일이 눈에 들어왔고, Midjourney의 --sref 기능을 활용해 이 스타일을 여러 이미지에 적용해봤습니다. sref는 스타일을 참조하는 기능으로, 프롬프트만 바꿔도 결과물의 톤과 질감은 일정하게 유지됩니다. 여러 번 실험하면서 이미지 방향을 빠르게 잡을 수 있었고, 원하는 스타일이 유지되는 상태에서 다양한 테스트를 할 수 있었습니다.

GSAP으로 드래그 인터랙션 구성하기

슬라이더의 인터랙션은 GSAP으로 구성했습니다. Webflow에서 구현했고, 사용한 기능은 다음과 같습니다. 참고로 Webflow가 GSAP을 인수해서 Webflow 내부에서도 사용이 가능합니다.

• Observer로 드래그 감지 및 제어
• ticker로 무한 슬라이드 구성
• 카드 그룹 복제로 자연스러운 루프 처리

완성된 링크

이제는 정말 뭐든 쉽게 만들 수 있는 세상이 됐습니다. 그래서 더 고민하게 됩니다. 나는 무엇을 만들까?

오늘의 학습은 webflow와 spline을 사용한 두번째 클론 디자인입니다. 유튜브에서 Spline으로 제작된 멋진 비행기 디자인을 발견했습니다. 튜토리얼이 따로 제공되지 않았고, 영상 댓글에서도 튜토리얼을 요청하는 사람들이 많았습니다. 이를 참고하여 직접 클론 디자인 작업을 시작하기로 했습니다.

1. 비행기 모델 찾기

비행기 모델을 찾기 위해 Sketchfab을 활용했습니다. 무료 3D 모델 중 적합한 모델을 선택해 glb 파일 형식으로 다운로드했습니다. glb 파일은 텍스처를 별도로 불러올 필요가 없어서 작업 효율을 높이는 데 유용합니다.

2. 간단한 로고 제작

3D 작업에 들어가기 전에 간단한 로고를 제작했습니다. 컨셉은 비행 브랜드로, 이름은 "Flyer"로 정했습니다. 여기에 슬로건과 추가 정보를 더해 로고를 완성했습니다. 로고 제작 과정에서는 GPT의 도움을 받아 빠르고 효율적으로 작업을 진행했습니다.

3. Spline으로 비행기 모션 추가

다운로드한 glb 파일을 Spline에 임포트한 뒤, 재질을 조정했습니다. 블랙 메탈 느낌을 표현하기 위해 matcap 텍스처를 적용했습니다. 비행기 모션과 엔진 효과도 추가했습니다.

• 상태(State)를 하나 추가한 뒤, 비행기가 살짝 기울어진 모습을 설정했습니다.
• 무한 반복 이벤트를 적용해 비행기가 계속 나는 듯한 동적인 연출을 구현했습니다.
• 엔진 효과는 Cylinder 오브젝트에 depth 그라데이션을 적용하여 제작했습니다.

4. 배경과 디테일 작업

작업의 완성도를 높이기 위해 배경과 세부 디테일을 추가했습니다.

1. Sphere 오브젝트를 활용해 배경 이미지를 적용하고, 카메라를 Sphere 내부에 배치했습니다.
2. 주변을 돌아다니는 빛 효과는 Cloner와 Ellipse 오브젝트를 사용해 구현했습니다.

5. 카메라 세팅과 마무리

마지막으로 카메라를 추가한 뒤, 원하는 각도를 설정하며 작업을 마무리했습니다. 비행기를 화면 중앙에서 약간 대각선으로 배치하여, 움직임이 더 동적이고 생동감 있게 느껴지도록 조정했습니다.

완성된 결과물은 아래 링크에서 확인할 수 있습니다. 완성된 프로젝트 링크

이번 작업은 레퍼런스와 거의 유사하지만, 다양한 작업에 활용이 가능합니다. 예를 들어 비행기 대신 가구나 커피머신 같은 오브젝트를 활용할 수도 있습니다.

무엇보다 중요한 것은, 이러한 작업들을 개발자나 3D 모델러 없이도 수행할 수 있다는 점입니다. 앞으로도 기본적인 디자인 능력을 꾸준히 키워야겠다는 다짐으로 이번 작업을 마무리합니다.

블록체인은 금융, 예술, 게임, 그리고 조직 관리에 이르기까지 점점 더 많은 영역에서 혁신의 중심에 서고 있습니다. 특히, 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라는 생소한 개념을 이해하고, 이를 시각적으로 풀어내는 과정은 단순한 디자인 작업을 넘어선 큰 배움의 시간이었습니다.

새로운 기술과 트렌드를 수용하면서 더 나은 솔루션을 제공할 준비를 갖추는 것이 디자이너로서의 역할임을 다시금 느낀 프로젝트였습니다.

오늘의 학습은 Webflow와 Spline을 사용한 클론 디자인입니다. 저는 멋진 작품을 하나 발견하면, 무엇이 다른지, 왜 그렇게 만들었는지를 분석하며 클론 디자인을 진행합니다. 디자인하면서 조금 바꾸고 싶다 싶은 부분은 바로 수정해 보며, 최대한 재미있게 연습하고 있습니다.

참고할 사이트를 하나 골랐으니 시작해 보겠습니다. 코드로 작업하면 시간이 너무 오래 걸리기 때문에, 우선 Figma로 간단히 레이아웃을 잡아봅니다.

‍

메인 슬라이더는 Spline으로 제작합니다.

1. 요소를 하나 생성한 뒤, 클로너를 사용해 복제합니다.
2. 그런 다음, 각 요소에 hover 인터랙션을 적용하면 슬라이더가 완성됩니다.

이제 완성된 슬라이더를 Webflow로 가져갑니다. Spline에서 생성한 코드를 Webflow에 붙여넣으면 바로 3D 슬라이더가 적용됩니다.

더 부드럽고 정교한 효과를 원한다면 Three.js와 Shader를 활용하는 것이 좋습니다. 하지만 Webflow와 Spline을 사용하면, 단 몇 분 만에 이런 웹사이트를 제작할 수 있다는 큰 장점이 있습니다. 프로토타입이나 간단한 사이트에서는 고객의 만족도를 높이는 동시에, 많은 시간과 비용을 절약할 수 있습니다.

완성된 링크입니다.

오늘의 학습은 블렌더입니다. 해도해도 늘지 않는 것 같은 블렌더.. 아직도 어려운 강의를 따라하려면 하루를 꼬박 투자해야 합니다. 그래도 몇년을 하다보니 3d에 대한 두려움이 많이 사라져서 디자인의 범위도 꽤나 넓어졌습니다. 3d가 안될때는 아무래도 제약이 많이 걸리게 되더라구요. 3d를 배우니 디자인 범위와 사고가 확장되는 것이 느껴집니다. 조명, 색감, 재질, 구도 등을 모두 신경쓰는게 쉽지는 않지만 웹사이트에 3d가 들어가면서 완성도가 높아지는 그 느낌은 정말 끊을 수가 없네요.

즐겁게 오늘도 화이팅입니다.

참고로 강의는 링크에서 들을 수 있습니다.