UXUI 인턴의 리뉴얼 디자인2 [인턴 4주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

---

 

안녕하세요

벌써 인턴 프로그램의 절반이 지나갔습니다

4주 차를 마치고 왔어요!

 

저는 이번 주 내내 코감기&중이염 때문에

꽤나 고생했어요

독감이 유행이라는데 다들 조심하시길...

 

이번 주부터는

PC 리뉴얼 디자인을 마무리하고

Mobile 작업을 시작했습니다

 

4주 차 정리 갑니다~

 

 

---

 

 

Week 4

 

11.17(월)~11.18(화)

 

 

월요일에는 출근하자마자

리뉴얼 작업 이전에

정관 페이지 개선한 내용도

대표님께 컨펌 부탁드렸어요

 

 

[필요서류] 페이지도 작업 완료하고 컨펌이 났어요!

 

 

PC 리뉴얼 마지막 메뉴인

[비용 안내서] 메뉴는 Input이 많이 들어가기 때문에

멘토 님과 같이 리뷰했어요

+++

멘토님 왈, 원래 디자인 작업하면서

Input이 가장 어렵다고해요

 

제가 작업하면서 중요하게 생각했던 포인트는

 [ Input Field를 최우선으로 두고 작업하기 ]

ex) 체크박스도 선택된 상태가 명확하기 인지되도록 수정,

기존에는 없던 플레이스홀더를 추가해서 어떤 정보를

입력해야하는지 직관적으로 인지할 수 있도록 돕기

 

사용자가 인풋과 관련해서 어떤 상태인지,

어떤 정보를 입력하고, 어떤 방식으로 입력해야하는지

여러가지 경우의 수를 고려해야해요

 

그래서 멘토님이 작업하기 어렵다고 하신게 아닐까 싶어요

아래의 최종본으로 컨펌이 났습니당

 

 

 

 

+++

다음 주에 인턴 수당을 받기 위해서

멘토님께 서명 요청 드리고

출근부&종합보고서도 제출했어요

종합보고서 일부 발췌

 

 

화요일 점심~

 

 

---

 

11.19(수)~11.20(목)

 

 

 

PC 버전 리뉴얼 디자인을

대표님께 컨펌 요청 드리기 위해

작업을 정리해달라고 하셔서

아래와 같이 섹션 안에 정리했어요 ㅎㅎ

 

딱 마감날에 맞춰서 진행되니 뭔가 짜릿...

 

 

마지막으로 작업한 [비용 안내서] 메뉴를

바로 Mobile로 베리에이션하는 작업을

시작했어요

 

1차 시안 작업 후 피드백을 받았는데요

제가 간과한 부분이 있었어요

PC에서의 디자인을 Mobile로 바꿀때

크기가 작아지는 폰트, 간격 등은

어느정도 규칙화가 필요하다는 점...!

 

저는 그 부분을 생각하지 않고

임의로 작업해서 그런지

고칠 부분이 정말 많았어요 ㅠ.ㅠ

 

멘토님이 알려주신 Tip

 

피드백 주신대로 고치면서

폰트 사이즈와 간격에 대한 규칙을 정리했어요

PC를 기준으로 Mobile 작업의 에셋/규격을 정리해주는 플러그인이 있으면 참 좋겠다.... 혹시 아시면 댓글 남겨주세용!

 

최대한 위의 규칙을 맞춰서 작업을 진행했어요

 

***

특히 요소끼리의 세로 마진은

PC에서의 수치 그대로 가져가야 함

***

 

+++

 

줄바꿈은 디자인하는 화면에 맞게

변형이 가능합니당

 

 

[헬프미 소개] 메뉴도

Mobile로 작업 시작했는데,

역시 유념해야할 부분이 많았어요

 

헷갈리니까 반영된 피드백은

✅ 표시하면서 진행했어요 ㅎ

 

목요일 오후까지

1. PC to Mobile 규칙 정리

2. 소개, 비용 안내서 90% 완성

요렇게 했구요

 

 

수요일, 목요일 점심!

 

 

 

---

 

 

11.21(금)

 

금요일에는 [빚 상속] 메뉴 Mobile

1차 시안을 작업했어요

(+ 소개, 비용 안내서 디테일 수정)

 

Mobile 작업하면서 느낀 점인데,

PC 작업에서 디자인적으로 크게 바뀌는 건 없고

"일정화된 규칙을 가지고 작아진 화면에 맞게 재구성한다"의

목적을 가지고 작업하면 되는 것 같아요

중간중간 보기 좋게 줄바꿈하거나 일부 요소만 바꾸는 거죠

 

 

 

금요일 점심 - 치킨 파니니말고 소시지 파니니도 맛있어요

 

 

---

 

 

인턴 기간의 절반을 지나왔으니

지금까지 작업하면서 느꼈던 점을 정리해볼게요

1. 내가 어려워하는 부분
 a. 줄글 형태의 디자인을 지루하지 않게 바꾸기 (회사 서비스 특성상 보수적이고 딱딱한 이미지가 강해서
     내가 의도한대로 레이아웃이나 분위기를 바꿔도 될지 모르겠다)
 b. 요소끼리의 그룹핑 (간격 띄우기 - 게슈탈트 원리 / 타이포그래피 [계층] 공부 필요)
 c. PC와 MO 사이의 간극 이해하기 (이것도 계속해봐야 감을 잡을 수 있을 듯)

2. 내가 자신있는 부분
 a. 기존의 시스템을 이해하고 적용시키기 (ex. 디자인 시스템 적용)
 b. 왜 이렇게 디자인해야하는지 근거를 찾고, 의도를 설명하기
 c. 멘토의 피드백을 수용해서 빠르게 반영하기 (ex. ~부분에서는 ~하는게 효율적이다 > 이후부터는 꼭 이렇게 작업)

 

 

 

+++

게슈탈트 원리 및 UXUI 심리학 법칙

잘 정리해놓은 글을 발견해서 공유합니당

 

UX/UI 디자인에서 게슈탈트 법칙의 역할

UI·UX 디자인 스터디 - 게슈탈트 법칙으로 본 UI 디자인

알아두면 좋은 21 Laws of UX (2)

디자인의 기본, 게슈탈트 이론 – UXUI 디자인 강좌 5-10 | 디자인베이스

 

 

 

 

---

 

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.

 

 

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴