티스토리 뷰
2025.05.11
디자인 완성, 프로토타입, 발표 장표, 브로슈어
5/6
감정표현 도형 확정, 로고 제작, 삽입 일러스트 제작
감정 도형을 선택했다. 다른 레퍼런스 형태들을 찾아보면서 각 이미지를 형상화, 추상화한 도형을 만들었다.
또한 카드 형태를 선정하기 위해 팀원들과 이런저런 시도를 해보았다.
또한 프리셋구조를 세분화 하기 위해서 카드 칩에 들어갈 내용을 제작, 기획하였다.
앞에 문제 정의 과정에서 시간을 많이 소비했기 때문에
먼저 해야할 것들을 적고 각자가 잘 할 수 있는 부분을 분담해서 작업하였다.
나는 로고랑 들어가는 일러스트를 맡았다.
먼저 팀이 생각하는 방향성을 통합하기 위해서 로고 무드보드를 만들어서 레퍼런스를 모았다.
그리고 추가적으로 레퍼런스를 찾아보면서 우리팀의 방향과 어울리는 로고 아이디어를 구상하였다.
여러가지 시안을 일러스트로 제작하여서 팀원들의 의견을 주고 받았고,
그중에서도 서로 껴안는 듯한 형태의 부드러운 형태의 로고가 우리 팀의 방향성과 잘 맞는다는 평을 듣고 채택되었다.
그 다음 여러가지 컬러를 적용해본 후 로고를 확정지었다.
마찬가지로 일러스트도 먼저 레퍼런스 조사부터 시작하였다.
유아이볼에서 온보딩 화면을 여러가지 찾아보았다.
그리고 옛날에 학교에서 그래픽 디자인할 때 표현 기법도 조사했던 것이 생각났다.
표현기법도 조사해서 팀원들과 공유하면 결과물을 예상할 수 있어서 방향성에 맞게 작업할 수 있을 거라고 생각이 들었다.
팀원들이 다 마음에 드는 결과물을 만들고 싶어서 진행 과정을 계속 공유하였다.
각 화면마다 2~3개의 스케치를 진행하였고 그 중에서 선택된 것을 일러스트로 작업하였다.
5/7
화면 디자인 작업 시작
내가 일러스트를 작업하고 있는 동안 다른 팀원인 유현님과 연주님이 컴포넌트를 만들어주셨다.
만드신 컴포넌트를 통해서 온보딩부터 히스토리까지 차근차근 UI를 만들어가기 시작했다.
처음에는 다크모드가 아니었지만 감성적인 느낌을 위해 그라데이션이 많이 넣으면 UI가 흐려질까봐
다크모드로 진행하기로 하였다.
온보딩 화면
수많은 고민의 흔적이 보이는 홈화면..
감성적인 인터렉션을 추가해서 편지를 터치하게끔 유도하였다.
카드를 열면 답장할 수 있게끔 설정하였다.
히스토리 플로우
기획하면서도 복잡하고 나중에 디자인하면서도
비슷비슷하게 생기고 뭐가 많아서 그런지 헷갈렸다.
보기만 해도 복잡..
히스토리와 디자인 시스템 정리
나는 일러스트를 수정하면서 전체적으로 UI를 다듬는 역할을 하였다.
5/8
디자인 마무리, 프로토타입 준비, 튜터님 피드백, 장표 제작 시작
연주님이 만들어주신 스플래쉬 화면.. 굿
sns로그인은 원래 조금 더 아래쪽에 할까 했는데
연주님이 엄지존 생각하면 조금 위가 좋겠다고 하셔서 저렇게 되었다.
이렇게 한 뒤 프로토타입까지 연결하였다.
연주님이 프로토타입 연결을 잘하셔서 연주님이 주로 도맡아서 하셨다.
이 상태에서 튜터님께 피드백을 받았다.
피드백을 받은 뒤 나는 일러스트의 색을 수정한 다음
다른 팀원들과 함께 텍스트나 다른 요소들의 위계를 맞췄다.
장표를 팀원분들이 만들기 시작했을 때
내가 맡아서 했던 부분 장표를 만들기 시작했다.
일단 브로슈어에 들어갈 내용이 우선이었기에 배치만 해두었다.
5/10~5/11 (주말)
대표 이미지, 장표 표지 제작
대본 작성- 모의 발표 준비
본격적으로 장표 작업에 들어가면서 목업 작업을 시작하였다.
목업은 내가 맡게 되었고
목업 소스부터 배치 컬러까지 팀원들의 의견을 듣고자 여러 시안을 만들어서 제시했고,
팀원들이 가장 마음에 들어한 것을 골라서 진행해갔다.
목업 적용 후 대표 이미지까지 제작하였다.
대표 이미지를 제작할 때 글씨 배치가 애매해서 애를 많이 먹었던 것 같다.
대표 이미지를 어느정도 구성한 뒤
나도 장표 작업에 참여하였다.
다른 팀원들이 내용을 브로슈어에서 가져와서 배치해둔 상태였기 때문에
나는 레퍼런스를 찾아보면서 디자인적으로 다듬는데 집중하였다.
그 덕에 디자인이 많이 깔끔해진 것 같다.
일단 월요일이 모의발표라서 장표를 만들긴 했는데
최종은 아니기에 내용의 흐름에 집중하였다.
'내일배움캠프 UXUI 6기' 카테고리의 다른 글
내일배움캠프 마무리-SRT UI 개선 프로젝트 (0) | 2025.06.10 |
---|---|
내일배움캠프 마무리 - 프로젝트 정리(Roomeet) (3) | 2025.06.10 |
내일배움캠프 62일차 TIL / 유저 저니맵, 솔루션 도출, 비지니스 모델, IA, 와이어프레임 (0) | 2025.04.28 |
내일배움캠프 59일차 TIL / MVP 팀 프로젝트 가설 설정, 솔루션 도출 (0) | 2025.04.21 |
내일배움캠프 TIL 57일차 / MVP프로젝트 문제정의 (1) | 2025.04.18 |