인프런 커뮤니티 질문&답변

AirDream님의 프로필 이미지
AirDream

작성한 질문수

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

E-commerce 모바일 앱 와이어프레임 만들기 3. 피그마로 워크플로우 만들기

에릭 쌤!

해결된 질문

작성

·

248

1

와이어프레임 워크플로우까지 했는데요.

마지막에 내가 연결한거 확인해보려면 어떻게 해야하나요?

오토 에로우 플러그인 사용만하고 그냥 끝나서..

엇 내가 제대로 했나?

나중에 팀원들한테 공유할때 어떻게 보여줘야하지?

이런 생각이 들더라구요.

알려주시면 감사하겠습니다.

영상 잘보고 있어요.^^

답변 4

3

에릭님의 프로필 이미지
에릭
지식공유자

요웰콤입니다. AirtDream님.

저도 좋은 질문 주셔서 너무 감사드려요. 좋은 질문이라고 생각했던 이유는 실무에서 와이어프레임을 다양한 용도로 공유를 하기 때문에 그렇습니다. 와이어프레임을 팀원들을 위해 보여주기도 하지만, 와이어프레임으로 바로 사용자 테스트를 하기도 합니다. 사용자 입장에서 와이어프레임을 봤을 때 기능적인 측면에 대해, 사용자 흐름적인 측면에 대해 여러 피드백을 줄 수 있기 때문이에요. 그래서 사용자 테스트를 할 경우, 피그마의 프로토타이핑(섹션 13 참고) 기능을 활용해서 개별 화면 단위로 볼 수 있게 하고 특정 영역을 클릭하면 다른 화면으로 넘어가게 하는 게 효과적일 수 있습니다. 

피그마의 최대장점이 웹 기반 서비스라는 점이라고 생각을 해요. 그런 만큼 협업을 위해, 또는 사용자 테스트를 위해 공유하기 기능을 잘 활용하신다면 피그마를 200%, 또는 그 이상 활용한다고 볼 수 있을 것 같아요. 그리고 협업을 더 잘하면 잘할 수록 팀원들에게 도움이 되는 좋은 동료가 되는 것 같습니다. 

또 궁금한 점이 생긴다면 언제든지 말씀주세요. 감사합니다.

1

에릭님의 프로필 이미지
에릭
지식공유자

추가적으로 한가지 방법이 더 있어요.

위 방식은 워크플로우가 그려져 있는 것을 팀원들에게 보여주고 싶을 경우 사용하는 방식이에요.

그 외에도 프로토타이핑 기능을 활용해서 (워크플로우가 없을 경우) 개별화면들을 인터렉티브하게 공유하거나 보여줄 수도 있습니다. 이 기능에 대해서는 '섹션 13 - 피그마 프로토타이핑 툴 활용하기'를 참고하시기 바랍니다.

1

에릭님의 프로필 이미지
에릭
지식공유자

AirDream님, 정말 좋은 질문 감사드립니다.

말씀하신 것처럼 내가 만든 와이어프레임은 결국 팀원들 또는 이해관계자들과 커뮤니케이션할 때 많이 활용되기 때문에 공유하는 것이 중요한 것 같습니다. 

에로우가 그려져 있는, 즉 워크플로우가 함께 포함되어 있는 와이어프레임을 누군가와 공유할 때 제가 하는 방식을 공유드립니다.

영상으로 보여드리는 것이 이해하기 쉬울 것 같아 영상을 만들었습니다.

결론부터 말씀드리자면, 저는 워크플로우가 포함되어 있는 경우 하나의 프레임 안에 내가 보여주고자 하는 요소를 넣어준 후, 해당 프레임을 팀원들에게 공유를 하는 편입니다.

1. 디자이너의 입장에서 와이어프레임을 공유하는 방법입니다.

2. 아래는 팀원의 입장에서 공유받은 URL로 브라우저에서 방문을 했을 때 무엇을 보게 되는지에 대한 부분이에요.

위 방식 외에도, 만약 팀원과 같은 자리에 있거나 실시간으로 영상통화를 하고 있다면, 내 컴퓨터의 화면을 즉석으로 보여주기도 합니다.

좋은 질문 감사드립니다.^^

0

AirDream님의 프로필 이미지
AirDream
질문자

와.. 영상까지 찍어주실줄이야.
감사해요.

생각보다 공유하기는 쉽네요.

또 팀원입장에서 공유된 링크로 봤을때 어떻게 보여지는 지 봤어요.

다만 워크플로우 설정해줬던 거는 확인하는 방법은 섹션 13에 따로 설명을 해주셨었군요.

차근차근 가볼게요!

감사해요 에릭쌤

AirDream님의 프로필 이미지
AirDream

작성한 질문수

질문하기