[UXUI] 부트캠프 23일차 - 사용자에 의한 사용자를 위한 디자인

Like

◆ 좋았던 점

- 리디자인하는 데 집중도가 높아졌다

역시 리서치보다는 리디자인이 더 재밌는 것 같기도 하다. 리디자인할 때는 일단 시간이 더 빨리가고, 손이 바빠진다. 피그마를 사용하는 것도 어느정도 익숙해져서, 이제 머릿속에 떠오른 기능은 ChatGPT한테 조금만 자문을 구하면 금방 어떻게 만들면 될지 감이 잡힌다. 리서치는.. 데이터 기반으로 디자인하기 위해서 진행하는 수단 같은 것이다. 그 자체로 재밌지는 않다. 그 데이터 속에서 어떤 인사이트를 발견할 때야 비로소 재밌는 것이지. 암튼 리디자인할 때 더 사고를 넓게 열어둘 수 있어서 좋다. 

---

 

Learn

◆ 프로젝트 진행상황

1차 리디자인을 마쳤다. 사실 리디자인을 했다기에는.. 일부 중요 요소만 기획안대로 변경하고 디자인은 거의 기존과 동일하게 가져간 것이지만. 내일은 다른 앱 서비스에서 레퍼런스를 찾아서 디자인 스타일까지 바꿔볼 예정이다. 이 프로젝트에서 제일 어렵고 재밌는 부분이 될 것 같다.

 

- 오늘의 진척상황

1. 메인페이지 리디자인 레이아웃 구성하기

 

사용자들에게 앱이 개인화되어있다는 점을 어필하기 위해 메인페이지에 '아이디어/큐레이션' 섹션을 포함했다. 그러기 위해서는 길다란 메인페이지를 3등분해야했다. 1. 아이디어/큐레이션 / 2. 세일/프로모션 / 3. 신제품/이벤트 섹션으로 나누었다. 각 섹션에 포함되는 내용은 아래와 같다.

 

1. 아이디어/큐레이션 - 이케아 제품 사용자의 포토후기, 사용자가 자주 본 상품, 사용자의 인구통계학 정보를 입력하면 유사한 배경을 가진 사용자의 고민을 보여주어, 해당 고민과 특정 제품을 연결해 보여주는 파트, 사용자가 자주 본 제품과 어울리는 큐레이션 콘텐츠로 구성되어 있다.

2. 세일/프로모션 - 서비스가 개인화되지 않았을 경우, 사용자들이 제일 관심가질 만한 파트를 2번째에 배치했다. 기획 특가를 소개하는 메인 배너, 사용자와 가장 가까운 매장에서 잘 팔린 제품 카탈로그, 기획 특가를 소개하는 서브 배너, 사용자가 최근에 본 제품 중에서 세일하는 제품 카탈로그로 구성되어 있다.

3. 신제품/이벤트 - 이 부분은 이케아가 소비자한테 제일 보여주고 싶은 섹션일 것 같다. 그래서 3번째에 두는 게 마음에 걸렸으나, '개인화'라는 특장점을 살리기 위해 + 사용자가 보고싶어하는 정보를 우선 배치하기 위해 순서를 다시 바꾸진 않았다. 신제품 소개, 기획전, 앱 내 이벤트, 오프라인 매장 이벤트로 구성되어 있다.

 

출처(우) : ONE SHARED HOUSE 2030

내가 주력으로 밀고 싶은 리디자인 요소는 1번 섹션에 포함시켰던 '고민과 제품을 연결하는' 콘텐츠다. IKEA의 디자인 스튜디오였던 SPACE10 과 디자인 스튜디오 'Anton & Irene'의 합작으로 만들어진 'ONE SHARED HOUSE 2030' 의 'RESULTS' 페이지를 참고했다. 해당 포맷을 빌려왔을 뿐 아니라, 데이터도 이케아에서 활용할 수 있다면 인구통계학 정보에 따른 사람들의 주거 선호도나 니즈를 반영하여 제품을 추천해주면 좋겠다 싶었다.

 

이케아 앱의 사용자는 자신의 연령대, 성별, 가구 형태, 거주 국가를 선택하면 해당 특성을 가진 사람이 제품을 고민하기 전후로 어떤 고민을 많이 했었는지 알게되고, 본인도 동일한 고민을 했다면 그에 공감할 수 있을 것이다. 이러한 공감이 추천 제품을 더 친근하게 느끼도록 할 것으로 예상한다.

 

2. 리뷰 페이지 기능 변경 및 추가

설문조사를 했을 때, 앱에 방문하는 이유로 '사용자 후기를 보기 위해서' 라고 답한 응답자가 과반수 이상이었다. 이케아 앱의 사용자 후기는 모두 줄글로 되어 있어서, 가독성이 그닥 좋지 않을 뿐더러 '가구'를 전문적으로 판매하는 브랜드 답게 사용자가 진짜 원하는 후기는 실물 사진이라 판단하여 '포토리뷰' 기능을 추가하려 한다. 그 밖에도 여러 부분을 수정했는데 아래에 적어두겠다.

 

1) 리뷰 작성 시, '제품의 가장 큰 장점은 무엇인가요?', '제품을 통해 어떤 문제를 해결했나요?', '제품을 사용하고 든 감정은 어땠나요?' 라는 질문에 대해 본인이 생각하는 키워드를 선택하도록 구성했다. 기존에는 '디자인', '설치/조립의 편의성', '가성비' 등 5가지 키워드에 각각 별점을 매기는 형식으로 리뷰가 구성되어 있었다. 그런데 제품을 사용하고 난 다음의 감상을 별점만으로 평가하기에는 구체적이지 못하다는 생각이 들었다. 게다가 사람마다 별점을 매기는 기준이 다르므로, 결과적으로 나온 숫자가 객관적으로 옳을 것이라는 판단도 하기 어렵다. 물론 키워드를 선택하는 것도 주관적이나, 리뷰를 읽는 사용자들이 제품을 구매한 뒤 자신이 느끼게 될 감정을 미리 파악하게 한다는 점에서 질문별 키워드를 고르는 것으로 바꾸었다.

 

2) 1번과 연계하여 리뷰 메인 페이지에는 각각의 키워드를 얼마나 많은 사람들이 선택했는지 보여주는 Rating Bar 를 두었다. 이러한 형식은 네이버지도의 리뷰에서 따왔다. 사용자가 제일 많이 선택한 키워드들을 통해 제품의 분위기를 파악할 수 있다.

 

3) 원하는 리뷰를 확인할 수 있도록 리뷰 필터를 만들었다. 기존에는 '정렬' 만 있어서, 별점높은순/별점낮은순/최근등록순/오래된순/도움이 많이 된 순 으로만 나열해서 볼 수 있었다. 필터를 추가해서 별점/제품옵션을 본인이 선택하여 구매하려는 제품에 대해 더 간편하게 알 수 있게 된다. 

 

4) 마지막으로 리뷰에 포토를 삽입할 수 있는 구역과 리뷰를 작성하면 '헤이포인트'를 준다는 안내 문구, 그리고 리뷰 작성란에 사용자들에게 도움이 될 만한 리뷰를 유도하는 질문을 삽입했다. 이 요소들은 올리브영의 리뷰창을 레퍼런스로 삼아 만들었다.

 

3. 배송/결제 페이지의 복잡함 줄이기

 

배송페이지는 총체적 난국이었다. 일단 중복되는 정보가 너무 많았다. 어느 곳에는 배송 기간이 1~3일 추가로 소요된다고 하는데, 어디에선 배송일이 3~14일이 걸린다고 하는 것 아닌가. 이렇게 되면 출고 예정일을 본인이 원하는 일자로 선택하더라도 배송이 언제 올 지 알 수가 없는 노릇이었다. 

 

따라서 배송 시스템을 바꿀 수 있다고 가정하고, 사용자들이 본인이 '배송 받을 날짜'를 직접 고르게 하려 했다. 기존에는 바를 눌러서 나오는 페이지에서 일정과 시간대를 선택할 수 있었던 반면, 새로운 디자인으로는 일정을 가시적으로 선택할 수 있도록 달력을 삽입했고, 그 아래에는 시간대를 배치했다. 

 

생각해보니 부피가 큰 제품들은 일자가 뒤로 밀릴수록 배송비가 저렴해지는 것 같던데, 최상단에 있는 버튼에서 '가격' 부분은 제외하고, '배송비 + (가격)' 부분을 시간 밑에 추가해야겠다.

 

다음으로는 3~4p에 걸쳐 진행했던 결제페이지를 1p로 축소하는 작업을 했다. 그래봤자 결제수단 선택하는 창으로 이동할 필요 없이 메인 페이지 하단에 함께 붙여 넣은게 전부지만. 결제할 때 기프트카드 쓰는 게 어렵다는 부정리뷰도 참고하여 기프트카드와 헤이포인트를 결제 단계에서 쉽게 사용할 수 있게끔 주문요약 상단에 집어넣었다.

 

- 내일 할 작업

1) 리디자인 요소 레퍼런스 찾기 (1시간30분)

2) 리디자인 구체화하기 (4시간)

3) 리디자인 피드백 받기 (30분)

4) 피드백 기반으로 수정하기 (2시간)

 

◆ 알게된 점

1. 피그마로 달력 만들기

 

1) 달력의 배경이 될 빈 프레임 생성 -> Auto Layout 걸기

2) Horizontal 프레임 만들어서 년/월 삽입하기

3) 또 한 번 Horizontal 프레임 만들어서 레디우스 값 먹인다음 -> 일~토 요일 입력

4) 달력의 숫자를 표현하기 위해서 베리언트 생성

- 제일 먼저 작은 사각형 프레임(36x36px) 에 Auto Layout 걸고 숫자 텍스트 삽입

- 상황별 타입 만들기: 가능/가능(휴일)/불가능/불가능(휴일)/비어있는 상자/선택됨

5) 생성한 베리언트 중 디폴트 상자를 7x6으로 입력하고, 실제 달력에 맞춰서 숫자를 입력

6) 임의로 각각의 날짜박스 상태 변화시키기

 

---

Lack

◆ 개선할 점과 개선 방안

- 프로젝트 일정 관리가 더 필요함

언제부턴가 '오늘의 작업'이라고 적어둔 상자에 별 신경을 쓰지 않게 됐다. 내가 뭘 하기로 했든, 내 템포에 맞춰 작업량을 수정했기 때문이다. 그러다보니 프로젝트가 이틀밖에 남지 않은 이 시점에서 또 조급함이 드는 것이다. 작업물을 볼 때마다 해야할 작업은 더 많이 보이는데 시간은 한정되어있으니... 선생님 말씀을 듣고 우선순위를 세워서 리디자인 한 페이지를 덜어내서 그나마 다행이다. 

-> 다음 프로젝트때는 프로젝트 전체 타임라인을 먼저 짜봐야겠다.

---

 

Long for

◆ 나의 목표

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

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

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

 

---

 

Loll

'서울 자가에 대기업 다니는 김부장 이야기' 8화를 보고 마음이 착잡해졌다. 대기업 나온 사람도 저렇게 홀대받는데 난 나중에 나이들면 어떻게 될까 싶어서. 내가 내 실력을 충분히 키워두지 않으면 비참한 신세가 될 것만 같았다. 그래서 빨리 취업하고 싶다는 생각이 간절해졌다. 취업이 빨리 되지 않을 것에 대비하여 대학원도 이제 슬슬 알아봐야할 것 같다. 마음이 조급해져서 링크드인을 켜고 가고싶었던 학교에 다니는 외국인 학생분에게 메시지를 날렸다. 해당 대학원 링크드인 계정에도 문의를 넣어두었다. 그리고 요즘 개인 프로젝트로 이케아 리디자인을 하다보니 이케아에 가고싶다는 마음에 커져서, 이케아 코리아에서 근무하시는 몇몇 분들의 링크드인에도 커넥트를 신청해두었다. 진짜 가고싶다 이케아 !!