DSLR 사용자 인터페이스는 반드시 평범할 필요가 없습니다. 기능성과 매력적인 미학을 결합해 사진 경험을 풍부하게 하는 혁신적인 디자인의 캔버스가 될 수 있습니다.
이 글에서는 초점과 밝기 조정부터 확대/축소 효과와 사진 촬영까지, 인터랙티브하고 현대적인 UI 프로토타입을 설계하는 팁을 소개합니다. ProtoPie의 힘으로 DSLR 인터페이스에 대한 새로운 접근 방식을 살펴보세요!
개요
DSLR 인터페이스 프로토타입 만들기
초점 및 밝기 설정
확대 및 축소 효과 만들기
사진 촬영하기
갤러리 탐색하기
사진 컨트롤 컴포넌트
에어드롭 모달
ProtoPie로 놀라운 카메라 인터페이스 디자인하기
DSLR 인터페이스 프로토타입 만들기
우리 튜토리얼은 인터랙티브한 iOS 스타일의 프로토타입을 설계하는 여정을 안내하며, 카메라 UI 디자인에 신선하고 현대적인 에너지를 불어넣습니다. 아래의 DSLR UI 데모처럼 인터페이스 구상을 역동적인 현실로 바꾸기 위해 튜토리얼을 시작해 보세요.
초점 및 밝기 설정
iOS 카메라와 유사한 초점 및 밝기 설정을 만들기 위해, 노란색 사각형과 밝기 슬라이더를 나타내는 태양 아이콘을 포함하는 focus 컨테이너를 만들었습니다.
카메라 컨테이너에 탭 트리거를 적용하여 초점 컨테이너가 이동하고 페이드 인되게 만들어, 사용자가 현재 어디에 초점을 맞추고 있는지 보여 줍니다. 응답 중지(stop responses)를 먼저 사용하면 빠르게 탭할 때 애니메이션이 서로 간섭하지 않도록 할 수 있습니다.
태양 아이콘에 a** 드래그 **트리거를 사용하여 태양을 세로로 이동합니다. 이 값은 카메라 컨테이너의 흰색 오버레이와
black오버레이의 투명도와 연결되어 밝기 조정 효과를 만듭니다. 아래로 드래그하면 더 어두워지고, 위로 드래그하면 더 밝아집니다.
초점 및 밝기 설정
카메라 초점.
확대 및 축소 효과 만들기
줌 효과를 만들기 위해서는 카메라 오브젝트를 단순히 확대하고 축소하면 됩니다.
Camera에 a** 핀치 **트리거를 사용하여 원점을 기준으로 크기를 조정합니다. 이미지가 화면보다 작아지는 것을 방지하기 위해 최소값만 설정했습니다.
Camera의 너비에 a** 감지** 트리거를 적용하여 확대/축소 표시기인 상단 중앙의 “1x”를 조정합니다. 이를 위해 다음 공식을 사용합니다:format(Camera.width / 500, "#.0") + "x"
확대 및 축소 효과 만들기.
카메라 줌.
사진 촬영하기
DSLR 카메라에서는 셔터 버튼이 물리적인 버튼이므로, 이 목업에서는 오른쪽의 회색 원으로 대체했습니다. 프로토타입을 실제 물리 버튼에 연결하고 싶다면 물론 ProtoPie Connect.로 할 수 있습니다.
shutter button에 **탭** 트리거를 적용하여 뒤쪽 컨테이너의 카메라를 멈추고 앞쪽으로 애니메이션합니다. 이는picture 1 container와picture 2 container가pictures안에 있는 구조입니다.
이론적으로는 여러 장의 사진을 찍더라도 이미지 하나만 저장합니다. 다른 컨테이너는 뒤로 이동하고 내부의 카메라는 다시 촬영을 시작합니다. 다시 사진을 찍으면 뒤쪽 컨테이너의 카메라가 멈추고 앞쪽으로 애니메이션됩니다.
이렇게 하면 두 개의 항목만으로 무한 애니메이션이 만들어집니다. 이 데모에서는 이미지 하나만 저장해도 충분하지만, 더 필요하다면 사진 컨테이너를 더 추가할 수 있습니다.
사진 촬영하기.
이미지 캡처.
갤러리 탐색하기
pictures에는 촬영한 이미지가 들어 있습니다. 탭하면 이를 갤러리 보기로 애니메이션합니다. 마찬가지로 뒤쪽의 chevron은 반대 동작을 수행합니다.
pictures에 탭 트리거를 사용하여 크기 조정과 이동 애니메이션으로 갤러리를 엽니다. 갤러리가 이미 열려 있으면 사진 상세 페이지가 열립니다.back chevron에 a** 탭** 트리거를 적용하여 이전 동작을 되돌립니다. 사진 상세 페이지가 열려 있으면 갤러리로 돌아가고, 그렇지 않으면 갤러리를 닫고 홈으로 돌아갑니다.
갤러리 탐색하기.
사진 갤러리.
사진 컨트롤 컴포넌트
Picture Controls 컴포넌트는 사용자가 갤러리에서 사진을 선택했을 때 화면에 나타나는 객체입니다.
share버튼에 a** 탭** 트리거를 적용하여 현재 씬에 “share”를 보내고 에어드롭 모달을 엽니다.heart버튼에 탭 트리거를 사용하여 아이콘을 비어 있는 상태와 채워진 상태 사이에서 전환합니다
사진 컨트롤.
에어드롭 모달
에어드롭 모달은 사용자가 사진 컨트롤에서 공유 아이콘을 탭할 때 나타납니다.
메인 씬에서 수신 트리거를 사용하여
Airdrop Modal컴포넌트를 위로 이동시켜 화면 안에 보이게 합니다.모달에 드래그 트리거를 적용하여 위아래로 이동시킵니다
터치 업 트리거는 모달이 맨 위 위치가 아닐 경우 아래로 이동하게 합니다
체인으로 Airdrop Modal의 Y 위치를 하단 오버레이의 투명도와 연결해, 모달이 열렸을 때 어두워진 배경을 만듭니다.
에어드롭 모달.
Airdrop Modal 컴포넌트 내부에서 공유 애니메이션의 로직을 처리합니다.
메모지에 a** 탭** 트리거를 추가하여
loader오브젝트를 360도 회전시키고 페이드 인하는 동시에,Status텍스트를 “전송 중”으로 변경해 전송 애니메이션을 시작합니다. 회전이 끝나면 텍스트를 “전송 완료”로 바꾸고 파란색으로 만듭니다. 또한 loader 오브젝트를 페이드 아웃합니다.체인으로 loader 오브젝트의 회전을 왼쪽 및 오른쪽 마스크와 연결하여 원형 진행 바 효과를 만듭니다.
공유 애니메이션.
사진을 에어드롭하기.
이게 전부입니다! 🥧
전체 Pie 구조는 꽤 간단합니다. 직접 Pie file을 살펴보며 모든 것이 정확히 어떻게 작동하는지 확인하거나, 자신만의 버전을 만들어 보세요!
ProtoPie로 놀라운 카메라 인터페이스 디자인하기
현대적이고 역동적인 느낌으로 카메라 인터페이스 디자인에 생동감을 불어넣으세요. ProtoPie는 여러분의 디자인 아이디어를 현실로 만드는 과정을 간소화합니다. 인터랙션을 손쉽게 시뮬레이션하고, 사용자 경험을 테스트하며, 작품을 다듬어 보세요. 무료로 시작해 창의적 잠재력을 탐색해 보세요!
