고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)

안녕하세요.

잡 오브 브라더스 는 웹개발 및 제작 시

클라이언트의 다양한 요구사항을 반영하여

퀄리티 높은 결과물을 목표로 작업하고 있는데요.

그 과정에서 다소 복잡한 기능을 직접 구현하여

출시 한 경험이 있습니다.

오늘은 고도의 개발과정을 거쳐서 탄생한

두가지 웹제작 프로젝트 사례 를 소개해드리며

고도화 과정이 들어간 웹개발은 어떻게 실현되는지

직접 확인해보시는 시간을 가져보겠습니다.

---

컬쳐마이닝 — https://culturemining.org/

고도 개발 웹제작 프로젝트 사례 첫번째로

문화프레임 빅테이터연구소 사이트입니다.

빅데이터, 인공지능(AI) 등

각종 데이터 기반의 첨단 기술을 다루는 연구소의

특징을 잘 나타낼 수 있도록 본 사이트는 크게

연구소 소개 메인페이지와

메타버스 기능이 있는 컬처마이닝 월드 페이지로

구성하였습니다.

먼저 메인화면을 보시면 맵으로 구성되어 있는데요.

기본적으로 건물을 클릭해서

해당 페이지로 이동할 수 있고

키보드 방향키 를 사용해서

로켓을 특정 건물 영역으로 이동시킨 후

스페이스바를 눌러도

해당 페이지로 이동할 수 있습니다.

태블릿PC 에서는 우주선을 드래그하여

움직일 수 있습니다.

페이지 전환시 우주 공간에서 로켓이 이동하는

애니메이션 효과로 로딩이 지루하지 않도록

제작하였으며

서브페이지 또한 css, gif 이미지를 활용한

다양한 애니메이션 효과를 적용 하여

보다 동적인 화면으로 제작하였습니다.

이렇게 다양한 동적인 요소들을 넣어서

사용자가 재미를 느낄 수 있는 인터렉션이 들어간

페이지들로 구현 하였습니다.

메인페이지 우측 하단에

'컬처마이닝 월드 입장' 을 클릭하시면

새로운 탭이 열리며 메타버스 기능을

사용할 수 있는 화면으로 이동합니다.

PC와 모바일 간 오류 및 기타 호환문제를

해결하기 위해 컨텐츠 영역은 360px로

설정하였습니다.

이름을 입력하고 join 버튼을 클릭하면

메타버스 공간이 나타나며

키보드 방향키를 이용해 내 캐릭터를

자유롭게 이동할 수 있습니다.

캐릭터를 클릭 후 프로필을 클릭하면

원하는 스타일로 직접 커스텀이 가능 하며

본인만의 개성을 살린 캐릭터로

방에 입장한 사람들과 채팅을 이어나갈 수 있습니다.

---

범트레이닝시스템 — https://drstrength.co.kr/

고도 개발 웹제작 프로젝트 사례 두번째로

닥터스트렝스 GYM 사이트입니다.

메인페이지에서 상단의 메뉴를 클릭하여

해당 페이지로 이동하실 수 있습니다.

메인페이지를 포함하여 각 페이지에서

스크롤을 사용하여 이동하면

내용과 이미지가 동적으로 구현 되도록

제작하였습니다.

페이지를 방문한 고객이 코칭페이지에서

트레이너 리스트와 스토리를 확인하고

본인에 맞는 강사를 선택한 뒤 결제 진행 후

트레이닝 시스템을 이용할 수 있습니다.

트레이너는 결제진행한 회원을

1:1로 밀착 관리할 수 있습니다.

스토어 페이지에서는 운동 관련 상품

업데이트시 직접 구매하실 수 있습니다.

---

이상으로 두가지 사례를 모두 보여드렸습니다.

잡 오브 브라더스 는 다양한 분야의 프로덕트를

근본적으로 분석하고 이해 하여

고유의 차별점 이 잘 드러날 수 있도록

기술력을 바탕으로 고도의 기능을 구현 하여

웹상에 표현할 수 있는 최적의 퍼포먼스를

제공해드리고 있습니다.

대표님께서 구상하고 계시는 청사진을

디지털공간에 어떻게 표현하면 효과 적일지

방향을 제시하며 자사의 노하우를 담아

고객과의 특별한 인터렉션 이 이루어지는

단 하나뿐인 브랜딩 홈페이지를 제작 해드리겠습니다.

웹사이트 제작, 웹개발, 웹디자인

처음부터 끝까지 ' 형제의 일처럼 ' 진행하는

잡 오브 브라더스 로 믿고 맡겨주세요.

언제든지 대표번호로 연락주시면

감사합니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →