[UXUI] 부트캠프 22일차 - 나: 저 이제 피그마랑 친해요 / 피그마: ???

 

Like

◆ 좋았던 점

- 오토 레이아웃을 능숙하게 활용한다

어제까지 리서치를 완료했고 오늘부터 본격적인 리디자인 작업을 시작했다. 다만, 클로닝해뒀던 페이지에 더해 새롭게 디자인할 페이지들이 늘어났기 때문에, 그 페이지들을 다시 클로닝하는 중이다. 그러는 과정에서 오토 레이아웃을 다소 능숙하게 사용하고 있는 나를 발견했다. 차이가 있는 그룹 간의 관계를 정의하는 게 오토 레이아웃의 본질이라고 생각하는데, 각 관계의 구분선을 전보다 더 빠르게 파악할 수 있게 된 것 같다.

 

- 컴포넌트의 재사용성에 관해 고민한다

클로닝할 때 어떻게 만들면 하나의 컴포넌트를 다방면으로 활용할 수 있을지를 고민하게 됐다. 원래도 그러지 않은 것은 아니었으나, 프로퍼티의 변주를 주는 데에 있어서 어떻게 설정해야 개발 단에서 데이터를 불러올 때 적재적소에 입력될 수 있을지를 고민해보게 되었다.

 

오늘 이케아 앱의 '리뷰 페이지'를 클로닝하는데, 국내 리뷰와 해외 리뷰 박스가 비슷해보이면서도 분명한 차이점이 있다는 걸 발견했다.

 

1. 국내 리뷰에는 상품평의 국가와 사용자 국가가 동일하다. (제일 상단 '대한민국'의 상품평 = 2025.10.15 • '대한민국') 반면, '다른 국가의 상품평'의 경우에는 상품평 국가가 '다른 국가' 로 통일되어 보여지는 반면, 사용자 국가는 실제 국가를 명시하고 있다는 차이점이 있다. 그래서 컴포넌트를 제작할 때, 국내 리뷰 박스의 국가들은(상품평/사용자 국가) 한 번만 입력해도 동일하게 입력될 수 있도록 설정했다. 해외 리뷰 박스에는 '다른 국가의 상품평' 이라는 타이틀을 고정하고, 사용자 국가에만 변주를 주었다.

 

2. 국내 리뷰 박스와 해외 리뷰 박스를 각각 컴포넌트로 생성해서 베리언트로 묶어야겠다는 생각을 하게 됐다. 이러한 판단을 내리게 한 결정적인 단서는 해외 리뷰 박스에만 '원문 보기 • 번역 출처: 일본어' 가 삽입되어 있었던 것이다. 따라서 두 박스를 베리언트로 묶고, 각 컴포넌트 명을 'CT(Country)=True -> 국내 리뷰' / 'CT=False -> 해외 리뷰' 로 설정하여, 스위치를 통해 국내/국외를 구분할 수 있도록 만들었다. 이제 리뷰창을 몇 백 개 만든다 하더라도, 그냥 같은 컴포넌트 복붙한 다음, 국내/해외 리뷰 나누고, 해외 리뷰에서는 스위치만 끄면 된다.

 

3. 아, 이건 국내/해외 간의 차이는 아닌데. '대한민국의 상품평' 이라는 타이틀은 해당 국가의 첫 번째 리뷰에만 입력되고, 나머지엔 공란으로 비워져있다는 원칙을 발견했다. 그래서 Appearance 에서 타이틀 제시 여부를 결정하는 스위치를 만들었다. 그렇게 해서 클릭 한 번으로 특정 국가의 2번째 리뷰에서는 타이틀을 제거할 수 있게 되었다.

 

그 외에도 숫자가 입력되어야 하는 부분은 모두 숫자만 입력할 수 있도록 텍스트를 분리해서 삽입했다. 예를 들어, '2025.10.15' 와 같은 날짜 형식이 리뷰에 기록된다면, '2025', '.', '10', '.', '15' 를 각각 입력해서 년/월/일에만 변주를 주면서도 같은 형식의 리뷰 상자를 사용할 수 있게 했다. 그리고 프로퍼티를 설정할 때, 년은 'YYYY', 월은 'MM', 일은 'DD' 를 입력해서 변주 가능한 텍스트라는 걸 직관적으로 알리고자 했다.

---

 

Learn

◆ 프로젝트 진행상황

개선해야할 페이지를 추려내고, 클로닝을 하는 중이다. 어차피 리디자인 과정에서 바뀔 인터페이스라.. 완전히 클로닝할 필요는 없다고 생각하는데.. 문제는 UI Kit 를 너무 대충 만든 것 같아 자꾸 신경쓰인다는 것이다. 이렇게 되면 리디자인 때 기존 컴포넌트를 사용하려 하면 분명 문제가 생길 거라고 생각했다. 그래서 UI Kit 와 폰트 시스템을 다시 정리할 계획이다. 폰트 시스템은 이미 완성했고, 라이브러리에 각각의 쓰임새에 관해 코멘트만 달아두면 끝이다. 주말동안 클로닝을 진행해서 UI Kit 를 재정비하고, 기존 컴포넌트 + 개선안 = 새로운 컴포넌트로 디벨롭해보려 한다.

 

- 오늘의 진척상황

1. 앱 페이지 마진 분석

 

사실 이건 클로닝때 했어야 하는 단계인데... 나는 그냥 포폴 패키징 용으로 해야하는 건 줄로만 알았던 마진 분석이 실은 클로닝을 위함이었다는 걸 알게되었다. 그래서 안 할 수가 없었다. 왜냐면 내 클로닝이 너무 정교하지 않다고 생각했기 때문이다. 마진 분석을 다시 시도하는 건 좋았는데, 요소가 너무 많으니 어디서부터 어디까지 마진값을 정의해두어야 하는지 알 수가 없었다. 그래서 위 사진에서도 볼 수 있듯이 한 페이지에 엄청 많은 박스를 활용해서 마진값을 나눴다.

 

다른 분들 마진 분석하신 거 봤을 때는 이렇게까지 세세하게 나누지 않으셨던 것 같은데.. 내가 잘못 생각하고 있는건지, 아니면 이케아 앱이 유독 이런건지 궁금했다. 

 

분석한 마진 값은 섹션 별로 컴포넌트를 생성하고, 그 안에서 요소와 요소의 거리를 측정할 때 사용했다. 확실히 마진/갭 값만 정확하게 주어도 클로닝이 더 정교해보였다. 그치만 정교함에 집착하다가는 시간을 다 날려버릴 수도 있으니.. 요소들 간의 관계에 집중해서 클로닝 화면을 만든 다음, 정교화 작업은 시간이 남으면 더 손 보는걸로 하자.

 

2. 폰트 시스템 재정비

지금 시점에서 '폰트 시스템'을 정비했다고 하면 분명 선생님들께서 걱정하실 것 같은데.. 각각의 폰트가 어떤 섹션에 이용되는지 구체적으로 정의내리지 않고 클로닝을 시작하다보니, 어떤 상황에서 어떤 폰트를 넣어야할지 고민하는 과정에서 시간이 많이 소요되었다. 그래서 아예 시간이 조금 걸리더라도 다시 폰트 시스템으로 돌아가서 재정비하는 게 맞다고 생각했다. 그래도 리서치 과정은 끝냈으니 진도에서 아주 많이 뒤쳐진 건 아니라고 생각한다. 그리고 주말간 클로닝 완성 + 리디자인 페이지에서 개선할 요소 대강 만들어두기(월요일에 피드백 요청 예정) 를 할 것이기 때문에 정해진 시간 안에 프로젝트를 마무리할 수 있을 것이라.. 생각한다. (포폴 패키징은 따로 시간내서 해야할듯...)

 

폰트 시스템을 만들다보니 갈등되는 상황이 한 두 가지가 아니었다. 그 중에서 날 제일 골때리게 했던 건 '자간과 행간' 이었다. 같은 스타일/굵기/크기의 글자여도 자간과 행간이 다른 경우가 있었다. 어떤 요소는 1문장 이상으로 쓰여서 행간까지 고려해야 했고, 어떤 요소는 짧게 몇 단어로 쓰여서 행간을 굳이 고려하지 않은 탓이었다. 이런 경우에는 스타일을 2개로 나눠서 정의해둬야 하나 고민했는데... 안 그래도 많은 스타일을 늘려서 좋을 게 없다고 생각해서 하나로 통일해 두었다. 행간을 나눠야하는 상황이 오면 그때 스타일을 풀고 수정해야지.

 

두 번째로 골때리는 상황은 이케아 앱에서 두 가지 이상의 폰트가 사용되고 있다는 점이다. 내가 추론한 것은 두 가지 (Noto Sans KR, Noto IKEA Latin) 인데, 클로닝을 하다보니 다른 한가지 폰트가 더 있는 것 같다. 뭐 여기까지는 오케이. 한글은 KR로, 영문은 Latin 폰트로 쓰겠거니 하고 클로닝을 하는데, 한국어인데도 Latin 폰트가 사용된 곳이 더러 있는 것이다. 아니.. 이사람들 앱을 왤케 대충 만들었나? 속으로 욕하면서도, 앱을 처음에 만들었을 때는 Latin 폰트를 사용했는데, 한국에서 런칭하면서 KR 폰트를 덧붙여 사용하게 됐겠거니.. 하며 마음을 가라앉혔다. 사실 폰트 뿐만 아니라, 앱 내에서도 유사한 페이지들끼리 마진이 서로 다른 점을 발견하고 정말.. 분노했다. 이렇게 앱이 통일성이 없을 줄이야. 나를 고용해주면 앱 통일성을 기반으로 싹 다 갈아엎고 싶다고 생각했다.

 

3. 리뷰 페이지 클로닝

 

인테리어 앱 사용에 대한 설문조사를 진행했을 때, '사용자 후기를 보기 위해서' 앱에 방문한다는 응답자가 전체에서 약 59% 정도 되었다. 그만큼 가구를 구매하는 데 결정적인 역할을 하는 건 '후기' 라고 판단했다. 그래서 사진 이미지 없이, 문자로만 구성된 이케아 앱의 리뷰 페이지를 직관적으로 가구를 사용한 이후의 후기를 알 수 있도록 바꿔보려 한다.

 

클로닝한 화면을 보니.. 여전히 폰트 크기가 정확하지 않은 것 같다. 다른 페이지도 다 만들고 난 다음에 수정해야겠다.

 

- 내일 할 작업

1) 배송/주문 페이지 클로닝 완료 (2시간)

2) 마이페이지 클로닝 완료 (2시간)

3) UI Kit 재정비 (2시간)

4) 21일차 회고록 적기 (1시간30분)

 

◆ 알게된 점

1. 타이포그래피의 계층 구조별 명칭

https://brunch.co.kr/@chulhochoiucj0/35

모바일 UI 디자인 기본 요소 - 타이포그래피 계층

폰트 시스템 작성할 때, 각각의 폰트 스타일이 페이지의 어느 부분에서 사용되었는지를 기록하려던 참이었다. 분명 실무에서 쓰는 용어가 있을 것 같은데 그에 대한 지식이 전무해서 정보를 찾아보았다. 내가 잘못 검색한 것인지, 글자의 위계와 명칭을 설명하는 글을 써주신 분이 거의 없었다. 유일하게 최철호 디자이너님의 글을 브런치에서 찾아 폰트의 위계에 대해 알게 되었다.

 

1) Display - 페이지에서 제일 강조되어 보이는 요소. / ex. 날씨 정보 페이지에서 '오늘의 기온 00℃'

2) Heading - 문단 혹은 페이지의 제목 / ex. 아티클 페이지의 타이틀

3) Title - 페이지 내의 작은 섹션의 제목. Heading 보다 크기가 작음. / ex. 카탈로그의 '제품명', 사이트 맵에서 각각의 카테고리를 묶는 하나의 그룹 명

4) Label - 버튼이나 CTA 등 사용자의 다음 행동을 직접적으로 보여주는 데 사용됨. / ex. '이벤트 참여하기' CTA 버튼의 문구

5) Paragraph - 콘텐츠 본문에 해당. 문단으로 이루어진 글. / ex. 아티클 페이지에서의 아티클 내용

6) Callout - 안내 문구 창 혹은 사용자에게 팁을 전하는 창에서 쓰이는 글자. / ex. 서비스 점검 안내문구 창의 내용

7) Quote - 다른 출처에서 가져온 글을 보여줄 때 사용. / ex. 트렌드 뉴스레터에서 인터뷰 응답자의 말을 직접 인용한 내용

8) Footnote - 콘텐츠의 참조 문헌이나 이벤트 페이지의 유의사항. / ex. 룰렛 돌리기 이벤트 페이지 하단의 '유의 사항'

9) Caption - 일러스트나 이미지에 짧게 덧붙이는 설명. / ex. 아티클 내 이미지 자료의 출처 표기

---

Lack

◆ 개선할 점과 개선 방안

- 프로젝트 진척 상황이 더딤

욕심일 수 있지만, 매일매일 눈에 보이는 성과가 나와서 프로젝트가 '진행된다' 는 느낌이 들길 바랐다. 그런데 어제 오늘 성과가 별로 없는 것 같아, 내가 또 뒤쳐지고 있는 것 같다는 기분이 들었다. 특히 오늘은 이미 시간이 충분히 주어졌던 클로닝 단계의 작업을 다시 끄집어와서 수정했기 때문에 더더욱 발전이 없다 느꼈다. 다른 분들은 어떻게 아시고 다들 척척 잘 해나가시는 건지... 발표 때 다른 분들의 작업물을 보고 얼마나 비교가 될지 벌써부터 걱정이다.

-> 비단 작업 시간을 잘 지키고, 작업량을 늘린다고 해결될 문제가 아닌 것 같다. 내가 왜 자꾸 생각이 많아지는지에 대해 고민해보자.

---

 

Long for

◆ 나의 목표

- 2026년 상반기에 UXUI 디자이너로 취업한다.

- 독일 대학원 / 카이스트 대학원 갈 수 있는 방법 알아보기 or 스마트홈 연구하는 대학원 알아보기

- 부트캠프에서 배운 내용 + 내가 스스로 공부한 내용을 한 눈에 볼 수 있는 데이터베이스를 만든다. (노션 활용) -> 11월 내 진행 예정

 

---

 

Loll

어제 회고록을 못 써서 자꾸 마음에 걸렸다. 그나마 다행인건 내일부터 주말이기 때문에 회고록을 쓸 시간이 충분히 주어진다는 것! 이번 주말엔 꼭 카페에 가서 작업을 해치우고 말겠다..