사용자 흐름을 화면으로 구체화하세요
프로토타입으로 아이디어 정리
템플릿과 디자인 리소스를 활용해 화면 구조를 잡고, 프로덕트 매니저와 사용자의 요구사항을 검토합니다.
UI와 UX를 함께 설계
UI 화면과 인터랙션을 같은 파일에서 구성하고, 사용자가 과업을 완료하는 흐름을 확인합니다.
공통 컴포넌트 재사용
공통 컴포넌트와 스타일을 재사용해 반복되는 요소를 관리합니다. 변경이 적용되는 범위를 확인하세요.
인터랙션을 만들고 검토하세요
인터랙션 시연
클릭, 탭, 키보드 등 필요한 트리거로 화면 전환을 구성하고, 대상 기기에서 흐름을 검토합니다.
화면 전환 애니메이션
전환 효과와 재생 시간을 조정해 화면이 바뀌는 의도를 전달합니다. 시각 효과가 가독성과 조작을 방해하지 않는지 확인하세요.
이징 곡선 조정
이징 곡선으로 애니메이션의 속도 변화를 조정해 움직임을 표현합니다.
팀과 고객의 피드백을 함께 확인하세요
팀과 함께 검토
같은 화면에서 댓글과 의견을 공유하고, 검토할 담당자와 해결 여부를 관리합니다.
링크로 공유
링크를 보내기 전에 받는 사람의 보기·편집 권한을 확인하고, 필요한 범위만 공유합니다.
팀 프로젝트 관리
팀별로 프로젝트와 파일을 정리하고, 역할에 맞는 권한으로 디자인 자료를 공유합니다.
설계부터 개발자 전달까지 연결하세요
구체적인 화면 디자인
레이아웃, 색상, 글자와 컴포넌트를 구성해 사용자가 보게 될 화면을 구체화합니다. 실제 서비스 동작은 별도로 검증해야 합니다.
개발자에게 디자인 정보 전달
개발자가 디자인 속성과 지원되는 코드 정보를 확인하고 필요한 리소스를 내보낼 수 있습니다. 코드 정보가 완성 앱이나 모든 요소의 자동 구현을 보장하지는 않습니다.
파일 이전 확인
원본의 복사본으로 가져오기를 시험하고, 폰트·이미지·컴포넌트·화면 전환을 확인하세요. 지원 형식이라도 편집 구조와 기능에 차이가 생길 수 있습니다.
와이어프레임 만들기
대상 기기에 맞는 프레임 크기를 선택하고, 정보와 기능을 배치해 화면의 구조를 계획합니다.
스마트 선택
여러 요소를 선택해 행과 열로 정렬하고 요소 사이의 간격을 조정합니다.
불리언 연산
도형의 합치기, 빼기, 교차 등을 사용해 필요한 모양을 만듭니다.
스크롤 동작
스크롤할 영역을 설정하고, 긴 화면에서도 필요한 정보에 접근할 수 있는지 미리보기로 확인합니다.
프로토타입 트리거
클릭·탭·드래그 등 동작을 시작할 조건을 설정하고 연결된 결과를 확인합니다.
오버레이 설정
팝업이나 메뉴를 오버레이로 구성하고 열기·닫기 동작과 배경 표시를 확인합니다.
미리보기
프로토타입의 화면 전환과 인터랙션을 미리 보고, 검토한 내용을 디자인에 반영합니다.
버전 기록
저장된 버전을 확인해 변경 사항을 살펴봅니다. 이용 가능한 기록과 복원 범위는 현재 플랜에서 확인하세요.
UX디자이너 @Murfy
Pixso에서 디자이너의 제품을 미리 경험하게 하고, 클릭을 마음대로 하면 디자이너가 예상하지 못한 질문들을 꿰뚫어 볼 수 있습니다. 우리가 제품을 더 잘 다듬는 데 도움이 될 것입니다.