[TIL&WIL] 1주차_금요일

김민경·2025년 1월 27일

Today I learned

목록 보기

4/8

[TIL]

1. 디자인 카타

두 가지 UI를 보고 더 낫다고 판단한 UI를 선택 후 이유와 뒷받침할 근거를 찾는 과정.

에이블리와 지그재그 배송 현황 화면 어떤 이유로 보여주는 형태가 다를까요?

A 선택

이유:

그래프 형식으로 디자인, 그래프에 컬러감을 주어서 눈에 정보가 한눈에 들어올 수 있도록 함.
동일한 자세한 배송 처리 과정 하지만 A디자인 에서는 서브타이틀 텍스트 덕분에 사용자가 화면 구성을 체계적으로 이해하기 쉬움.
구매한 상품이 무엇인지 보여준 점도 사용자를 생각한 조금 더 친절한 디자인.

B 선택하지 않은 이유

체크리스트 형식
배송처리과정 같은 텍스트가 많은 화면에서는 체크리스트 형식으로 화면 구성을 하는 것 보다 시선을 끄는 강조하는 무언가가 있어야 사용자가 보기 편리할 것 같다라고 생각.

주장을 뒷받침할 근거

실제로 무신사, 쿠팡, 크림 같은 대중화 된 커머 서비스들도 그래프 형식을 사용함.

디자인 카타를 진행하면서 나의 개인적인 생각

에이블리와 지그재그의 배송현황 화면 어떤 이유로 보여주는 형태가 다를까요라는 질문에 대한 답을 해보고자 한다.
에이블리와 지그재그 모두 보세 쇼핑몰, 뷰티 브랜드를 넘어 현재는 몇몇 디자이너 브랜드까지 입점 되어있는 상태이다.
두 쇼핑앱의 가장 큰 차이점은 에이블리는 '한 가지 제품만 사도 무료배송 해드려요' 슬로건을 걸고 사업을 확장중이며, 지그재그는 지그재그만의 모델을 이용해 광고효과를 불러오고 있다.
에이블리에서는 입점 되어있는 두 세곳의 쇼핑몰에서 한 가지 제품씩만 사도 따로 배송비를 부담하지 않아도 된다. 이는 사용자 입장 측면에서는 에이블리를 이용할 가치가 충분히 있다고 판단되며, 이것이 에이블리에서 배송현황 화면에 어떤 제품이 배송되고 있는지 알려주는 이유인 것 같다.
여러군데의 쇼핑몰에서 제품들을 구매하는 사용자가 많기 때문이다.

2. 클론디자인

처음으로 클론디자인 작업에 돌입했다.
피그마 기초 강의 수강 후에 피그마 툴에 대해 잊을까봐 걱정이 되어서 진행한 작업이다.
진행하기 전에 클론 디자인에 대한 궁금점도 굉장히 많았고 기초 강의를 수강한 얕은 지식 만으로 진행해도 되는지 걱정이 되어서 오전 스크럼이 끝나자 마자 튜터님께 가서 질문했다.
진행해도 되는지 튜터님께 여쭤보니 튜터님께서는 기초 강의를 수강하면서 궁금했던 점이나 막혔던 것이 있냐고 하셨다.
이때까지 적어둔 메모장을 꺼내서 하나씩 질문 드렸다.

튜터님 QnA

Q. 아직 컴포넌트와 베리언츠의 차이점, 그리고 컴포넌트는 기능이 좋은 그룹 묶기로 이해했는데 맞을까요?

A. 피그마는 핸드오프를 위한 과정, 개발구조를 이해하면 쉬움

-> 컴포넌트는 인스턴스로 불러 오기 위해 버튼이나 앱바 같은 같은 구성요소들을 미리 작업을 해두는 것. (여러 화면에 공통으로 쓰이는 요소들)

-> 베리언츠는 매뉴얼 같은 것 버튼이라는 큰 컴포넌트 안에 다른 모양의 컴포넌트들을 더 만들어두는 것이 베리언츠

Q. 프라이머리 세컨더리 테시어리 컬러를 쓰기로 정했는데 왜 명도를 나눠서 10가지 색을 추가를 할까?

A. 프라이머리 컬러가 라이트모드 다크모드 가 두가지가 있을때는 개념이 바뀜

 - 같은명도로 하면 너무 쨍해 보일때도 있음 

 - 하나의 버튼만 존재하지 않기 때문에 토스앱을 예로 한다면 진한 파랑색 프라이머리도 있지만 세컨더리와 프라이머리 중간의 연파랑도 존재함.

명도가 차이 나지 않는 상황에서 프라이머리라는 큰 틀에서 명도만 낮춰서 자연스럽게 사용하는 것임.

Q, 클론 디자인은 폰트나 패딩값 같은 디테일 까지 똑같이 해야하나요 아니면 전체적인 느낌만 같으면 될까요?

디테일에 집착하기 보다는 어떤 구조로 레이어를 만들 것이냐가 중점. 디테일에 집착하기 보다는 화면을 어떻게 쌓아나갈 것 인지에 대해 생각하고 고민하며 작업하는 것을 추천
하나하나 텍스트 보는것 보다 화면의 레이어를 쌓는게 중요
화면 만들어주고 무엇이 어디에 배치될지 우선 자리 나누기 먼저 하기
탑, 필터 등등 컴포넌트에 필요한 것들 먼저 정하고 픽스 될 것 나누기
인포영역은 계속 오토레이아웃으로 감싸는 연습 많이 하기
상하 관계와 레이어 단계 많이 보기 → 레이어의 순서 많이 정리하고 분석해보기 뭐가 가장 위에 있을지 (스테이터스 바가 가장 우선)
탑네비 앱바, 같은 개념을 이해하면서 오토레이아웃 쌓아가기

Q. UI와 GUI의 차이점이 뭘까요?

A. UI는 정말 화면 구성하는 그 자체 어떤 레이어를 위로 쌓을 건지 계층과 텍스트 배치 같은 느낌

GUI 아이콘이나 컬러, 텍스트.

이러한 질답과정을 거쳐 튜터님께서는 해도될지 말지 고민할때는 그냥 하는게 낫다 라고 하셨다..^^

그래서 바로 진행한 클론 디자인.

KREAM 마이페이지

어떤 상황에 레이아웃을 써야하지? 이 아이콘은 어느정도 사이즈여야 하는거지? 같은 머릿속에 물음표가 계속 띄워졌다.
다들 하루에 10분씩 하는게 좋다는데 이 과정이 어떻게 10분만에 끝나지라는 생각이 들었다.
최대한 비슷하게 하기 위해서 중간정도 만들고 튜터님께 보여드렸는데 상단 메뉴바의 내 쇼핑, 내 프로필 탭은 프로퍼티 적용해서 넘어갈 수 있도록 만드는 것을 다시 한 번 얘기해주셨다.
또, 화면을 처음 구성할때 어떻게 잘라내고 시작하는지도 알려주셨는데 < 이부분이 굉장히 도움이 많이 되었다.
양이 많아도 화면을 컴포넌트 별로 하나씩 자르니 조금씩 할 만 해 졌다.
스크롤 기능은 튜터님께서 얘기 안하셧지만 하다보니 욕심이 생겨서 추가했다.
사실 보관 판매 내역 컴포넌트 밑에 고객센터, 내 보유 상품 시세 같은 것들이 더 들어갔어야 했는데 튜터님이 가르쳐 주시는대로 따라가는게 아니라 혼자 화면을 프레임, 컴포넌트, 프로퍼티를 적용하며 채워나가는게 처음이라 많이 주춤 했던 것 같다.

오늘 처음 도전한 클론 디자인이지만 하루에 1개씩, 쉬운 영역은 2개씩 꼭 해야겠다고 생각했다.

얻어가는게 많은 연습인 것 같다.

비록 탭바 프로퍼티는 내가 생각 한 대로 적용이 되지 않았지만 클론 디자인을 진행하면서 내가 강의를 들으면서 놓쳤던 점을 다시끔 깨닫고 주말에 어떤 부분을 더 공부 해야할지 알게 되었다.

[WIL]

첫째주 목표: 피그마 기초 5주차 강의까지 완강하기

첫째주 이룬 것들

피그마 기초 강의 완강

피그마 기초 강의 과제 올 클리어

클론 디자인 1개 완성

UIUX 입문 강의 2강까지 수강

<<회고>>

- 한 주 동안 스스로에게 아쉬웠던 점

UIUX 입문 강의는 피그마와 다르게 실습 타임이 따로 없고 이론 강의라 더욱 집중 하면서 들어야하는데 무작정 틀어놓고 집어넣으려고 하니 머리에 잘 안들어왔던 것 같다.
사실 오늘 UIUX 입문 2강까지 수강했으나 TIL 작성을 하지 않은 이유는 시간이 너무 없었던 나머지 1.25배속으로 들어서 더 개념이 잘 잡히지 않았던 것 같다
클론디자인 하면서 내가 프로퍼티 적용 방법을 아직 잘 모르고 있다는 점을 깨달았다.
캠프에서 보내주신 UX 서적이 도착했는데 아직 박스도 뜯지 않았다. 오늘 읽었어야 했는데 클론 디자인에 막혀 읽지 못했다.

- 한 주 동안 스스로에게 만족했던 점

디자인카타를 진행하면서 제 스스로 ui 디자인을 바라보는 시각을 넓히고 사용자의 관점에서 생각하는 힘을 기른 것 같다.
클론디자인 작업을 통해 피그마 툴에 더 익숙해 지고 있고 내가 부족한 점이 어떤 점인지 알게되었다.

- 아쉬운 점을 보완할 계획

강의를 들을 때 따로 정리를 하면서 들어야 할 것 같다. 무작정 듣는 것이 피그마 강의를 들을 때는 실습 타임에 튜터님과 같이 실습을 하면서 더 이해를 할 수 있었는데 ui 입문강의는 이론 강의라 무턱대로 들으니 개념들이 머릿속에서 날아다니기 때문에 다음주 부터는 강의를 들으면서 따로 정리를 해야할 것 같다.
피그마 강의 복습하면서 내가 피그마에 대하여 부족한 점을 채울 것 이다.