24.11.18.Mon
안녕하세요. 빵떡징입니닷!
오늘은 불월! 불금과 같은 단어를 붙였는데도
사뭇 다른 느낌이네요.
쨌든 불태워야 되는건 맞으니까..ㅎㅅㅎ....
오늘도 알찬 하루를 보냈습니다.
먼저 춘식이와 함께 출근했고요.
지하철 태업으로 열차 지연이 꽤나 있었다고 하는데..!
운이 좋았는지 전혀 못느끼고 잘 도착했습니다.
Day11
Part1. 무드보드 만들기
Part2. 스타일 가이드 만들기
Part3. IA 설계하기
Part1. 무드보드 만들기
어제 키워드 정하기에 이어서~~~
서비스의 컬러를 정하고, 무드보드를 만들었습니다!
사실 한 번 길을 잃긴했는데욥^,,^!!
다시 키워드 점검하고(냉장고 -> 담아담아 로 변경),
키워드와 원하는 무드에 어울리는 컬러 정하고,
무드보드를 만들기 시작하면서 방향을 찾았습니다.
우리의 소중한 대표 페르소나1 "이수민"씨에게 빙의해
What's in Soomin's Room? 이라는 컨셉으로
수민씨의 방을 꾸며보는 시간을 가졌습니다!
수민씨의 방 = 우리의 무드 그 잡채 랄까^0^
이렇게 열심히 만들어보았는데요!!
(앞의 수많은 과정들은 다소 생략 되긴함)
최최종 컨펌은 이 친구로 받았습니댯!!
이렇게 본격적으로 신경 써서 무드보드를 만들어본 건 처음이었는데
굉장히 재밌었습니다!! 처음이라 조금 서툴긴 했지만요!! 귀한 경험으로 남을 것 같습니다!
Part2. 스타일 가이드 만들기
다음으로는 스타일 가이드를 만들어보았습니다.
만들기 전에 스타일 가이드가 뭔지 알아야겠죠?~?
1. 스타일 가이드란?!
2. 어떤 내용이 들어가나욥~?
1. 스타일 가이드란?!
먼저 스타일 가이드란
"디자인 작업의 일관성 유지하고
브랜드 정체성을 효과적으로 전달하기 위해 사용하는 문서" 인데요!
서비스 혹은 브랜드의 정체성을 명확하게 보여주는 역할을 합니다.
문서에 포함되는 스타일 가이드를 통해 프로젝트 작업의 체계성을 확인할 수 있다고 해요!
작업을 함께하는 클라이언트, 혹은 협업자와의
원활한 소통을 할 수 있도록 도와주는 도구 라고 생각하면 됩니다.
스타일 가이드를 잡아둔다는 건 일종의 규칙을 정해두는 것!
-> 모두가 지켜야 할 약속이 있으면 좀 더 원활하게 작업이 진행!
요런 너낌쓰~~~
2. 어떤 내용이 들어가나욥~?
스타일 가이드에는
"로고, 심볼마크, 메인 컬러, 그레이스케일, 폰트" 등이 포함 됩니다.
- 구성 요소
- 로고: 색상, 크기, 배치, 보호영역 등에 대한 규칙
- 컬러 팔레트: 색상코드 명시(RGB, CMYK, HEX 등)
- 타이포그래피: 사용한 폰트 종류 크기, 줄 간격, 서체 용도
- 이미지 스타일: 사용하는 이미지의 유형과 톤(실사, 일러스트, 캐릭터 등)
- 디자인 시스템
- 컴포넌트: 버튼, 입력, 폼, 아이콘 등 UI 요소의 크기, 간격, 스타일 정의
- 레이아웃: 그리스 시스템, 여백 규칙
- 애니메이션: 전환효과, 마이크로 인터렉션 등에 대한 규칙과 가이드
- 언어 및 톤
- 문구 스타일: 캐쥬얼, 공식 등 사용하는 단어나 표현의 톤
- UX Writing
꽤나 많은 것들이 스타일 가이드에 포함되어 있죠?
저희는 UI 디자인 자체가 큰 목표는 아니고
기획&디자인을 크게 배우는 과정 중 하나이기 때문에
스타일 가이드를 아주 상세히 작성하지는 않고,
기본적인 내용들을 정해서 정리하는 시간을 가졌습니다.
Logo, Symbolmark, Color, Font
이렇게 다섯 가지를 정리하는 시간을 가졌어요.
시작하고 로고 만들어보다가
다음 강의가 시작되어서^0^,,~~~
로고 만들다가 잠깐 중단이 되었습니다!
내일 마저 완성할 것 같아요!
Color는 정해두었는데 Variation을 만들어만 두고
정리를 안해서 비어있슴댜...ㅎㅅㅎ
Part3. IA 설계하기
다음으로는 IA를 설계하는 시간을 가졌습니다.
1.IA설계 과정?
2.구조(IA- Infromation Architecture)?
3.경쟁사 UI 조사
1.IA설계 과정?
IA에 대해서 자세히 배우기 전에
이 IA설계 과정이 어디에 포함된 내용인가~~?에 대해서
먼저 배워보았는데요!
우선 지난 번에 페르소나의 페인포인트를 작성하고
이 페인포인트에서 솔루션을 도출하는 과정이 있었잖아요?
이 때 솔루션 = 사용자에게 어떤 경험을 줄 것인가?
= 어떤 서비스(기능)를 제공할 것인가? 로 연결이 됩니다.
이렇게 찾은 솔루션을 바탕으로
사용자에게 서비스를 제공할 인터페이스를 설계해야 하는데요!
설계 시에 유의해야 할 점이 있습니다.
사용자가 빨리 작업하거나 실수를 덜 하도록 하는 방향으로 해야 한다는 점!
그렇게 하기 위해 우리는 일련의 과정을 거칩니다.
전략 - 범위(기능,데이터,정책)-구조(IA)-골격(UI,Wireframe)-표면(GUI,Graphic)
이번에 진행할 게 바아로!!
세 번째 과정인 구조(IA) 설계 작업이에요.
2.구조(IA- Infromation Architecture)?
정보와 콘텐츠 체계적으로 구성하고 구조화하는 과정으로
사용자들이 원하는 정보를 쉽게 찾고 이해할 수 있도록 돕습니다.
다양한 화면으로 가는 과정, 어떤 여정을 거치는 지? 에 대해
생각하며 구조화 시키는 작업이에요!!
지난 시간에 작성해두었던 세 가지 솔루션-기능을 가져와서
기본 기능들에 메인 기능들까지 포함 시켜 정보 구조화 작업을 진행했습니다!
마무리 된 건 아니고! 다음에 진행될 경쟁사 조사를 통해
IA를 좀 더 구체화 시켜보기로 했어요.
3.경쟁사 UI 조사
IA 구체화 및 업그레이드를 위해
경쟁사 UI 조사에 돌입했습니다.
- 우리화면에 들어가야할 요소, 내용 생각
- 그것들을 구현하기 위해 어떤 UI 참고해야 할지 찾는다
- 이미 구현된 다른 앱의 UI 보고 분석해 표로 정리한다
- 모든 분석 끝나면 최종적으로 서비스에 접목할 부분 가려낸다
- 우리 서비스 화면 와이어프레임을 만든다.(흑백)
이런 순서로 진행되는데요.
저희 팀은 오늘 1~3번까지 진행해보았습니다!
컬리, 뉴뉴, 아이디어스 세 가지 경쟁사를 선택해 분석하고 작성해보았고요.
그 외에도 쓱, 인아웃에서 UI가 어떤식으로 설계되어 있는지 살펴보았습니다!
열심히 조사하다보니 어느새 6시~!~!
교육을 마무리할 시간이 되어
내일을 기약하며! 오늘의 할 일을 마무리 했습니다.
아래는 내일..마무리해야 할 것들..~~
본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 과정(B-log) 리뷰로 작성 되었습니다.
'TIL > Design' 카테고리의 다른 글
| 13.빵 터짐🍞💥_ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (0) | 2024.11.20 |
|---|---|
| 12. 잠이 잠이 와 _ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (3) | 2024.11.19 |
| 10.❤️🔥불금이닷!❤️🔥_ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (4) | 2024.11.16 |
| 09.간식의 축복이 끝이 없네👼_ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (15) | 2024.11.14 |
| 08.서비스 기획 렛쯔고🌝_ 유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (9) | 2024.11.13 |
