NEO: PaletteⓇ
Palette-type interface for data movement in eXtended reality (2023)
Palette-type interface for data movement in eXtended reality (2023)
확장현실에서의 데이터 이동을 위한 팔레트 형태의 인터페이스
In the extended reality space where XR (eXtended Reality) has become commonplace, the movement of data will increase due to activities such as meetings, editing work, collaboration, and exhibitions.
NEO: PaletteⓇ is a palette that helps data movement in the XR environment. By making the direction of data movement intuitive, it expands the scope and method of utilizing data, and furthermore, helps to immerse yourself in the context of data and users.
NEO: PaletteⓇ is a palette that helps data movement in the XR environment. By making the direction of data movement intuitive, it expands the scope and method of utilizing data, and furthermore, helps to immerse yourself in the context of data and users.
XR(eXtended Reality)이 일상화된 확장현실 공간 속에는 회의, 편집 작업, 협업, 전시 등의 활동으로 데이터의 이동이 더욱 증가할 것입니다. NEO: PaletteⓇ <네오: 팔레트>는 XR 환경에서의 데이터 이동을 돕는 팔레트입니다. 데이터의 이동방향을 직관적으로 함으로써 데이터를 활용하는 범위와 방식을 확장하고, 나아가 데이터 및 사용자의 컨텍스트에 몰입하도록 돕습니다.
Overview
As XR devices and related services become more commercialized, situations in which multiple users simultaneously move data will become more frequent, such as meetings, collaborations, and exhibitions. In this situation, the modal-based data movement method, such as the file selection window, is not only cumbersome due to its depth, but also causes users to repeatedly perform unnecessary actions to select files.
NEO: Palette is a UI component that helps move data in the XR environment. I got an interaction motif from a palette where I paint right where I want. By putting data in palette-type components, data such as text, images, videos, and files can be intuitively moved to the destination the user wants at once. This is effective in reducing the learning curve of XR users and increasing interest.
Through this, you can group data at various angles or emphasize important data with animation. If you get too immersed in your data, you might end up loving it or tearing it up and deleting it yourself. This means that the scope and method of using data will be expanded, helping users to effectively immerse themselves in the data itself as well as the work context.
XR 디바이스 및 관련 서비스가 더욱 상용화되면 회의, 공동작업, 전시회 등 다수의 사용자가 동시에 데이터를 이동시키는 상황이 빈번해질 것입니다. 이러한 상황에서 파일 선택창과 같은 모달을 기반으로 하던 데이터 이동 방식은 뎁스가 깊어 번거로울 뿐만 아니라, 사용자가 파일을 선택하는 불필요한 동작을 반복적으로 수행하게 합니다.
NEO: Palette는 XR환경에서의 데이터 이동을 돕는 UI 컴포넌트입니다. 물감을 묻혀 원하는 곳에 바로 그리는 팔레트에서 인터랙션 모티프를 얻었습니다. 팔레트 형태의 컴포넌트에 데이터를 담음으로써 텍스트, 이미지, 동영상, 파일과 같은 데이터를 사용자가 원하는 목적지까지 한번에 직관적으로 이동시킬 수 있습니다. 이는 XR 사용자의 러닝커브를 줄이고 흥미를 높이는데 효과적입니다.
이를 통해 데이터를 다양한 각도로 그룹핑을 하거나, 중요한 데이터에 애니메이션을 부여하여 강조할 수 있습니다. 데이터에 너무 몰입하다보면 데이터를 사랑하거나 직접 찢어서 삭제할 수도 있습니다. 이는 곧 데이터의 활용범위와 방식이 확장되는 것을 의미하며, 사용자가 데이터 자체는 물론 업무 컨택스트에 효과적으로 몰입하도록 돕습니다.
*Vision Pro - Apple
Problems
When moving data through waypoints such as galleries and file attachment modals, the following pain points may occur in XR.
(1) Different data attachment methods: Different apps have different interfaces and methods for attaching data.
(2) Causing selection mistakes: Increased fatigue in the selection process through controller and gestures.
(3) Different moving directions: Check which data has been sent where.
When moving data through waypoints such as galleries and file attachment modals, the following pain points may occur in XR.
(1) Different data attachment methods: Different apps have different interfaces and methods for attaching data.
(2) Causing selection mistakes: Increased fatigue in the selection process through controller and gestures.
(3) Different moving directions: Check which data has been sent where.
데이터 이동 시 갤러리, 파일 첨부 모달 등의 경유지를 거치게 되면, XR에서는 다음과 같은 페인포인트가 발생할 수 있습니다.
(1) 서로 다른 데이터 첨부 방식 : 앱마다 데이터를 첨부하는 방식과 인터페이스가 다름
(2) 선택 실수 유발 : 컨트롤러 · 제스처를 통한 선택과정에서 피로감 증가
(3) 각기 다른 이동 방향 : 어떤 데이터를 어디로 보냈는지 일일이 확인
(1) 서로 다른 데이터 첨부 방식 : 앱마다 데이터를 첨부하는 방식과 인터페이스가 다름
(2) 선택 실수 유발 : 컨트롤러 · 제스처를 통한 선택과정에서 피로감 증가
(3) 각기 다른 이동 방향 : 어떤 데이터를 어디로 보냈는지 일일이 확인
Solution
Palletizing data : You can organize your data by type, just like you organize your paints by color in a palette.
Palette modularization : It's modularized, like a palette with two plates connected, so it can change shape based on context.
Palletizing data : You can organize your data by type, just like you organize your paints by color in a palette.
Palette modularization : It's modularized, like a palette with two plates connected, so it can change shape based on context.
데이터 팔레팅 : 팔레트에 물감을 색깔별로 담듯이 데이터를 유형별로 정리하여 담을 수 있습니다.
팔레트 모듈화 : 두 개의 판이 연결되어 있는 팔레트처럼, 상황에 따라 모듈화하여 모양이나 조합을 바꿀 수 있습니다.
팔레트 모듈화 : 두 개의 판이 연결되어 있는 팔레트처럼, 상황에 따라 모듈화하여 모양이나 조합을 바꿀 수 있습니다.
Interface
(1) Data : Provides an intuitive sense of what kind of format-content it is.
(2) Palette : An area to hold data.
(3) Palette controller : Pinch to move the palette or switch modes.
(4) Palette interface : Shows the selected data contents, the name of the palette and whether you're involved, and who you belong to.
(1) Data : Provides an intuitive sense of what kind of format-content it is.
(2) Palette : An area to hold data.
(3) Palette controller : Pinch to move the palette or switch modes.
(4) Palette interface : Shows the selected data contents, the name of the palette and whether you're involved, and who you belong to.
(1) 데이터 : 어떤 종류의 포맷 · 내용인지 직관적으로 제공
(2) 팔레트 : 데이터를 담아두는 영역
(3) 팔레트 컨트롤러 : 핀치로 잡아 팔레트를 이동시키거나 모드를 전환
(4) 팔레트 인터페이스 : 선택된 데이터 내용, 팔레트 이름 및 참여여부, 소속 중인 사용자 안내
(2) 팔레트 : 데이터를 담아두는 영역
(3) 팔레트 컨트롤러 : 핀치로 잡아 팔레트를 이동시키거나 모드를 전환
(4) 팔레트 인터페이스 : 선택된 데이터 내용, 팔레트 이름 및 참여여부, 소속 중인 사용자 안내
Next evolution of palette, NEO: PaletteⓇ
다음 세대의 팔레트, 네오: 팔레트Ⓡ
Interaction Cinematics
This video is a collaborative scenario from a competition featuring key interactions with Neo: Palette's core interactions in a competition collaboration scenario.
This video is a collaborative scenario from a competition featuring key interactions with Neo: Palette's core interactions in a competition collaboration scenario.
본 영상은 네오: 팔레트의 핵심 인터랙션이 담긴 공모전 협업 시나리오입니다.
네 명의 소모임 친구들이 공모전 협업을 위해 XR 가상공간에서 네오: 팔레트를 활용하는 시나리오를 확인해보세요!
네 명의 소모임 친구들이 공모전 협업을 위해 XR 가상공간에서 네오: 팔레트를 활용하는 시나리오를 확인해보세요!
⑴ Create a palette and add data to it
Create a palette next to the browser panel, and drag the competition reference images into the palette.
Create a palette next to the browser panel, and drag the competition reference images into the palette.
⑴ 팔레트 생성 및 담기 : 브라우저 패널 옆에 팔레트를 생성하고, 공모전 레퍼런스 이미지들을 팔레트에 끌어 담습니다.
⑵ Move, expand the palette
Switch the palette from panel mode to solid mode, moving it forward and expanding it.
Switch the palette from panel mode to solid mode, moving it forward and expanding it.
⑵ 팔레트 이동 · 확장 : 팔레트를 패널 모드에서 입체모드로 전환하여, 패널 앞으로 이동 · 확장시킵니다.
⑶ Data connecting
After connecting similar reference images together, we head inside with our friends.
After connecting similar reference images together, we head inside with our friends.
⑶ 데이터 꼬리달기 : 비슷한 레퍼런스 이미지들을 하나의 꼬리로 연결한 후, 꼬리 안으로 친구들과 들어갑니다.
⑷ Data Motion
Select the images you need while meeting with your friends. Give the selected image a dynamic motion to emphasize it.
Select the images you need while meeting with your friends. Give the selected image a dynamic motion to emphasize it.
⑷ 데이터 모션 : 친구들과 회의하며 필요한 이미지를 선택합니다. 선택한 이미지에 동적인 모션을 부여하여 강조합니다.
⑸ Data Anger
Shredding out-of-date contest brief files, you get emotional about your data.
Shredding out-of-date contest brief files, you get emotional about your data.
⑸ 데이터 화풀이 : 기간이 지난 공모전 요강 파일을 파쇄하면서, 데이터에 대한 감정을 표출합니다.
⑹ Social Palette
Ask other friends to join you as you explore their different theme palettes.
Ask other friends to join you as you explore their different theme palettes.
⑹ 소셜 팔레트 : 다른 친구의 테마 팔레트를 함께 구경하면서 참여 요청을 합니다.
Interaction
(1) Solid Mode :
- Suitable for vertical movement · Interactive data movement.
- Can be used by placing it in front of the required action panel or by moving it around.
Context-sensitive angle :
Provided at a 90° angle to provide a sense of security around the data, but can also be used at a 30° more tilted angle when NEAR or in context.
(1) Solid Mode :
- Suitable for vertical movement · Interactive data movement.
- Can be used by placing it in front of the required action panel or by moving it around.
Context-sensitive angle :
Provided at a 90° angle to provide a sense of security around the data, but can also be used at a 30° more tilted angle when NEAR or in context.
(1) 입체모드 :
- 세로 방향 이동 · 쌍방향 데이터 이동에 적합합니다.
- 필요한 작업 패널 앞에 두거나 이동시키면서 사용 가능합니다.
컨택스트에 따른 각도 : 데이터에 대한 안정감을 주기 위해 90°의 각도로 제공하지만, NEAR 상태이거나 사용맥락에 따라 30° 더 기울인 각도로 사용 가능합니다.
- 세로 방향 이동 · 쌍방향 데이터 이동에 적합합니다.
- 필요한 작업 패널 앞에 두거나 이동시키면서 사용 가능합니다.
컨택스트에 따른 각도 : 데이터에 대한 안정감을 주기 위해 90°의 각도로 제공하지만, NEAR 상태이거나 사용맥락에 따라 30° 더 기울인 각도로 사용 가능합니다.
(2) Panel Mode :
Suitable for horizontal movement · focusing on the task panel.
It is easy to remember the position intuitively as it is fixed next to the work panel.
Placement in a large area :
Since the horizontal length is longer than the vertical, it can be placed in a larger area than the comfort zone.
Suitable for horizontal movement · focusing on the task panel.
It is easy to remember the position intuitively as it is fixed next to the work panel.
Placement in a large area :
Since the horizontal length is longer than the vertical, it can be placed in a larger area than the comfort zone.
(2) 패널모드 :
- 가로방향 이동 · 작업 패널 집중에 적합합니다.
- 작업 패널 옆에 고정해두고 사용하므로 위치를 직관적으로 기억하기 용이합니다.
넓은 영역에 배치 : 입체형에 비해 가로의 길이가 길기 때문에 Comfort Zone보다 더 넓은 영역에도 배치될 수 있습니다.
- 작업 패널 옆에 고정해두고 사용하므로 위치를 직관적으로 기억하기 용이합니다.
넓은 영역에 배치 : 입체형에 비해 가로의 길이가 길기 때문에 Comfort Zone보다 더 넓은 영역에도 배치될 수 있습니다.
Hand Gestures
Realistic Hands provide enhanced immersion and a sense of realistic interaction.
(1) Pinch : Select Data · Interface (pinch with thumb and forefinger touching)
(2) Pinch - : Move Data · palette (keep thumb and index finger together)
(3) Flip : Enter Menu · Select (flip hand horizontally while pinching)
(4) Shake : Auto-align data (pinch and quickly move left and right)
Realistic Hands provide enhanced immersion and a sense of realistic interaction.
(1) Pinch : Select Data · Interface (pinch with thumb and forefinger touching)
(2) Pinch - : Move Data · palette (keep thumb and index finger together)
(3) Flip : Enter Menu · Select (flip hand horizontally while pinching)
(4) Shake : Auto-align data (pinch and quickly move left and right)
Realistic Hands를 통해 향상된 몰입감과 실제와 같이 상호작용 한다는 의미를 제공합니다.
(1) Pinch : 데이터 · 인터페이스 선택 (엄지와 검지를 맞닿게 하여 집음)
(2) Pinch - : 데이터 · 팔레트 이동 (엄지와 검지를 맞닿은 채 유지)
(3) Flip : 메뉴 진입 · 선택 (핀치한 채로 손을 가로로 뒤집음)
(4) Shake : 데이터 자동정렬 (핀치한 채로 좌우로 빠르게 움직임)
(1) Pinch : 데이터 · 인터페이스 선택 (엄지와 검지를 맞닿게 하여 집음)
(2) Pinch - : 데이터 · 팔레트 이동 (엄지와 검지를 맞닿은 채 유지)
(3) Flip : 메뉴 진입 · 선택 (핀치한 채로 손을 가로로 뒤집음)
(4) Shake : 데이터 자동정렬 (핀치한 채로 좌우로 빠르게 움직임)
(1) Small task
For personal work · small collaboration:
Panel type · three-dimensional type with short extension
Can be used alone or shortly expanded for good mobility
For personal work · small collaboration:
Panel type · three-dimensional type with short extension
Can be used alone or shortly expanded for good mobility
개인 업무 · 소규모 협업 시 :
패널형 · 입체형에서 짧게 확장하여 사용
단독으로 사용하거나 짧게 확장하여 이동성이 좋음
패널형 · 입체형에서 짧게 확장하여 사용
단독으로 사용하거나 짧게 확장하여 이동성이 좋음
(2) Large task
For collaboration, exhibition, meeting, etc:
Extend to the X-axis in a three-dimensional shape and use it fixedly
Expands by 3x - 6x depending on whether the user is mobile or not
For collaboration, exhibition, meeting, etc:
Extend to the X-axis in a three-dimensional shape and use it fixedly
Expands by 3x - 6x depending on whether the user is mobile or not
협업 · 전시 · 회의 등 공동 사용 시 :
입체형에서 X축으로 길게 확장하여 고정한 채로 사용
사용자의 이동 가능 여부에 따라 3배 - 6배까지 확장
입체형에서 X축으로 길게 확장하여 고정한 채로 사용
사용자의 이동 가능 여부에 따라 3배 - 6배까지 확장
(3) Side task
Used contextually in individual and collaborative situations :
Use by expanding to the Z-axis in a stereoscopic view
Unobtrusive for long periods of use
Used contextually in individual and collaborative situations :
Use by expanding to the Z-axis in a stereoscopic view
Unobtrusive for long periods of use
개인 · 협업 상황에서 맥락에 따라 사용 :
입체형에서 Z축으로 확장하여 사용
장시간 사용 시에도 시선을 방해하지 않는 장점
입체형에서 Z축으로 확장하여 사용
장시간 사용 시에도 시선을 방해하지 않는 장점
Change the palette into various shapes according to your XR work context.
당신의 XR 업무 컨택스트에 따라 팔레트를 다양한 모양으로 변화시켜보세요.
NEO: PaletteⓇ moves data 'intuitively' to its destination. Therefore, the scope and method of utilizing data is expanding, which will be an inevitable change in data movement that will become common in the near future.
NEO: PaletteⓇ 는 데이터를 목적지에 '직관적'으로 이동시킵니다. 그렇기에 데이터를 활용하는 범위와 방식이 확장되고, 이는 근 미래에 일반화될 데이터 이동에 있어 필연적인 변화가 될 것입니다.
