피그마를 활용하여 화면정의서 만들기

피그마를 활용하여 화면정의서 만들기

회사에서의 업무 : 화면정의서 → 개발 / 디자인 → QA → TC → 업데이트

 

그래서 회사에서 피그마로 만들어진 화면정의서는 포트폴리오로? 쓸 수 없다.

 

화면정의서 → 상상으로 모든 이용이 가능한가? No. → 직접 해보는 것이 Best

• 개발 → 3개월 ~ 5개월
• 그동안 기획은? 다음 스텝을 가야 한다.
• 완성을 위한 과정 => 그게 바로 프로토타입

 

프로토타입

실무에서는 잘 사용하지 않지만, 고객에게 직관적으로 보여줄 때 유용한 결과

• 최단시간, 최소기능으로 고객에게 주는 제품
  완성본과 거리가 멀어도 된다. 
• cf. MVP : 최소기능
• ex. 차 → 실제 차
  실제 차를 만드는 것보다, 유사 소품을 이용하여 나무젓가락으로 제작
• ex2. EBS : 동영상 플랫폼(-> 여러 강의)
  잇기 : 카카오톡 → 디스코드 => 여기엔 제품은 없고 최단시간에 시장검증을 할 수 있는 시스템

피그마 → 프로토타입 기능 → 화면정의서 내용을 바탕으로 실제 테스트

 

피그마 프로토타입 사용법

1. ios/Aos
2. 계정 로그인 -> 해당 프로젝트 화면 접속
3. 왼쪽 하단 : 페이지 설정
4. 우측상단 : View prototype
5. 화면이동, 스크롤, 팝업 인터렉션 넣는다.

실습

메뉴 -> 커뮤니티 -> 디자인 UI를 찾아서 열기 누른다.

+ 누른 상태로 연결

지울 때는 - 누르면 된다.

선을 일일이 연결시키지말고 

 

Navigate to는 뎁스 있는 화면으로 들어갈 때 사용

돌아갈 때는 back

 

가로길이는 동일한 상태에서 화면이 길어지면(세로) 자동으로 스크롤을 만들어줌.

 

팝업은 프레임을 만들고 라운드를 줘서 콘텐츠를 복사해서 가져온다.

검색버튼 프로토타입 온 탭 오픈 오버레이 none->화면선택 / 처리할 효과 선택

 

디바이스 설정 반드시 필요함.

 

다시 정리

플러스 누르고 인터렉션 누르고 온탭, 오픈 오버레이, 화면 선택, add background 넣어야 팝업이 뜨는 효과를 볼 수 있음.

 

 

 

피그마 사용 목적

• 내부적으로 체크 ⇒ QA
• 유저의 반응을 체크하기 위함 ⇒ TC

 

노코드 개발

• 웹 : 아임웹, 우피
• 모바일 : 버블(둘 다 가능), 오븐