UXUI인턴의 리뉴얼 디자인3 - 기획 변경?!🤷‍♀️ [인턴 5주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

---

 

안녕하세요

밀린 5주차 정리하러 왔습니다

벌써 인턴할 시간이 얼마 남지 않았다는 사실이

믿기지 않는 중이에요...^^

언제 25일이 지났죠...?

 

이번 주는 모바일 작업의 기획이 변경되어서

반응형 > 적응형으로 작업 환경이 바뀌었어요

그래서 여태까지 한 시안들은

거의 다시 만들게 되었습니다

 

*근데 뭔가 아깝거나 허무하진 않았어요

일단 들어가는 내용은 동일하고,

디자인을 PC와 꼭 맞추지 않아도 되기 때문에

약간의 플로우와 스타일 변경만 있어서

괜찮게 느껴졌습니다 ㅎㅎ

 

---

 

 

Week 5

 

11.24(월)~11.25(화)

 

 

 

기존에 작업하던 리뉴얼 디자인 모바일 버전 작업의

1차 시안을 모두 끝내고 컨펌 요청을 드렸는데

PC 버전에 대한 최종 컨펌이 나지 않았어요

 

그래서 컨펌 기다리는 동안 새 업무를 전달받았어요

자사 서비스에 '사업자등록증' 관리 페이지가 있는데

이 페이지에 디자인 시스템을 적용시키는 업무였습니다

 

1주차 때 했던 업무랑 거의 동일했어요

그래서 익숙하고 약간은 편안한(ㅎㅎ)마음으로

작업을 시작했습니다

 

 

사업자등록정보 입력 페이지 일부

 

기존 디자인 파일을 하나하나

깨(?)보면 저렇게 텍스트/컬러 스타일이

저희 회사 내부에서 지정한 디자인 시스템이 아닌

임의의 속성값으로 지정되어 있어요

 

이거를 디자인 시스템에 정의되어있는

스타일로 모조리 바꿔주는 겁니다

헤더, 풋터, 중간 콘테이너에 들어가는 모든 요소들이

디자인 시스템에서 지정한 스타일, 컬러, 아이콘, 컴포넌트를

사용하는거죠...!

 

+++

지난번 디자인 시스템 업무처럼

단순히 옮기는 게 아니라

UI적으로 개선이 필요하다 싶은 부분도

수정하면서 진행했어요

(ex. 간격 4배수 조정, 텍스트 크기, 컬러, 레이아웃 변경)

 

 

---

 

11.26(수)~11.27(목)

 

 

 

수요일에는 12월에 올릴 채용공고 업데이트를 진행하고

화요일부터 작업했던 업무에서

사업자등록증 정보입력 기본 화면 작업을 마치고

컨펌 요청을 드렸습니다

 

 

+++

 

그리드에서 아주 살짝 어긋나게 작업이 되어 있더라고요

ㅠㅠㅠ

피드백 받고 바로 고쳐주었습니다

사실 그리드 라인에 맞추기만 하면 돼서

큰 수고가 드는 작업은 아니지만

너무 기본적인거라 좀 부끄럽져 🫠

 

 

목요일부터는 인트로에 잠깐 언급한 것처럼

상속문제 모바일 작업에 대한 기획이 변경되었어요

원래 반응형으로 작업했었는데요

(그래서 PC에서의 디자인을 그대로 가져가고,

폰트 사이즈와 세로 간격에 대한 규칙화가 필요했죠)

 

*적응형*으로 작업하게 되었습니다

 반응형은 웹이나 앱에서 가로 사이즈를 줄이면/늘리면

브레이크포인트에 맞게 콘텐츠의 배열과 레이아웃이

바뀌는데요(최대한 비슷하게 유지)

 

원래 모바일 사이즈가 기본이고,

가로 사이즈가 늘어나면 디자인이 유연하게 바뀌죠

** 근데 저는 PC를 먼저 작업하긴 했지만, 사실 반응형은

[ 모바일 > 태블릿 > PC ] 순으로 작업하는게 통상적입니다 **

 

적응형은 아예

웹 사이즈 하나, 모바일 사이즈 하나

요렇게 따로 구분해서 작업하는거라고 이해하면 됩니다

 

그래서 어느정도 서비스의 플로우나

디자인이 바뀌어도 괜찮아요

웹과 앱은 각 사이즈에 맞춰

유저 플로우랑 니즈가 달라지기도 하니까요!

 

 

반응형 웹 디자인 vs 적응형 웹 디자인: 어떤 유형을 선택해야 할까?

 

"반응형 웹 디자인은 감지된 화면 크기에 따라

자동으로 페이지가 재배열되는 유동적인 접근 방식입니다.

반면, 적응형 웹 디자인은 브라우저가 주어진 플랫폼에 맞춰

특별히 생성된 레이아웃을 불러오는 웹 디자인 유형입니다."

 

반응형과 적응형의 차이에 대해 잘 설명한 글이 있어

공유합니다~

 

 

---

 

 

11.28(금)

 

 

PC 버전의 GNB/LNB와 모바일에서의 LNB

 

 

 

적응형으로 기획이 바뀌면서 기존의 모바일 서비스를 참고해서

디자인 개선을 진행했어요

근데 제 예상과 다르게 시간을 많이 잡아먹은 부분이 있었어요

 

 GNB와 LNB의 유무와 형식 때문에 고민이 많았어요

*GNB는 대제목, LNB는 소제목이라 이해하면 편합니다

GNB에서 depth가 하나 있으면 LNB인거죠*

 

웹 사이즈에서는 비교적 공간이 넓기 때문에

상단 Nav Bar에 더불어

바로 아래에 Tab 형식으로 LNB가 들어왔어요

 

즉 사용자가 어떤 경로로 들어왔는데 한눈에 알 수 있는 반면,

모바일은 공간이 한정적이라서

한 화면 안에 GNB와 LNB가 모두 들어가기 어렵기 때문에

 

1. 홈에서 GNB - [비용] 메뉴로 진입

2. LNB(진입 메뉴) - [상속포기 비용] 진입

3. 상속포기 비용확인

4. Tab에서 다른 카테고리로 바로 이동

 

이런 플로우로 확정짓고 디자인을 했습니다...ㅎㅎ

사실 2번이 없어지고 4번을 통해 다른 카테고리로

바로 이동하게 하면 좀 더 간략화할 수 있겠지만,

기존 모바일이 2번을 유지했던 이유는

'상황에 대한 설명'이 필요했기 때문이라고 추측했어요

 

 

*위 이미지 참조

'0000 비용' 아래에

'~~~ 하는 경우'라고 설명을 덧붙여서

사용자가 '아, 내가 이런 케이스니까

0000 비용 메뉴를 클릭하면 되겠구나!'라고

생각할 수 있게 도와줬던거죠

 

 

 

모바일 상단의 App Bar에 접속중인 메뉴와

(ex. 이미지의 '비용')

바로 아래에 Tab 형식으로 LNB를 넣어주었습니다

(ex. 이미지의 '상속포기...한정승인...특별한정..')

 

---

 

이렇게 5주차를 정리해보자면

[ 상속문제 리뉴얼 모바일 ]

반응형 -> 적응형으로 변경

적응형 - '비용' 카테고리 1차 시안 작업 완료

 

[ 사업자등록 화면 디자인 시스템 적용 ]

정보입력 화면 1차 시안 작업 완료

 

크게 두 가지 업무를 진행했습니다!

 

 

---

 

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

 

 

 

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