평가) 피그마 - 뷰어 링크 제출
- 페이지 구분
- 컴포넌트 (각 섹션)
- 프레임(섹션 안의 컨텐츠 구분)
- 텍스트/이미지 요소
플레이 버튼 눌러서 링크 보내면 된다 (원본ㄴㄴ 뷰어)
-
모바일
디바이스 너비 320px로 먼저 제작
이미지 최대 1080 ~ 최소 800 -
데스크탑
1920px
래스터 이미지는 1:1 사이즈로 정확하게 제작 -
UI
svg 출력 가능하도록 일러스트 소스로 처리
IR 처리하기 위해서 한군데 모아주세요 -
버튼들, 마우스 피드백마다 다른 UI 제작하기 (롤오버+활성화상태 같이 제작!)
<사이트 정체성 유지를 위한 공통클래스>
공통클래스 정보 中 폰트와 색상을 피그마에 알려주세요
-
폰트 가이드 4개 정의
제목체, 소제목체, 네비게이션, 버튼
폰트체, 볼드, 색상, 위아래 여백 (=자간행간) -
색상 가이드 4개
흑백 : 찐블랙 & 연블랙
칼라 : active색상 & 연한색상
// 공통클래스 사용 예시 //
.font18{ font-size:18px !important; line-height:1 !important }
.flexjbac{ display:flex !important; justify-content: center !important; align-items: center !important }+) 피그마 폰트
- 피그마 폰트(구글, 로컬, 한글) 사용법& 폰트 누락 수정
https://cucat.tistory.com/entry/%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%8F%B0%ED%8A%B8-%EC%82%AC%EC%9A%A9%EB%B2%95 - 피그마 폰트 플러그인 4가지 추천
https://cucat.tistory.com/entry/%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%8F%B0%ED%8A%B8-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%B6%94%EC%B2%9C
능력단위명 : UI 구현
제출형식 :
제작보고내용 기입하여(노션에 적을 내용) UI구현_이름_221104.jpg 로 공유폴더에 올려주세요
평가내용 : 피그마로 광고웹앱페이지의 UI를 구현하시오
점수기준 :
1. 협업이 가능하도록 디자인시안과 퍼블리싱 정보를 구체적으로 제시하였는지
2. 반응형 퍼블리싱에 문제없도록 소스처리 잘 하였는지 (이미지 너비 등)
3. 작업지시서 / 이미지소스의 스타일처리(배경)인지 태그처리인지 / 의사소통이 잘 이뤄졌는지
- ex)텍스트 외 이미지 배경처리, 영상은 유투브에 올린다음 가져와, 로고는 svg 제작
- ex)제이쿼리 지양, show/hide 내장함수 쓰지말고 addClass/removeClass
- 버튼 등 사용성 개선이 잘 되어있는지
- 워크플로워가 제작목적에 맞게 유도되고 있는지 (30점)
- 컨셉의 정체성을 유지하는 레이아웃/폰트/색상을 선정하였는지 (20점)
