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

저자: 잡오브브라더스 (홈페이지 제작 에이전시) · 게시: 2023-09-06 · 수정: 2023-09-06 · 원문: https://job.ontoblog.com/blog/%EA%B3%A0%EB%8F%84-%EA%B0%9C%EB%B0%9C-%EC%9B%B9%EC%A0%9C%EC%9E%91-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%AC%EB%A1%80-%EC%86%8C%EA%B0%9Cft-%EC%BB%AC%EC%B2%98%EB%A7%88%EC%9D%B4%EB%8B%9D-%EB%B2%94%ED%8A%B8%EB%A0%88%EC%9D%B4%EB%8B%9D-%EC%8B%9C%EC%8A%A4%ED%85%9C/

> **요약**: 안녕하세요. 잡 오브 브라더스 는 웹개발 및 제작 시 클라이언트의 다양한 요구사항을 반영하여 퀄리티 높은 결과물을 목표로 작업하고 있는데요. 그 과정에서 다소 복잡한 기능을 직접 구현하여 출시 한 경험이 있습니다. 오늘은 고도의 개발과정을 거쳐서 탄생한 두가지 웹제작 프로젝트 사례 를 소개해드리며 고도화 과정이 들어간 웹개발은 어떻게 실현되는지

안녕하세요.

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-1.webp)

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

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

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

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

**출시** 한 경험이 있습니다.

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

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

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

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

---

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

![클릭하시면 해당 웹페이지로 이동합니다](/uploads/naver/jobofbrothers/223203713228-2.webp)

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

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

| **컬처마이닝(Culture-Mining)** 이란,문화프레임빅데이터 연구소가독자적으로 보유하고 있는  **빅데이터 분석기술** 로이문화,다문화 텍스트&이미지 기반의빅데이터 정보들은 커뮤니케이션 및 다양한교육, 연구에 활용되면서지구촌 사회의 이해의 폭을 증대시키며나아가 부가가치 창출로 그 가치를계속해서 보여줄 예정입니다. |
|---|

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

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

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

연구소 소개 메인페이지와

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

구성하였습니다.

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-3.webp)

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

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

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

**키보드 방향키** 를 사용해서

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

스페이스바를 눌러도

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

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

움직일 수 있습니다.

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

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

제작하였으며

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-4.webp)

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

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

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

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-5.webp)

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

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

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

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-6.webp)

메인페이지 우측 하단에

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

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

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

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

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

설정하였습니다.

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

메타버스 공간이 나타나며

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

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

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

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

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

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

---

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

![클릭하시면 해당 웹페이지로 이동합니다](/uploads/naver/jobofbrothers/223203713228-7.webp)

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

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

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

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

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-8.webp)

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

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

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

제작하였습니다.

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-9.webp)

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

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

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

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

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-10.webp)

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

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

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

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

---

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

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

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

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

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

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

제공해드리고 있습니다.

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

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

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

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

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

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

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

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

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

감사합니다.

![고도 개발 웹제작 프로젝트 사례 소개(ft. 컬처마이닝, 범트레이닝 시스템)](/uploads/naver/jobofbrothers/223203713228-11.webp)

![클릭하시면 전화연결 됩니다](/uploads/naver/jobofbrothers/223203713228-12.webp)

## 출처·근거

- [원문: 네이버 블로그](https://blog.naver.com/jobofbrothers/223203713228) — 잡오브브라더스 (2023-09)