# 메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오 저자: 잡오브브라더스 (홈페이지 제작 에이전시) · 게시: 2022-06-14 · 수정: 2022-06-14 · 원문: https://job.ontoblog.com/blog/%EB%A9%94%ED%83%80%EB%B2%84%EC%8A%A4-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%AC%B8%ED%99%94%ED%94%84%EB%A0%88%EC%9E%84-%EB%B9%85%ED%85%8C%EC%9D%B4%ED%84%B0%EC%97%B0%EA%B5%AC%EC%86%8C-%EC%A0%9C%EC%9E%91-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4/ > **요약**: 웹에이전시 잡오브브라더스에서 메타버스 기반 홈페이지 ' 문화프레임 빅데이터연구소 '를 개발하게 되었습니다. ( 드래그를 통해서도 맵을 이동 할 수 있습니다. ) 로켓을 특정 영역으로 이동시킨 후, 스페이스바를 누르면 해당 페이지로 이동합니다. 반응형으로 개발하여, 테블릿PC로도 해당 기능을 이용 할 수 있도록 하였습니다. ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-1.webp) ## 문화프레임 빅데이터연구소 > 문화프레임 빅데이터 연구소를 통해 생성되는 다중언어의 이문화·다문화 텍스트 & 이미지 기반 빅데이터 정보는 다양한 부가가치를 만들어낼 수 있을 것으로 기대됨은 물론이며, 근본적으로 는 다문화·다언어 사회의 이해의 폭을 증대시킬 수 있는 이문화(異文化) 커뮤니케이션 및 다양한 교육적·연구적 활용가치를 담지하고 있습니다. 웹에이전시 잡오브브라더스에서 메타버스 기반 홈페이지 ' **문화프레임 빅데이터연구소** '를 개발하게 되었습니다. ## 홈페이지 소개 1. **메인화면** 은 지도로 이루어져 있으며, 키보드를 통해 로켓을 이동하여 맵을 확인 할 수 있습니다. ( 드래그를 통해서도 맵을 이동 할 수 있습니다. ) 로켓을 특정 영역으로 이동시킨 후, 스페이스바를 누르면 해당 페이지로 이동합니다. ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-2.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-3.webp) 반응형으로 개발하여, 테블릿PC로도 해당 기능을 이용 할 수 있도록 하였습니다. - 2. **서브페이지** 에 다양한 애니메이션 효과를 주어 홈페이지를 보다 동적으로 보일 수 있도록 하였습니다. ![css , gif를 통한 애니메이션 효과](/uploads/naver/jobofbrothers/222772484792-4.webp) ![css , gif를 통한 애니메이션 효과](/uploads/naver/jobofbrothers/222772484792-5.webp) - 3. **페이지 전환시** , 효과를 주어 사용자가 직접 이동하는 느낌을 주는 재미를 주었습니다. ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-6.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-7.webp) - 4. **캐릭터 커스텀 기능** 을 주어 , 사용자 개인의 캐릭터를 만들수 있도록 하였습니다. ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-8.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-9.webp) 헤어 , 옷 , 아이템 , 국가를 선택하여 자신만의 캐릭터를 커스텀 할 수 있습니다. - 5. **채팅기능** 을 통해 회원들간에 소통이 가능하게 하였습니다. ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-10.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-11.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-12.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-13.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-14.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-15.webp) - 1대다 채팅기능 - 1대1 채팅기능 - 이모지 사용 기능 - 채팅 자동 번역 기능 - 채팅방 배경 설정 가능 [CULTUREMINING](https://culturemining.org/) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-16.webp) ![메타버스 홈페이지 , '문화프레임 빅테이터연구소' 제작 포트폴리오](/uploads/naver/jobofbrothers/222772484792-17.webp) ## 출처·근거 - [원문: 네이버 블로그](https://blog.naver.com/jobofbrothers/222772484792) — 잡오브브라더스 (2022-06)