NAVER Blog





Jaewoong Lee   |   Kihyun Lee   |   Dabin Won








ABOUT


기록 매체의 진화에 따라 ,Vision Pro의 공간 컴퓨팅으로 이미지 · 영상 중심의 블로깅 경험을 디자인하여 ‘나만의 이야기’와 ‘나만의 공간’을 네이버 블로그에 새로 담아냈습니다.

Naver Blog is reimagined for the spatial computing era, using Vision Pro technology to enhance visual storytelling and deliver an immersive blogging experience.








BACKGROUND


기록 매체는 고대 동굴벽화에서 양피지, 음성, 사진, SNS 숏츠로 진화해왔습니다.

이에 따라 블로깅이 이미지와 영상 중심으로 발전할 것을 예상해,

비전 프로를 통해 공간컴퓨팅 시대에 적합한 새로운 디자인과 인터랙션을 탐구했습니다.


Recording media have evolved from parchment to voice, photos, and SNS shorts.

Anticipating that blogging will increasingly center on images and videos, we explored new designs and interactions optimized for the era of spatial computing through Vision Pro.








NAVER BLOG


기존 네이버 블로그의 방대한 기능과 정보를 보다 직관적으로 전달하기 위해,

Home, NaverHood, Post의 3가지 메인 카테고리로 재구성했습니다.


To streamline Naver Blog's extensive features and information, we restructured

them into three main categories: Home, NaverHood, and Post.






Interaction Plate


3가지 카테고리는 사용자가 메인 인터랙션 플레이트를 활용해

핀치 회전 제스처로 효율적으로 탐색할 수 있도록 설계하였습니다.


Three categories can be intuitively navigated using

the main interaction plate with a pinch-rotation gesture.










HOME


홈 화면에는 블로그 이름과 영상/사진 형식의 2.5D 프로필 이미지가 배치되며,

상단 배너에는 블로그 한줄 소개가 표시됩니다.

또한, 원판 위에 다양한 에셋을 배치하여 블로그의 개성에 맞게 자유롭게 꾸밀 수 있습니다.


On the home screen, the blog name and a video/photo-style 2.5D profile image are

centrally placed from the bottom, while a banner at the top displays the blog’s tagline.

Additionally, you can freely customize the blog by arranging various assets

on the circular base to reflect its unique personality.







Blog name & Banner






2.5D Profile


프로필 이미지는 Vision Pro의 공간감과 영상 매체의 발전을 반영해 2.5D로 구현하였습니다.


The profile image is designed in 2.5D,

reflecting Vision Pro's spatial depth and the evolution of visual media.














VIEW Post



Book Motif

복잡한 기존 텍스트 브랜치 구조를 보완하기 위해 카테고리를 책 형태로 시각화했습니다.


To complement the complexity of traditional text branch structures,

categories have been visualized in the form of a book.






Step I. Pick Category




책을 바라보며 핀치 제스처로 원하는 카테고리를 선택할 수 있습니다.


Users can look at the book and use a pinch gesture to select their desired category.




Step II. Pick Sub Category






책의 인덱스를 통해 중분류를 선택할 수 있습니다.


The book's index allows users to select subcategories easily.








Step III. Pick Post and View






눈으로 포스트를 쳐다보면 썸네일에 흔들림 모션이 생기며, 핀치로 원하는 글을 선택할 수 있습니다.


Gazing at a post creates a shaking motion on its thumbnail, and users can select the desired post with a pinch gesture.








4 Layout Views


이미지와 영상 중심으로 구성된 4가지 레이아웃이 있습니다.

: Default View, Spiral View, Dial View, Sphere View 입니다.


There are four layouts focused on images and videos,

which are Default View, Spiral View, Dial View and Sphere View.





I. Default View


디폴트 뷰는 포스트의 기본 형태로, 제목은 상단에, 글과 이미지, 3D 에셋은 중앙에 배치됩니다. 위치나 개수에 제한받지 않고 사용자가 가장 자유롭게 활용할 수 있는 레이아웃입니다.


The default view is the basic structure of a post, with the title at the top and text, images, and 3D assets placed in the center. It allows users to freely customize without limitations on placement or quantity.




핀치를 사용해 글과 이미지를 더 자세히 확인하고, 관련 추가 정보와 이미지를 팝업 형태로 얻을 수 있습니다.


Using a pinch gesture, users can zoom in on text and images for a closer look and access additional related information and images via pop-ups.



















II. Spiral View


Spiral View는 이미지가 나선형으로 움직이며 디스플레이되는 레이아웃입니다.

독자가 이미지와 글을 사용자의 의도에 맞게 볼 수 있어, 시간순 구성이나 특정 의도를 표현하기에 적합합니다.


Spiral View is a layout where images move and display in a spiral structure.

It allows readers to view images and text according to the user's intent, making it ideal for chronological organization or conveying specific messages.





핀치 드래그 동작으로 이미지를 위아래로 이동할 수 있으며, 핀치 제스처를 사용해 이미지를 자세히 볼 수 있습니다.


Images can be moved up and down using a pinch-drag gesture and zoomed in for a closer look with a pinch.







III. Dial View



Dial View는 이미지가 다이얼 형태로 회전하며,

순차적으로 전후 사진을 함께 보여줘 스토리텔링에 적합한 뷰입니다.


Dial View is a layout where images rotate like a dial,

displaying sequential photos together, making it ideal for storytelling.




핀치 수평 드래그 동작으로 이미지를 회전시킬 수 있으며, 핀치 제스처로 이미지를 확대해 자세히 볼 수 있습니다.


Images can be rotated with a horizontal pinch-drag gesture and zoomed in for a closer look using a pinch gesture.









VI. Sphere View


Sphere View는 네이버 블로그의 포토덤프 챌린지 형식과 유사하게 다수의 이미지를 덤프 형식으로 포스팅할 때 적합한 레이아웃입니다.


Sphere View is a layout ideal for posting a large number of images in a dump format, similar to Naver Blog's photo dump challenge style.




구를 회전시켜 간단히 이미지를 볼 수 있으며, 핀치 동작으로 구의 모든 이미지를 한 방향으로 정렬해 자세히 확인할 수 있습니다.


The sphere can be rotated for a quick view of the images, and with a pinch gesture, all images on the sphere can be aligned to face the user for a closer look.












WRITE post



포스트 뷰에서 펜 아이콘을 바라보며 핀치하면 Writing View로 전환됩니다.


In the post view, gazing at the pen icon and pinching switches to the Writing View.





4 Edit Menus


블로그의 내용을 구성하는 인풋 텍스트와 이미지, 그리고 이야기를 더욱 사실적이고 풍부하게 표현하는 3D 모델과 꾸미기,

총 4가지 메인 메뉴로 구성되어 있습니다. 오른손바닥을 뒤집는 제스처로 언제든 메뉴를 호출할 수 있습니다.


The blog is organized into four main menus: input text, images, 3D models, and decorations, all designed to make content more realistic and immersive.

The menu can be accessed anytime with a palm-up gesture using the right hand.


I. Text


공간컴퓨팅 환경에서 가상 키보드의 불편함을 고려해 기본 입력 방식을 보이스 인풋으로 설계했으며, 필요시 가상 키보드를 사용할 수 있습니다.


Recognizing the inconvenience of virtual keyboards in spatial computing, voice input has been made the default, with the option to use a virtual keyboard when necessary.




II. Image


이미지는 앨범과 연동되어 클릭 한 번으로 앨범을 불러올 수 있습니다.

왼손에 생성된 Image Plate를 통해 원하는 이미지를 담고 선별해 포스트에 활용할 수 있습니다.


Images are linked with albums, allowing seamless access with a single click.

An Image Plate on the left-hand lets users store selected images and choose the best cuts for their posts.




III.  Decorate



스티커와 3D 펜을 사용해 업로드한 이미지나 영상을 꾸밀 수 있습니다.


Uploaded images or videos can be customized using stickers and a 3D pen.





IV. 3D Asset






보이스 인풋으로 원하는 에셋 종류를 검색할 수 있습니다.

eye gaze와 핀치 동작을 사용해 모델을 선택하고, 바닥 원판 그리드에 정렬하거나 이동할 수 있습니다.


Assets can be searched using voice commands.

Models can be selected through eye-gazing and pinch gestures, then arranged or moved on the base plate grid.




평면상 위치를 선택한 후, 핀치 드래그로 Z축상의 위치를 조정할 수 있습니다.

이후 양손을 사용해 모델을 회전시킬 수 있습니다.


After selecting a position on the plane, the Z-axis position can be adjusted using a pinch-drag gesture.

The model can then be rotated using both hands.








NAVERHOOD



네이버후드는 이웃을 뜻하는 ‘neighbor’를 반영한 이름으로, 블로그를 보고 공유하는 이웃 간의 소통을 담았습니다.

하나의 행성은 하나의 동네를 의미하며, 나의 행성에는 서로이웃이, 다른 행성들은 요리, 음악, 여행 등 블로그 주제에 따라 구성됩니다.


NaverHood, inspired by the word "neighbor," represents the communication essential to sharing and viewing blogs.

Each planet symbolizes a neighborhood: my planet hosts mutual neighbors, while other planets are categorized by blog themes such as cooking, music, or travel.




















TEAM MEMBERS



NAVER Blog

Jaewoong Lee   |   Kihyun Lee   |   Dabin Won




[ Home >> ] Home >>
[ All Projects >> ] All Projects >>