본문 바로가기
Frontend

UI 설계 단어 정리

by dug_developer 2022. 4. 2.
반응형

사이트맵 

목차 같은 역할을 한다.


와이어 프레임

한 화면의 레이아웃을 설계하는 작업.


목업

와이어 프레임보다 실제 화면에 유사하게 디자인을 적용해서 만든 정적 모형


프로토타입

목업에서 동적인 기능이 추가된 동적 모형

실제 구현된 것처럼 시뮬레이션이 가능하며 단시간에 구현 가능해서 사용자 경험에 대해 테스트를 해볼 수 있다.


스토리보드

디자이너/개발자가 참고하는 최종적인 산출문서

정책, 프로세스, 구성, 와이어프레임, 기능 정의 DB 연동등 서비스를 구축하기 위한 모든 정보가 담겨있는 문서

현업에서는 해당 문서를 바탕으로 소통한다.

현재 진행중인 프로젝트의 스토리보드 자세한 정책과 기능은 아직 작성하지 못함


플로우 차트

UI의 이벤트에 따른 흐름을 차트로 나타낸 모형


 

와이어프레임 작업 후 목업을 만들어서 스토리보드로 연결하는 식으로 UI 작업을 계획 및 진행할 것이다

 

참고로 저와 제 주변 개발자들이 애용하는 디자인 Tool은 Figma입니다!

반응형

'Frontend' 카테고리의 다른 글

CSR과 SSR  (0) 2022.04.29
도메인, DNS, 호스팅  (0) 2022.04.29
UI 설계할 때 알아둘 점  (0) 2022.04.02
GitHub Page 배포하기  (0) 2022.04.01
react 프로젝트 초기 설정 (feat. CSS 초기화, baseUrl 설정)  (0) 2022.04.01