💭 공간에 기억을 담다 by 임재도
- 발제자: Zen
- 분류: 재미
- 채택 여부: Discuss
부스트캠프 수료 이후 제가 개인적으로 진행하려고 했던 프로젝트입니다. 이야기를 하다보니, 함께하면 좋을 듯 해서 작성해보았습니다. 가급적
Three.js를 사용하지 않는 방안으로 생각해보았습니다. 그 외에도 위치기반은 다룰게 정말 많아보여서… 좀 더 본질에 집중해볼 수 있지 않을까 했기 때문입니다.
- 사용 시나리오 등을 고려 필요 PC에서는 어떻게 보여줄지에 대해서도 고민을 해봐야함
- 하나의 예시 사진입니다.
- 프로젝트명: 위치 기반 증강현실(AR) 커뮤니티 플랫폼
- 주요 기능: 사용자가 위치한 현실 공간에 맞춰, 카메라 화면 위에 2D 컴포넌트를 이용한 정보와 메시지를 표시하여 소통하는 기능을 제공
- 주요 대상: 지역 주민, 관광객, 공공 장소 이용자 등 다양한 사용자가 활용할 수 있는 플랫폼
위치 기반으로 특정 장소에서만 볼 수 있는 메시지, 추천 정보, 리뷰 등을 제공하는 증강현실 플랫폼을 구축하여, 사용자들이 현실 공간에서 정보와 경험을 공유할 수 있는 커뮤니티를 형성한다. 증강현실(AR)처럼 사용자 위치에 맞춰 정보를 표시함으로써, 공공 공간이나 관광지에서 실시간 정보 접근성을 높이고, 새로운 형태의 오프라인 커뮤니케이션을 제안한다.
현실 공간에 기반한 위치 맞춤형 증강현실 플랫폼을 통해 사용자들이 특정 장소에서 정보를 공유하고 소통할 수 있는 몰입형 커뮤니티 환경을 구축하는 것을 목표로 한다.
사용자가 위치한 현실 공간을 중심으로, 증강현실과 위치 기반 서비스를 융합한 커뮤니티 플랫폼을 구축한다. 이를 통해 길거리, 동네, 관광지 등 다양한 장소에서 사용자 간의 소통을 강화하고, 물리적 위치에 맞춰 의미 있는 정보를 제공하여 새로운 형태의 공공 소통 공간을 제공한다.
핵심 키워드 : “물리적 공간을 이용한 소통”, “위치 기반 증강현실(LBS + AR)”, “실시간 정보 제공”, “지역 커뮤니티 활성화”, “Camera”, “브라우저”
사람들은 디지털 시대에 대부분의 소통을 온라인에서 진행하게 되었고, 실제 공간에서의 상호작용이 줄어들면서 지역 커뮤니티의 연결성이 약해졌다. 이에 따라, 공공 장소에서 실시간으로 메시지를 공유하고 정보를 제공함으로써 오프라인 공간에서의 새로운 소통 가능성을 재발견하고자 한다.
모바일 기기와 AR 기술이 발전하면서 위치 기반 서비스를 통한 증강현실 플랫폼의 가능성이 더욱 커지고 있다. 기존에 게임이나 특정 앱에만 제한적으로 적용되던 AR 기술을 일상 공간의 커뮤니티 플랫폼으로 활용함으로써, 사용자가 현실과 가상의 경계를 자유롭게 넘나들며 소통할 수 있는 환경을 제공하고자 한다.
사용자가 특정 장소에 도착했을 때 필요한 정보를 즉시 제공함으로써, 기존에 단순히 인터넷 검색에 의존하던 방식에서 벗어나 현실적이고 상황에 맞는 정보를 실시간으로 얻을 수 있는 경험을 제공한다. 예를 들어, 길거리에서 추천 맛집, 길 찾기, 이벤트 안내 등을 통해 일상 속에서 실질적인 가치를 제공하고자 한다.
기존의 소셜 플랫폼들은 온라인 공간에 한정되어 있어 물리적 장소와의 연계가 미흡한 편이다. 하지만 Web3 기술과 증강현실의 발전은 현실 공간과 온라인 소통을 더욱 긴밀히 연결할 수 있는 기회를 제공한다. 이 프로젝트는 이러한 차세대 소셜 플랫폼의 가능성을 탐구하고, 이를 통해 사람들이 가상에서만이 아닌 실제 공간에서도 사회적 연결을 형성하도록 돕는 목표를 갖고 있다.
Meta, Apple, Google, Samsung, HVG 등 수 많은 기업이 증강현실 디바이스를 만들고 있다. 그러나, 이들은 모두 다른 OS 및 DevKit을 가진다. 이에 따라서, 개발자는 어느 한 하드웨어 플랫폼에 종속된 채 개발을 이어나갈 수 밖에 없으며, 소프트웨어의 생명 주기는 필연적으로 디바이스의 생명 주기에 종속된다. 또한, 하나의 소프트웨어가 다른 플랫폼에 대응되지 못하므로, 하나의 하드웨어 플랫폼에 종속되는 문제가 발생한다. 그러나, 서로 다른 하드웨어일지라도, 공통으로 지원하는 것은 브라우저이기에 이를 바탕으로 여러 플랫폼에 대응될 수 있도록 하고자 한다.
사용자가 특정 장소에 맞춘 정보를 쉽게 접근하고 활용할 수 있어, 공공 공간을 매개로 한 소통이 가능해진다. 장소에 특화된 정보를 실시간으로 얻을 수 있어, 사용자는 일상 속에서 유의미한 정보를 즉각적으로 접하게 된다.
지역 주민, 관광객, 일상 속 다양한 사용자들이 같은 공간에서 상호작용하며 새로운 관계를 형성할 수 있는 계기를 제공한다. 증강현실을 활용한 정보 교환을 통해 사용자 간 소통과 커뮤니티 의식이 강화된다.
다양한 AR 기기와 크로스 플랫폼 환경을 지원해, 다양한 디바이스에서 접근 가능하도록 구축하여 미래에도 확장 가능한 유연한 커뮤니티 환경을 마련할 수 있다. 특히 Web3 기술과 연계한 소셜 플랫폼으로 발전 가능성이 높아진다.
카메라 위에 표시되는 2D 요소를 통해 간단하면서도 직관적인 사용자 경험을 제공하며, 장소와 상황에 맞춰 즉각 반응하는 인터랙티브한 UI를 통해 몰입감을 높인다.
특정 동네나 지역의 사람들이 해당 위치에서만 볼 수 있는 메시지를 남길 수 있도록 하여, 공공 문제나 지역 소식을 공유할 수 있는 알림판 역할을 수행한다. 이를 통해 사용자들은 지역 사회와 관련된 정보를 실시간으로 확인할 수 있다.
관광지에 방문한 사용자들이 남긴 생생한 리뷰와 추천 정보를 다른 방문자들이 AR로 볼 수 있게 하여, 현장에서 바로 유용한 정보를 얻을 수 있다. 예를 들어 명소에서 추천 사진 촬영 장소나 주변의 인기 코스 등을 안내할 수 있다.
상점이나 카페와 같은 장소에서 다른 사용자들이 남긴 리뷰나 평점을 AR로 표시하고, 할인 정보나 이벤트도 해당 위치에 자동으로 띄워서 사용자가 쉽게 알 수 있도록 한다. 이를 통해 현장에서 바로 정보를 확인하고 방문 결정에 도움을 줄 수 있다.
특정 거리나 광장에서 진행되는 이벤트를 알림 메시지로 표시하여, 해당 위치에 있는 사용자들이 이벤트 정보를 바로 확인하고 참여할 수 있게 한다. 지나가는 사람들이 이벤트를 놓치지 않도록 하여 현장 참여를 유도할 수 있다.
- 사용자가 특정 위치에 도달하면 해당 위치에 저장된 메시지나 정보를 화면에 표시한다.
- 예를 들어, 특정 동네에서만 볼 수 있는 공지나 이벤트, 특정 상점에서 제공하는 할인 정보 등이 위치에 따라 자동으로 활성화된다.
- 사용자가 카메라를 켜면 현실 화면 위에 메시지나 정보가 겹쳐 보이도록 표시한다.
- 증강현실처럼 정보를 실제 공간에 고정하는 것은 아니지만, 카메라 위에 정보가 나타나 AR 스타일의 경험을 제공한다.
- GPS를 통해 사용자의 현재 위치를 실시간으로 확인하며, 사용자 위치에 맞는 정보만 필터링해 제공한다.
- 사용자가 특정 장소를 벗어나면 정보가 사라지고, 새로운 장소에 도착하면 해당 위치에 맞춘 새로운 정보가 표시된다.
- 사용자가 특정 위치에 메시지를 남기면, 해당 위치에 도달한 다른 사용자들이 이 메시지를 확인할 수 있다.
- 관광지에서는 추천 장소에 대한 평가나 팁을, 상점에서는 다른 고객들의 리뷰를 남길 수 있다.
- Mock Service Worker(MSW)를 활용해 가상의 서버 요청을 처리하며, 사용자의 위치나 시간에 따라 달라지는 메시지를 즉각적으로 불러온다.
- 예를 들어, 특정 이벤트가 있을 때만 표시되는 메시지나 특정 시간에만 볼 수 있는 정보 같은 동적 데이터를 포함한다.
의외로
Three.js와 같은3D기술은 쓰지 않아도 될 것 같습니다.
- React: 컴포넌트 기반 UI 개발을 위한 라이브러리로, 동적 상태 관리 및 렌더링 최적화에 강점을 가진다.
- TypeScript: 정적 타입을 통한 코드 안정성 확보와 유지보수성 강화.
- HTML5 Canvas 및 CSS 트랜스폼: 2D 컴포넌트의 위치 기반 UI 구현과 효과적 렌더링.
- Geolocation API: 사용자 위치 기반으로 데이터를 제공하는 서비스의 핵심으로, 위치 정보를 실시간으로 제공.
- MSW (Mock Service Worker): 백엔드 없는 환경에서 API 모킹을 통한 데이터 요청/응답 시뮬레이션.
- React Query 또는 Zustand: 위치 기반 데이터 상태 관리와 비동기 데이터 처리 최적화를 위한 도구로, 실시간 데이터 흐름 관리에 용이하다.
- TailwindCSS: CSS의 속성들을 원자 단위로 분해해서 구현한 CSS Utility로, 별도의 클래스 명을 신경쓸 필요 없이 빠른 개발이 가능해진다.
- Shadcn:
Headless UI에 기반한 React Component Utility로, css를 제외한 기본 동적 기능을 제공하여 빠른 개발이 가능하게 한다.
- Vite: 빠른 번들링과 개발 서버 제공으로 효율적인 개발 환경을 구성.
- Vitest & Storybook & React Testing Library: 컴포넌트와 상태의 유닛 테스트 및 비동기 데이터 처리 테스트를 통해 코드의 신뢰성을 확보한다.
- Supabase || Firbase: 빠르게 백앤드 개발을 할 수 있게 도와주는 SaaS
- 성장 포인트: 2D 요소를 화면 위에 자유롭게 표시하기 위해 HTML5 Canvas API나 SVG (Scalable Vector Graphics)를 활용하는 스킬이 발전하게 된다고 볼 수 있다. 특히 Canvas는 고성능으로 여러 요소를 렌더링할 수 있어, 애니메이션이나 위치 기반 요소를 자연스럽게 표현하는 데 유용하다.
- 예상 학습 내용: 좌표 체계 이해, 드로잉 API, 애니메이션 효과 구현, 캔버스 렌더링 최적화
- 기대 효과: 증강현실 환경에서 2D UI를 배치하거나 애니메이션 효과를 줄 때 유연하고 최적화된 화면 구성을 구현할 수 있다.
- 성장 포인트: 카메라의 위치나 각도에 맞춰 2D 요소를 증강현실처럼 보여주기 위해 CSS 트랜스폼(Transform), 트랜지션(Transition), 애니메이션(Animation)에 능숙해질 수 있다. 이 과정에서 화면의 회전, 확대, 축소 효과 등을 자연스럽게 적용하는 경험을 쌓게 된다.
-
예상 학습 내용:
transform속성(translate,rotate,scale등),perspective와backface-visibility활용법, 애니메이션 최적화 - 기대 효과: 카메라가 향하는 위치에 따라 UI 요소가 마치 실제 공간에 고정된 듯 보이게 하여 몰입감을 높이고, 사용자의 동작에 실시간으로 반응하는 효과를 최적화할 수 있다.
- 성장 포인트: 사용자의 위치나 화면의 중앙 좌표를 기준으로 정보나 UI 요소를 배치하는 기술을 익히게 된다. 이를 위해 Geolocation API를 활용해 위치 데이터를 받고, 사용자와 위치 간의 거리나 각도를 계산하여 화면에 정확히 표시하는 능력이 강화된다.
- 예상 학습 내용: 위치 좌표 계산, 삼각법 활용(거리, 각도 계산), Geolocation API와 컴포넌트 렌더링 연동
- 기대 효과: GPS 정보를 활용하여 특정 위치에서만 볼 수 있는 UI 요소나 메시지를 구현할 수 있으며, 카메라 시점과 실제 좌표를 연동하여 몰입도 있는 UI를 제공할 수 있다.
- 성장 포인트: 3D 렌더링 프레임워크 대신 2D 컴포넌트로 AR 경험을 구현하기 때문에 성능 최적화에 집중할 기회가 많다. 특히 모바일 환경에서 높은 프레임 속도를 유지하기 위한 이미지 최적화, 메모리 관리, 오프스크린 렌더링 등의 최적화 경험을 쌓게 된다.
-
예상 학습 내용: 이미지와 SVG의 적재 방식, 최소한의 재렌더링으로 애니메이션 구현,
requestAnimationFrame최적화, 오프스크린 캔버스를 활용한 효율적 렌더링 - 기대 효과: 다양한 모바일 기기에서 성능을 유지하면서도 매끄러운 증강현실 효과를 구현할 수 있는 노하우를 기를 수 있다.
- 성장 포인트: JavaScript로 위치와 상태를 실시간 제어하는 능력이 발전한다. 예를 들어 사용자가 특정 지점에 도달했을 때 UI 요소를 표시하거나, 움직임에 따라 위치가 자동으로 업데이트되는 로직을 작성하는 기술을 익힐 수 있다.
- 예상 학습 내용: 이벤트 기반 렌더링, 컴포넌트 상태 관리, UI 위치 및 상태의 실시간 동기화
- 기대 효과: 사용자의 움직임이나 위치에 따라 유연하게 반응하는 인터랙티브한 UI를 구현할 수 있으며, 특히 반응형 컴포넌트의 생성과 업데이트가 효율적으로 이루어질 수 있다.
- 성장 포인트: 위치 기반 서비스의 특성상 사용자의 위치가 변경될 때마다 UI를 업데이트해야 하므로, 상태 업데이트와 렌더링 최적화에 대한 이해를 심화하게 된다. 특히, 불필요한 렌더링을 방지하고, 데이터가 변경될 때마다 필요한 컴포넌트만 렌더링되도록 최적화할 수 있다.
-
예상 학습 내용:
- React의
memo,useCallback,useMemo와 같은 최적화 훅을 활용해 불필요한 리렌더링을 방지하는 방법. -
Intersection Observer와 같은 API를 사용해, 특정 위치에 도달했을 때만 콘텐츠를 렌더링하는 방법. - 성능 분석 툴을 사용해 렌더링 성능을 모니터링하고 최적화하는 방법.
- React의
- 기대 효과: 위치 기반 콘텐츠와 UI를 자연스럽게 표시하면서도 성능을 최적화하여, 사용자 경험을 향상시킬 수 있다.
- 성장 포인트: React 컴포넌트 구조와 상태 관리에 대해 심도 있게 이해하게 되며, 컴포넌트를 유연하게 설계하고 상태와 데이터를 관리하는 능력을 키울 수 있다. 위치 기반 데이터를 다루는 과정에서, 사용자 위치와 화면상의 데이터 표시 간의 동기화를 효율적으로 설계하게 된다.
-
예상 학습 내용:
- Context API나
React Query,Zustand와 같은 상태 관리 도구를 사용해 위치 기반 데이터의 상태를 효율적으로 관리하는 방법. - 컴포넌트를 Atomic Design과 같은 패턴으로 구성하여 유지보수성을 높이고, 데이터 흐름을 구조화하는 방법.
- Context API나
- 기대 효과: 실시간 위치 변경에 따라 UI를 업데이트하고 컴포넌트가 효율적으로 렌더링될 수 있는 구조를 설계할 수 있게 되며, 관리와 확장이 용이한 컴포넌트 아키텍처를 구축할 수 있다.
- 성장 포인트: 실제 백엔드가 없는 상태에서 MSW를 이용해 API 요청을 모킹함으로써, 비동기 데이터를 다루고 처리하는 경험을 쌓을 수 있다. 이를 통해 서버와의 상호작용이 없는 개발 환경에서도 실제 백엔드 환경과 유사한 작업을 수행할 수 있게 된다.
-
예상 학습 내용:
- MSW를 사용하여 가상 API를 구축하고, 클라이언트 요청에 따라 Mock 데이터를 반환하는 방법.
- 요청에 따른 다양한 상태(로딩, 에러, 성공 등)를 관리하여 사용자의 위치에 따라 다른 데이터를 제공하는 방법.
- 모킹 데이터와 함께
useEffect나React Query를 활용해 비동기 요청을 처리하고, 이를 화면에 렌더링하는 방법.
- 기대 효과: 비동기 데이터 처리를 이해하게 되며, 실제 API와 유사한 흐름을 테스트할 수 있어 개발 과정에서의 안정성이 향상된다. 백엔드가 없는 환경에서도 완성도 높은 기능 개발과 상태 관리가 가능해진다.
3D를 쓰지 않더라도 2D로 증강현실 느낌을 살리기 위한 위와 같은 기술들은 다양한 프론트엔드 프로젝트에서 활용도가 높고, UI/UX 최적화 능력을 키우는 데 큰 도움이 된다.
어디까지나 예상 구현 일정입니다.
| 주차 | 단계 | 세부 내용 |
|---|---|---|
| 1주차 | 기획/설계 | - 프로젝트 기획 확정 및 요구 사항 정의 - 기술 스택 및 구현 방식 논의 - UI/UX 설계 및 화면 레이아웃 초안 작성 |
| 2주차 | 설계/개발 환경 | - 위치 기반 기능 설계 및 Geolocation API 테스트 - MSW(Mock Service Worker) 설정 및 모킹 데이터 작성 - 초기 React 프로젝트 설정 및 주요 디렉토리 구조 구성 |
| 3주차 | 개발 | - 위치 기반 데이터 처리 및 필터링 구현 - Canvas 및 CSS Transform을 활용한 2D UI 오버레이 구현 - 사용자의 위치 변화에 따라 데이터와 UI가 연동되는 구조 구현 |
| 4주차 | 개발 | - MSW와 연동한 비동기 데이터 처리 및 위치 기반 콘텐츠 로딩 - 반응형 디자인 및 모바일 최적화 - 상태 관리 및 성능 최적화 (React Query 또는 Zustand 활용) |
| 5주차 | 테스트/개선 | - 위치 기반 기능 및 UI 전반에 대한 통합 테스트 - Mock 데이터로 다양한 시나리오 시뮬레이션 - 성능 최적화 및 디바이스별 테스트를 통한 UI/UX 개선 |
| 6주차 | 마무리 및 피드백 | - 최종 디버깅 및 리팩토링 - 사용자 피드백 수집 및 UX 개선 - 배포 및 발표 자료 준비 |