24년 8월 16일

오전

피그마 사용법

헤더 : 웹사이트의 가장 윗부분 (메뉴 창 같은 부분들을 말함!)

 

10시

피그마 반응형 웹사이트(?) 만드는 중

가로 슬라이드 만드는법

하단 메뉴바 만드는법

컴퓨터마다 피그마 ui가 달라서 초반에 좀 고역이었다;; (꾸역꾸역 맞춰가긴 했다만..)

다행히 선생님이 잠시 후에 버전을 전부 다 맞춰서 수업해줬다 다행..

그리고 프로토타입을 만들었는데, 프레임 생성 후 사각형을 안에 넣고 컴포넌트화 시켜서 다른 사각형과 연결해준다. 그러면 커서를 가져다 댔을 때 밑에 하위메뉴가 나오게 하거나

화살표를 눌렀을 때 리스트가 이동하는 등 다양한 효과를 줄 수 있다.

피그마 프로토타입 생성

 

피그마 플러그인

 

METERIAL DESIGN ICONS : 무료 아이콘

UNSPLASH : 이미지 무료로 가져와서 쓸 수 있음

 

와이어프레임 :

아티스트와 엔지니어가 물리적 또는 3차원 개체의 시각적 표현을 만드는 데 사용하는 기술인 와이어프레임 모델링에 대해 들어보신 적이 있을 것이다. 간단한 선과 곡선을 사용하는 와이어프레임 모델은 3D 개체를 구축하기 위한 골격으로 사용됨

와이어프레임은 소프트웨어와 웹 디자인의 세계에서 비슷하게 정의됨. 와이어프레임은 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합이다.

---

11시 : 과제설명

과제 : 피그마 프로토타입 만들기

과제 제출항목

---

0 주제선정

---

1 유스케이스 다이어그램

---

2 유스케이스 명세서

---

3 프로토타입(or 와이어프레임)

---

4 스타일가이드

---

5 스토리보드

---

스토리보드가 배점이 젤 높음 !

 

개발동기

목표

조원소개

히스토리(개발 하는 과정)

구조 설명

 

화면 흐름도

플로우 차트 -기능에대한 상세흐름도 ,, 마름모꼴 : 입력값 창

알고리즘 같은 느낌? 저런것도 다 피그마로 그리네 (플로우 차트 없으면 감점)

선생님이 예시는 지정해준다.

프로토타입 설계를 제일 먼저 해줘야 다른 설계가 편함

누가 어떤 페이지를 맡을건지

유스케이스 만들때 명세서 작성해야 작업이 수월함

수정 건수마다 돈 받음

유스케이스 작업 -프로토타입- 스토리보드 -스타일가이드 만들기

유스케이스

어떤 액터(actor) 가 이용할 수 있는 기능들을 서술해놓은 구조

유스케이스 명세서

유스케이스 한개당에 대한 기능들에 대한 설명을 적은 명세서

스토리보드

• TITLE
• 개정이력(HISTORY)
• 메뉴 구조
• 화면 ID 목록
• Flow Chart
• Permission
• Poliy
• UI 기능 구조
• Etc

프로젝트 진행

유스케이스 작업 -프로토타입- 스토리보드 -스타일가이드 만들기

여기서 속성하나당 작업인원을 어떻게 할당할지 정하기!

나 퍼미션 , 파워포인트 작성

재용님 플로우차트

기현님 와이어프레임

숙박업소 예약 프로젝트

조원3명으로 변경

한 분이 건강상의 문제로 조에서 빠지게 되어서 3명이 되었다.

과연 잘 할 수 있을까?

잘하고싶다.!