UI를 세밀하게 그리는 디자인 도구
펜 도구
펜 도구로 점과 경로를 연결하고 곡선을 조절해 아이콘과 일러스트를 그릴 수 있습니다. 벡터 네트워크를 활용하면 하나의 점에서 여러 방향으로 경로를 연결할 수 있습니다.
도형 도구
사각형, 선, 타원, 다각형, 별을 캔버스에 바로 그릴 수 있습니다. 크기와 색상, 모서리를 조절해 화면에 필요한 요소를 만드세요.
마스크 도구
마스크로 이미지나 도형의 일부만 표시할 수 있습니다. 프로필 사진을 원형으로 자르거나 여러 레이어를 원하는 영역 안에 배치할 때 활용하세요.
내용에 맞춰 조정되는 오토 레이아웃
오토 레이아웃
오토 레이아웃 프레임에 텍스트와 이미지를 넣고 간격, 여백, 크기 조절 방식을 설정하세요. 내용이 늘어나거나 요소가 추가되면 설정에 맞춰 배치가 조정됩니다.
컴포넌트 배리언트
버튼의 상태와 크기처럼 서로 다른 버전을 하나의 컴포넌트 세트로 관리할 수 있습니다. 속성 값을 바꿔 필요한 배리언트를 선택하면 같은 요소를 매번 새로 만들 필요가 없습니다.
공유 스타일
색상, 텍스트, 효과를 스타일로 저장하고 여러 레이어에 재사용하세요. 공통 스타일을 관리하면 화면마다 글꼴이나 색상을 따로 지정하는 작업을 줄일 수 있습니다.
부울 연산
도형을 합치거나 겹치는 부분을 빼고 남기는 부울 연산으로 복잡한 형태를 만들 수 있습니다. 기본 도형을 조합해 아이콘과 그래픽을 제작하세요.
같은 파일에서 디자인하고 검토하기
팀과 프로젝트 관리
팀을 만들고 프로젝트에 함께 작업할 멤버를 초대하세요. 팀과 프로젝트 단위로 파일을 정리하고 멤버의 접근 권한을 관리할 수 있습니다.
실시간 협업
팀원이 같은 파일에 접속해 실시간으로 편집하고 변경 내용을 함께 확인할 수 있습니다. 작업할 때마다 파일을 내려받아 다시 보내는 과정을 줄일 수 있습니다.
온라인 댓글
검토할 위치에 댓글을 남기고 팀원을 멘션해 의견을 전달하세요. 디자인과 피드백을 같은 화면에서 확인하며 수정 사항을 논의할 수 있습니다.
팀 라이브러리
컴포넌트와 스타일을 팀 라이브러리에 게시해 여러 파일에서 재사용할 수 있습니다. 변경 사항을 라이브러리에 게시하면 팀원이 사용하는 디자인에도 업데이트를 적용할 수 있습니다.
개발에 필요한 사양과 에셋 공유
슬라이스 및 내보내기
이미지와 아이콘의 내보내기 형식과 배율을 설정하고 PNG, SVG 등의 파일로 저장할 수 있습니다. 개발자는 공유된 디자인에서 필요한 에셋을 확인하고 내려받을 수 있습니다.
코드 보기
개발자는 선택한 요소의 크기, 간격, 색상, 글꼴과 코드 정보를 확인할 수 있습니다. 필요한 값을 복사해 실제 화면을 구현할 때 참고하세요.
전달 사항 남기기
화면만으로 설명하기 어려운 동작이나 예외 상황은 댓글로 남기세요. 개발자가 해당 위치에서 의도를 확인하고 질문할 수 있습니다.
더 많은 UI 디자인 기능
웹과 앱 화면부터 아이콘, 일러스트, 와이어프레임까지 한 파일에서 작업하세요. 파일 가져오기, 글꼴, 버전 기록과 공유 설정으로 작업 흐름을 이어갈 수 있습니다.
무료 이용
파일 호환성
Sketch와 Adobe XD 파일을 가져오고 내보낼 수 있습니다. SVG 이미지도 불러와 편집하거나 내보내 디자인에 활용할 수 있습니다.
스마트 선택
여러 레이어를 선택해 행과 열로 정렬하고 요소 사이의 간격을 조절할 수 있습니다. 카드 목록이나 아이콘 그리드를 정리할 때 활용하세요.
로컬 글꼴 사용
Font Assistant를 연결하면 브라우저에서 컴퓨터에 설치된 글꼴을 사용할 수 있습니다. 팀 글꼴 라이브러리로 공통 글꼴도 관리할 수 있습니다.
이미지 일괄 가져오기와 내보내기
여러 이미지를 한 번에 가져오거나 내보내기로 설정한 요소를 함께 저장할 수 있습니다. 반복되는 파일 작업을 줄여 화면 구성에 집중하세요.
버전 기록
중요한 작업 시점에 이름을 붙여 버전을 저장하세요. 버전 기록에서 이전 작업 상태를 확인하고 필요한 버전으로 돌아갈 수 있습니다.
공유 권한
파일을 공유하기 전에 보기와 편집 권한을 설정하세요. 함께 작업할 사람과 검토만 할 사람의 접근 범위를 구분할 수 있습니다.
게스트 보기
링크를 받은 사람은 설정된 권한 범위에서 디자인을 볼 수 있습니다. 외부 검토자와 공유할 때 파일의 공개 범위를 선택하세요.
썸네일
파일 목록에서 디자인을 알아보기 쉽도록 썸네일을 설정할 수 있습니다. 대표 화면이나 원하는 레이어를 선택해 파일의 내용을 보여주세요.
Pixso 기능 가이드
자주 묻는 질문
Pixso에서 UI 화면을 설계하고 오토 레이아웃, 컴포넌트, 실시간 공동 편집으로 작업하세요. 프로토타입 검토부터 개발자 핸드오프까지 한곳에서 연결할 수 있습니다.
Pixso UI 디자인 툴로 무엇을 할 수 있나요?
웹과 앱의 인터페이스를 설계하고 오토 레이아웃, 컴포넌트와 스타일을 활용해 반복 작업을 줄일 수 있습니다. 완성한 화면은 프로토타입과 개발자 핸드오프로 이어집니다.
여러 명이 같은 UI 파일을 편집할 수 있나요?
네. 팀원이 같은 파일에 접속해 실시간으로 편집하고 댓글로 의견을 남길 수 있어 버전이 다른 파일을 주고받는 과정을 줄일 수 있습니다.
개발자는 디자인 사양을 어디에서 확인하나요?
공유된 파일에서 간격, 색상, 폰트와 에셋 정보를 확인하고 필요한 값을 복사할 수 있어 디자인과 개발 사이의 전달 과정을 단순화할 수 있습니다.
UI디자이너 @Daisy
"적절한 협업 도구를 선택하는 게 디자이너에게 중요한데요. 결국 우리가 더 좋은 제품을 만들 수 있느냐가 결정됩니다."