사실 8주 간 UX/UI 디자인 업무를 위주로 맡게 된다고 했던 회사의 공고와는 다르게 콘텐츠 디자인과 그래픽 디자인을 맡게 되었다. 애초에 회사에 개발자가 한 명도 없었다(!)

그래도 디자인에서 완전히 벗어난 업무는 아니고, 그동안 많이 해 보지 않은 분야였기에 배워가는 마음으로 임하고 있다.

❓ 그래서 뭐 하고 계세요?

크게 두 가지의 업무를 동시에 진행하고 있다.

콘텐츠 디자인 회사에서 운영하는 대안학교 학생들이 학습하게 될 마이크로러닝 콘텐츠를 제작한다.

비공개 콘텐츠여서 블러 처리했다.

주제부터 구상하는 것은 아니고, 주제와 큰 틀이 주어지면 그에 맞게 페이지 별 내용을 구성하는 것부터 시작한다. 그래서 아무리 개요가 있다고 하더라도 디자이너도 주제에 대한 리서치는 필요하다.

지금까지 제작한 콘텐츠는 대부분 IT에 관련된 주제였다. 다행히 모두 완전히 생소한 주제는 아니어서 내용 구성에 큰 어려움은 없었다. (교내 개발 동아리 시절 프론트엔드·백엔드·인프라 팀의 발표를 열심히 들은 보람을 느꼈다(!))

😊 KEEP

• 디자인에 앞서 노션으로 페이지 별로 내용을 정리하고 디자인을 시작하는 것이 큰 도움이 되고 있다. 처음에는 노션에 굳이 먼저 정리를 할 필요성을 느끼지 못했고, 피그마에서 바로 레이아웃부터 구성하는 게 효율적일 것이라고 생각했는데, 오히려 그 반대였다. 내용 정리 없이 무작정 작업하다 보니 지나치게 잦은 수정으로 전체 콘텐츠의 개연성이 떨어질 뿐만 아니라 속도도 훨씬 느렸다. 그 이후 노션을 열심히(!) 사용했던 것 같다.

🙄 Problem

• 마이크로러닝 콘텐츠는 10~15분 내로 짧게 학습할 수 있는 것이 가장 큰 장점인데, 내가 만든 콘텐츠들은 전체적으로 텍스트가 너무 많다. 특히 어린 친구들이 타겟인 만큼 긴 문장보다는 짧은 단어와 이미지가 단시간 학습에 더 효과적일 텐데, 그 점을 간과하고 있었다.

🫡 Try

• 그동안 마무리되지 못했던 학습 시리즈의 콘텐츠 디자인을 작업했다. 다음 시리즈부터는 처음부터 끝까지 온전히 내 디자인으로만 채워지게 된다. 이전 인턴 분이 작업하셨던 디자인에 갇혀 있기 보다는, 톤앤매너를 크게 해치지 않는 선에서 내가 기존 콘텐츠에서 개선하고 싶었던 부분들을 조금씩 바꿔보는 시도를 해 보고 싶다. (그래픽 퀄리티나 정보 위계질서, 곡률과 같은 것들...)

• 학생들이 콘텐츠를 보며 "어렵다", "지친다"라는 말을 하기 보다는, "너무 재미있게 읽었다"라는 말을 저절로 하게 되는 콘텐츠를 만들고 싶다. 많은 내용을 자세하게 설명하기 보다는, 핵심 내용만 정리해 콘텐츠를 구성할 계획이다. 일러스트, 도표, 그래프 등의 시각적 요소를 적극적으로 활용하는 것도 중요할 것 같다.

그래픽 디자인 회사에서 진행하는 여러 행사 운영에 필요한 포스터나 X배너, 현수막 등을 제작한다.

한 달 동안 nn장의 시안을 만들었는데 막상 통과되어 세상 빛을 본 디자인이 이것 뿐이라니!

솔직히 처음에는 스트레스를 정말 많이 받았다.

요청을 받아 서로 다른 콘셉트로 여러 장의 시안을 만들었는데 그냥 이전 인턴 분이 하셨던 디자인 그대로 텍스트만 수정하자는 피드백이 오거나, 내용이 지속적으로 추가되고 삭제되어 레이아웃부터 변경해야 할 때가 많았다. 디자인은 완료되었는데 부서 내 사정으로 제작이 취소되는 경우도 더러 있었다. (그래픽 디자인에서는 특히..) 손이 빠르지 않은 나에게는 3~5시간의 데드라인도 상당히 촉박하게 느껴졌다.

내 디자인이 그렇게 별로인가.. 라는 생각으로 새벽에 혼자 슬퍼하기도 했다.

하지만 이러면 스트레스만 받고, 발전하지도 못하니까.. 어떻게 해야 힘을 덜 들이고 빠르게 OK 사인을 받을 수 있을지를 고민해 봤다.

1️⃣ 회사가 원하는 디자인 스타일을 파악하자

다행히도 나에게는 참고 자료가 참 많았다. 이전 인턴 분이 남겨주신 디자인 파일도 있었고, 회사 곳곳에 이전에 진행했던 행사들의 포스터, 배너, 현수막, 책자 등이 남아있었다.

이런 자료들을 보면서 공통점을 찾았다. 메인 타이틀에 사용되는 그라디언트도 자주 사용되는 컬러가 정해져 있었고, 많이 사용하는 이펙트에도 공통점이 보였다. 전체적으로 회사가 원하는 디자인의 추구미(?)가 있는 듯 보였다.

회사에서 디자인을 할 때는 무작정 내가 원하는 대로 하면 안 된다는 사실을 놀랍게도 이제서야 깨달았다(!)

내가 하고 싶은 디자인은 집에 가서 실컷 하기로 하고, 회사를 위한 디자인을 할 때에는 기존 디자인의 톤앤매너를 최대한 지키기로 했다.

2️⃣ 피드백을 자주 받자

이 시기쯤 사수님께 피드백을 많이 듣게 되었다. 확실히 내가 작업하면서 보지 못했던 부분들을 세밀하게 짚어내 주셨고, 이후 개선점을 찾는 데에 정말 많은 도움을 주셨다.

• 시선의 흐름과 가독성을 다시 한 번 검토해 볼 필요가 있다.
• 포스터에서는 레이아웃으로 정보의 위계구조를 잡는 것이 가장 중요하다.
  • 메인 타이틀과 서브 타이틀이 같은 볼륨으로 있으면 안될 뿐만 아니라, 서브 타이틀이 2개 이상인 경우에는 둘 중 어느 것이 더 먼저 보여야 할 지 생각해야 한다.
• 모든 디자인에 적용되는 것은 아니지만, 이 회사에서 사용되는 디자인에는 텍스트가 잘 보이는 것을 최우선순위로 두어야 한다.
  • 텍스트 뒤에 오브젝트가 있으면, 아무리 불투명도를 낮게 해도 텍스트의 가독성이 떨어진다.

피드백을 들으며, 지금까지 요구사항을 적용하는 데에만 급급해 기본기를 신경쓰지 못하고 있었다는 것을 알게 되었다. 첫 번째 결과물이 나왔을 때 피드백을 듣게 되었고, 두 번째 결과물을 만들 때는 말씀해 주신 내용을 신경쓰면서 직접 개선해 보았다. 확실히 이전보다 많이 깔끔해졌고, '뭔가 아쉽다'라고 생각했던 부분이 '이 정도면 당당히 공개할 만하다!'라는 확신으로 개선되었음을 느꼈다.

동료 피드백도 정말 좋은 방법이었다. 지금도 매일마다 나와 같은 시기에 디자인 인턴으로 들어오신 분과 함께 서로의 시안에 대한 고민거리를 나누고, 잘된 점과 아쉬운 점을 나누고 있다.

그저 "이 부분이 좋지 않다"라고 말하기 보다 아쉬운 부분에 대한 근거를 드는 것이 중요하다고 생각한다. 에러 원인이 뭔지 알아야 코드를 고칠 수 있듯 디자인이 좋아보이지 않는 이유를 찾아야 그에 맞는 적절한 해결책을 찾을 수 있기 때문이다. 우리는 이러한 방식으로 의견을 주고 받고 있어 서로 발전하고 있음을 체감하는 것 같다.

🙂 앞으로 남은 한 달

다른 업무가 생길 것 같지는 않고, 아마도 저 두 가지의 업무를 계속 진행할 것으로 예상한다.

체감 상 세 달은 된 것 같지만 한 달이라는 짧은 시간 동안 직접 느끼고, 또 조언 받은 점들을 기반으로 어제보다 오늘 더 좋은 퀄리티의 작업물을 내는 것이 가장 주된 목표다.

회사 생활도 처음이고, 디자인으로 돈을 벌어 보는 것도 거의 처음이라 많은 것이 낯설고 어렵지만 남은 한 달도 잘 헤쳐내 보고 싶다.

성장캐가 무엇인지 보여주겠다.

새내기 정도까지 카드뉴스를 열심히 만들었던 기억이 있는데, 그때는 디자인의 'ㄷ' 정도 알던 시절이라 미리캔버스만 사용해 봐서 전문적인 교육을 기대했다.

오늘도 피그마를 사용하나 싶었지만, 예상과 달리 캔바(Canva)를 배우게 되었다.

강의 커리큘럼에는 분명 오늘 피그마라고 했는데... 한 번도 사용해 보지 않은 툴이라 조금 당황했지만, 이전에 사용했던 미리캔버스랑 크게 다른 점은 없어서 배우기에는 어렵지는 않았다.

원칙 상 온/오프 하이브리드는 불가능하지만 사정을 설명드리니 최대한 사정을 배려해 주셔서 감사했다. (물론 사전 연락과 서류 제출은 필수다) 오늘은 꽤 귀여운 ZEP타버스에서 수업을 열심히 들었다.

콘텐츠를 디자인할 때 지켜야 할 6가지 원칙

1. 정렬 맞추기 사용자의 시선은 왼쪽에서 오른쪽으로 흐르기 때문에, 왼쪽이나 가운데 정렬로 맞춰주는 것이 깔끔하다. 기본 중의 기본!

2. 가독성 높이기 수업 내내 가독성을 정말 많이 강조하셨다. 마케팅 콘텐츠에서는 화려한 디자인보다 텍스트, 즉 카피가 더 중요하다는 것을 거듭 언급하셨다. 여러 콘텐츠가 뒤섞여 있는 SNS 피드 속에서 내 콘텐츠가 살아남기 위해서는, 주요한 정보가 선명하게 나타나는 것이 중요하기 때문이다. 가독성을 높이기 위해 반드시 지켜야 할 것들은 배경 컬러와 텍스트 컬러의 대비를 신경쓰는 것이라고 한다. 연한 배경에 연한 텍스트를 사용하지 말고, 너무 난잡하고 복잡하게 여러 컬러를 사용하지 않도록 주의할 것.

3. 정보의 우선 순위 (계층 구조, 강약 조절) 정보의 우선 순위 구축을 위해서는 먼저 이런 것들을 생각해 봐야 한다.

   • 가장 중요한 정보는 무엇인가?
   • 사람들이 가장 먼저 봐 줬으면 하는 내용은 무엇인가? 이러한 것들을 생각하며 계층 구조를 잡은 후, 아래와 같이 강약을 표현하면 된다.
   • 가장 중요한 텍스트를 강하게 (큰 사이즈, 두꺼운 폰트, 포인트 컬러 사용, 디자인 요소 추가)
   • 비교적 덜 중요한 텍스트를 약하게 (작은 사이즈, 얇은 폰트, 그레이 톤 컬러 사용, 디자인 요소 덜어내기)

4. 정보를 그룹화 시켜주기 하나의 콘텐츠, 즉 하나의 카드에서 2~3가지 이야기를 하는 경우 그룹핑이 더 중요해 진다. 예를 들면, 비즈니스 관련 설명 카드뉴스에서 '비즈니스 모델' 중 B2B·B2C·B2G를 하나의 카드에서 비교해 설명하는 경우가 있겠다. 이러한 경우에는 아래와 같은 방법으로 구분이 가능하다.

   • 라인 그어주기
   • 도형 사용하기
   • 각 주제 별로 소제목과 본문의 강약 조절하기
   • 주제 별로 어울리는 그래픽 사용하기 카드뉴스는 아니지만.. 이정도의 느낌이다. 주제/내용 별로 섹션을 구분한다고 생각하면 이해가 빠를 것 같다. 교안 예시가 더 좋은데 공유 금지라 이렇게라도 설명해 본다.

5. 이미지 퀄리티 UI 시안 제작에서도 꽤 중요한 부분이다. 콘텐츠 디자인에서는 더더욱 중요할 것이다. 당연한 이야기지만, 이미지가 찌그러지거나 해상도가 떨어져서는 안 된다. 원본 이미지의 퀄리티가 좋지 않다면 다시 찍어야 하고, 내 콘텐츠와 어울리는 이미지를 찾는 것이 중요하다. 해상도 저하를 방지하기 위해서는 일단 사이즈가 큰 이미지를 찾는 것이 유리한데, 구글 이미지에서는 사이즈를 필터링할 수 있다. 개인적으로 1000px 이하의 이미지는 잘 사용하지 않는 편이다. 이미지 검색으로 '정확히 일치하는 결과'를 찾으면 사이즈가 더 큰 이미지를 찾을 수도 있다. 다들 유용하게 활용하길...

6. 폰트의 사용 지나친 장식체나 손글씨체를 남발하기 보다는 반듯하고 깔끔한 폰트를 사용하는 것이 가독성에 더 좋다. 또한 너무 많은 폰트를 사용하지 말고, 성격이 비슷한 2~3가지 폰트만 사용하는 것이 좋다.

잘 만든 콘텐츠란?

1. 높은 퀄리티의 사진을 사용하고
2. 글이 잘 읽어지며
3. 모든 장이 하나의 컨셉으로 통일감이 든다

이때 모니터와 휴대폰의 해상도 차이가 많이 나서 (2) 글이 잘 읽어지며 를 파악하기 어려울 수 있는데, export하고 모바일 확인 후 다시 작업하는 불상사가 일어나지 않기 위해서는(...) 작업 화면을 휴대폰 사이즈만큼 줄여서 글을 읽어보는 방법을 추천해 주셨다.

캔바도 피그마처럼 미러링 기능이 있으면 좋겠다고 생각해서 찾아봤는데, 일단 공개 보기 링크를 생성하고 핸드폰에서 링크를 열어보는 방법을 사용해도 좋을 것 같다. 이가 없으면 잇몸으로...

카드뉴스 실습 : 따라 만들기

캔바 작업물 바로가기 (Viewer)

첫 실습으로는 강사님의 교안을 2 페이지 정도(표지, 내지 1장) 따라 만들어 보고 이후 강사님의 템플릿에 맞춰 페이지를 직접 만들어 보는 활동을 진행했다. 케이팝이 주제라 재미있게 작업했다.

폰트는 임의로 변경해도 괜찮다고 하셔서 교안의 각진 폰트가 아닌 좀 더 둥글고 재미난 폰트를 사용해 봤다. 아무래도 케이팝 주제의 콘텐츠는 10대 소녀들이 많이 볼 것이라 생각하기 때문. 그룹명을 가장 강조하고 싶었는데, 그냥 화이트로 두니 눈에 잘 안 띄는 것 같아 약간의 디자인 요소도 가미해 봤다.

카드뉴스 실습 : 직접 만들기

캔바 작업물 바로가기 (Viewer)

두 번째 실습은 템플릿부터 직접 만들어 보는 활동이었다. 주제는 '영화, 드라마, 예능'이었고, 나는 무난하게 일본 영화를 주제로 진행했다.

만들기에 앞서 표지와 내지를 나누어 레퍼런스를 찾아 봤다. 정리하자면, 표지에서는 영화 포스터 같은 느낌을 내고 싶었고, 내지에서는 필름을 벽에 걸어두고 추억하는 듯한 느낌을 내고 싶었다.

개인적으로 영화를 고를 때 영화의 포스터나 스틸컷 이미지를 가장 중요하게 보는 편이다. 장르나 스토리도 물론 중요하지만, 이미지로 영화의 전체적인 감성을 이해할 수 있기 때문이다. 따라서 이번 카드뉴스를 만들 때도 사람들이 이미지에 집중할 수 있도록 제작했다.

표지를 만드는 데에 시간이 가장 오래 걸렸다. 어떻게 하면 더 감성적으로 보일까, 어떻게 하면 더 예쁘고 아련하게 만들 수 있을까를 한참 고민했던 것 같다. 그때 강사님의 말씀이 귀에 팍 꽂혔다.

표지 작업 마치신 분들은 한 번 자신의 디자인을 검토해 보세요. 내가 만든 카드뉴스를 사람들이 읽고 싶어할지 생각해 보시면서 가독성과 카피라이팅을 다시 점검해 보세요.

이 말을 듣고 아차, 싶었다. 콘텐츠 디자인에서는 '예쁜 것'보다 '잘 읽히는 것'이 중요하다는 것을 까먹고 있었다. 그때부터 후다닥 얇은 필기체들과 흩날리는 오브젝트를 모두 걷어내고 깔끔하게 디자인을 수정하기 시작했다.

내지의 스틸컷 이미지는 여러 장을 배치하고 싶었지만, 스틸컷 이미지는 대부분 가로고 카드뉴스 사이즈는 세로형이어서 여러 장을 배치하면 이미지가 작아질 수밖에 없었다. 하지만 이번 카드뉴스의 포인트는 독자로 하여금 이미지에 집중시키는 것이기에 메인 이미지만 크게 넣고, 나머지 이미지는 많이 잘리게 두었다. 영화 필름이 주르륵 흘러가는 느낌으로...

이미지 뒤에 검은 배경을 넣어서 콘셉트도 살리고 영역도 확실히 잡아줄 수 있도록 했다.

내일은 오늘 만든 카드뉴스에 대한 피드백을 하고 캔바로 뭔가 새로운 걸 만들어 볼 시간을 주실 듯하다.

강의 후반부에 갑자기 AI를 활용한 UX/UI 디자인에 대한 내용을 설명해 주시면서 ChatGPT 프롬프트를 실습해 보기 시작했는데, 약간 뜬금 없이(?) 진행된 내용이기도 하고 오늘의 전체적인 학습 맥락과 많이 동떨어진 내용이라 블로그 회고에는 포함하지 않았다.

교육을 들으면 들을 수록 기대했던 체계나 퀄리티랑은 많이 다른 것 같아 아쉬움이 남지만 그래도 이왕 들어야 하니 열심히 과제도 하고 최대한 얻어갈 수 있는 것들은 많이 얻어가 보려고 한다.

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

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

어제 교육이 이론 위주로 이루어졌다면, 오늘은 피그마 실습 위주로 강의가 진행됐다. 설치부터 함께 시작하는 입문 난이도의 강의였지만, 툴에 이미 익숙한 사람들도 지루하지 않게 참여할 수 있도록 여러 과제까지 제공해 주셨다.

나는 지금까지 피그마를 꽤 많이 사용해 봤기 때문에 툴의 기능을 익히기 보다는 강사님이 제공해 주신 자료를 기반으로 디자인 개선 작업을 위주로 연습하는 시간을 가졌다.

개인적인 추측으로 "이게 안 예뻐 보여요"하기 보다는, 휴리스틱 평가 기준이나 UX 심리학 같은 근거를 내세우며 디자인 개선을 제안하는 것이 좋다.

강사님이 수업 시작 전 해 주신 말씀대로, 어제 배운 이론을 활용해 디자인의 문제점을 찾아내고 개선해 보려 노력했다.

To-Do 어플리케이션 리디자인

첫 번째 자료로는 To-Do 어플리케이션이 주어졌다. 계정 생성 > 태스크 목록 > 태스크 생성의 단순한 구조로 설계되어 있다.

Primary color는 블루를 사용했고, 퍼플과 레드를 secondary color로 사용했다. 전체적으로 플랫한 느낌의 디자인을 사용하고 있으며 아이콘은 라인 형태로 디자인되었다.

이 화면들에서 내가 찾은 문제는 다음과 같다.

• 제이콥의 법칙 - 멘탈 모델

• 인풋 필드*는 대체적으로 내용이 입력된 상태일 때 스트로크의 컬러가 neutral에서 primary로 변경된다. 하지만 예제에는 미입력된 상태임에도 primary color가 사용되어서 마치 입력이 이미 된 듯한 혼란을 줄 수 있다고 생각했다. 또한 태스크 생성 화면에서 카메라 아이콘 버튼과 + 아이콘 버튼의 역할이 불분명하다. 둘 다 이미지 추가를 의미하는 것처럼 보여, 각 버튼의 역할을 명확히 하는 것이 좋을 것 같다고 생각했다.

• 심미성 UI의 컬러는 대체로 60:30:10을 사용한다. 하지만 예제는 primary - secondary - neutral이 무분별하게 사용되어 다소 시각적으로 복잡한 느낌을 준다. 따라서 컬러 사용을 눌러주고, 타이포그래피 등으로 다른 요소를 더 활용해서 계층 구조를 잡아주는 방향으로 개선해야 겠다고 생각했다.

개선한 부분은 다음과 같다.

• 미입력 필드의 스트로크를 연한 뉴트럴 컬러 변경 : 제이콥의 법칙
• 컬러 사용 단순화 및 타이포그래피·이모지를 통한 계층 구분 : 심미성
• 플레이스 홀더 및 비밀번호 캡션 추가 : 에러 예방
• CTA 버튼 높이 개선 : HIG · Material Design

상품 소개 화면 리디자인

왼쪽이 두 번째 자료, 오른쪽이 리디자인 화면이다.

전체적으로 서양권 디자인(?)스러운 상품 소개 화면이 주어졌다. 상품명과 카테고리가 노출되고, 가격과 장바구니 아이콘 버튼이 가장 강조되고 있다. 가격 아래로는 상품에 대한 설명이 보이고 그 밑으로는 수량과 컬러를 선택할 수 있는 영역이 나온다.

• 밀러의 법칙 - 그룹핑 각 요소 별 여백이 부족해 어떤 요소와 어떤 요소가 결합되어 있는지 파악하기 힘들다. 이 때문에 시각적으로도 답답해 보이고, 무엇보다 가장 중요한 요소인 가격이 한 눈에 들어오지 않는다. 이를 위해 상품명+카테고리, 가격, 설명, 수량+컬러로 그룹핑해 가독성을 개선했다. 추가로 가장 중요한 상품명은 font weight를 굵게 설정해 강조했고, 가격은 같은 weight에 Primary color를 사용해 가장 눈에 잘 띄도록 조정했다.

• 가시성 배경이 뉴트럴 톤으로 되어 있어 하단으로 갈 수록 가시성이 매우 저하된다. 깔끔하게 화이트로 처리했고, 완전한 화이트(#ffffff)가 아닌 #fefefe를 사용했다.

• 제이콥의 법칙 - 멘탈 모델 대체로 수량 버튼은 왼쪽에 - 버튼, 오른쪽에 + 버튼이 위치한다. 멘탈 모델을 참고해 사용자가 오류를 범하지 않도록 버튼 위치를 조정했다. 이와 더불어 수량이 1개일 때는 - 버튼을 disable 버튼으로 처리했다.

메이크업 브랜드 메인페이지

마지막 예제는 글래스모피즘을 활용한 메이크업 브랜드의 메인페이지였다. 마지막은 리디자인보다는 글래스모피즘을 구현하는 데에 신경을 더 많이 쏟아 부었다. 앞에서 비교적 캐주얼한 분위기의 디자인을 했기에 이번에는 무게감이 있는 컨셉으로 디자인해 보았다.

KREAM 레퍼런스 분석

플레이스토어에 등록된 앱은 350만 개고, 국내의 60%는 20개 이상의 앱을 설치하지만, 정작 자주 사용하는 앱은 10개 미만을 사용한다.

그렇기에 우리가 지금 자주 사용하고 있는 앱은 사용자에게 충분한 가치를 제공하는 앱이다. 이러한 앱들을 분석하는 것은 좋은 분석이 된다.

처음으로 하는 팀 활동이었다. 1시간 30분 동안 5명의 팀원들과 역할을 나누어 레퍼런스 분석을 진행했다. 우리 팀 전원이 사용하고 있는 앱이면서도 다른 팀과 겹치지 않는(!) 앱이면 좋겠다는 생각에, 'KREAM'을 분석하기로 했다.

나는 다른 팀원 1명과 함께 휴리스틱 평가를 위주로 진행했다. 기존에는 그냥저냥 깔끔하게 만든 앱이라고 생각했는데, 자세히 뜯어보니 개선해야 할 점이 꽤나 많이 보였다.

특히 눈에 띈 점은 통제권에 관한 부분이었다. 사용자가 실수로 결제를 완료했을 경우 이를 취소할 수 있는 플로우가 다소 복잡하게 설계되어 있고, '구매 결정'에 관련한 부분도 작은 텍스트로 적혀 있어 이를 알아채기 쉽지 않았다.

또한 보증 및 A/S, 환불 관련 정책을 단순히 텍스트를 나열하는 형태로 노출해 사용자가 겪을 수 있는 문제를 예방하기 쉽지 않다고 판단했다. 문단 별 위계 구조를 font size 혹은 weight를 통해 확실히 잡아주어 사용자가 찾고자 하는 정책을 빠르게 찾을 수 있도록 도와주는 개선 방안이 필요해 보였다.

수업이 끝날 무렵 우리가 진행한 레퍼런스 분석이 모든 수강생들에게 소개되었다. 짧은 시간 내에 집중해서 많은 것을 정리했다는 점에서 매우 뿌듯했다! 열심히 임하는 팀원들을 만나 참 다행이었다.

마지막 UX/UI 직무 교육을 마치며...

오늘로써 사전직무교육의 UX/UI 디자인 강의가 끝났다. 마지막에 진행한 레퍼런스 분석이 매우 의미가 있었고, 강사님도 나중에 이를 활용해 리디자인 사이드 프로젝트까지 이어가 보면 좋겠다고 말씀하셨음에도 불구하고 '통합디자인' 과정이이기에 한 분야를 심도 있게 다루지 못한다는 것이 참 아쉽다.

이전 스나이퍼팩토리의 인턴십 프로그램에서는 사전직무교육 5일 동안 하나의 프로젝트를 팀끼리 진행해 포트폴리오 하나를 완성했다고 들었다. 하지만 이번 통합디자인 과정에서는 단순 툴 교육, 간단한 개인 실습의 연속, 이론 등만 반복해 강사도 수강생도 모두 지쳐 보였다.

물론 지금도 나쁘지 않은 교육이라고 생각하지만, 이미 디자인 툴도 다룰 줄 알고 경험과 지식도 어느 정도 있는 수강생들을 위한 교육이라면 조금 더 실습 위주나 단기 프로젝트 진행의 교육이 진행되면 더 좋지 않을까 생각했다.

집으로 가는 길에 갑자기 폭우가 쏟아졌다(...)

비를 쫄딱 맞아서 그런 건지 저녁을 잘못 먹은 건지는 모르겠지만.. 컨디션이 극악이 되어 블로그도 밀리고 3일차 강의도 온라인으로 듣게 되었다. 인턴 기간에는 우산을 반드시 챙기고 다니면서 비 맞지 말고 건강한 몸 상태를 유지해야 겠다.

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

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

오늘부터 벨로그에 과정을 기록하면서 학습 내용도 복기하고, 앞으로 인턴 업무를 진행할 때도 수행 과정을 기록하며 회고하고자 한다.

통합디자인 인턴형 프로그램?

지금까지 스나이퍼팩토리에서는 미래내일일경험 프로그램의 일환으로 'UX/UI 디자인 인턴형 프로그램', '콘텐츠 디자인 인턴형 프로그램' 등을 진행해 왔는데, 이번에 '통합디자인 인턴형 프로그램'이 새로 개설되었다.

미래내일일경험 프로그램이 무엇이냐면...

고용노동부에서 주관하는 사업으로, 관심 직무에 대한 일경험이 부족한 구직 중인 청년에게 다양한 양질의 일경험 기회를 제공하여는 사업. 청년이 기업에서 직접 과업 또는 현업을 수행하며 직무역량을 강화할 수 있도록 돕는다.

간단하게 말하자면, 짧은 기간 동안 인턴을 체험 할 수 있도록 청년과 기업을 연결해 주는 사업이다. 따라서, 재직증명서 발급과 4대보험 가입은 불가능하다.

대신 프로그램 참여 확인서, 한 달 기준 140만원의 지원금, 1일 기준 1만원의 사전직무교육수당을 얻을 수 있으니 참고하도록 하자.

이번 통합디자인 인턴형 프로그램은 5일 간의 사전직무교육 후, 8주 간 기업에서 인턴을 진행하게 된다. 본격적으로 2학기가 시작하기 직전에 인턴 기간이 종료되어서 휴학 없이 인턴을 경험하고 싶은 사람에게 정말 좋은 기회였다.

통합디자인 인턴형 프로그램 1기 지원 링크 현재는 신청이 마감되었지만 2기를 지원하고자 하는 사람들은 참고해도 좋을 것 같다.

지원부터 합격까지

선발 과정은 서류 제출 → 서류 심사 → 화상 면접 → (기업 면접) → 최종 합격의 순으로 이어진다.

6/27 8시 : 지원서 제출 6/27 10시 : 1차 서류 합격 발표 6/27 12시 30분 : 2차 화상 면접 일정 접수 마감 6/30 11시 : 2차 화상 면접 6/30 18시 : 2차 면접 합격 발표 7/1 8시 : 희망 기업 신청 접수 마감 7/3 10시 : 추가 기업 신청 마감 7/3 15시 : 최종 합격 발표

절차가 생각보다 많지만, 늦게 신청해서 그런지 굉장히 타이트한 일정으로 진행되었다.

서류는 이력서, 자기소개서, 포트폴리오를 제출해야 한다. 나는 이력서 2장, 자유 형식 자기소개서 2장(3문항, 1000자 내외), 포트폴리오 26장(3개 프로젝트, 표지·목차·이력 포함) 제출했다.

1차 면접은 스나이퍼팩토리 운영진 1분과 지원자 5명으로 진행되고, 구글 미트로 진행되어서 크게 부담은 없다. 편안한 분위기이니 너무 정형화된 답변을 준비하는 것보다는 본인의 생각을 솔직하게 말하고 간절함을 어필하는 것이 좋을 것 같다.

1. 자기소개 및 지원동기, 가장 희망하는 디자인 분야 (공통)
2. 다룰 수 있는 툴에 대한 설명 (공통)
3. 다른 직군과 협업하는 과정에서 자신이 원하는 디자인 결과물이 나오지 않을 때 어떻게 대처하는지?
4. 다른 사람들이 말하는 본인 성격의 장단점은 무엇인지?
5. 다른 사람과 협업하면서 갈등이 생겼던 경험과 해결한 과정
6. 지속적으로 디자인 수정 요청이 들어올 때 어떻게 대처할 것인지?
7. 본인이 생각하기에 가장 좋은 UX/UI를 가지고 있는 서비스는 무엇인지?
8. 인턴 과정에서 예상되는 어려움은 무엇이고, 그 어려움을 어떻게 극복할 것인지?
9. 새로운 툴을 익히는 것이 빠른 편인지?
10. 이 프로그램에 참여해야만 하는 이유 (공통)
11. 원하는 디자인 분야가 아닌, 다른 업무가 배정되면 어떻게 대처할 것인지?

공통이라고 표시된 질문 외에는 모두 개별 질문이다. 개별 질문은 인 당 2~4개 씩 주어지고, 서류 기반 질문은 나오지 않았다.

2차 면접은 신청 기업에 따라 진행할 수도, 진행하지 않을 수도 있다. 희망 기업 신청 시 서류만으로 평가하는 기업인지, 추가 면접을 진행하는 기업인지 모두 알려주니 미리 참고하면 좋다. 나는 면접에 자신이 없어서(...) 서류만으로 평가하는 기업 위주로 희망 기업을 작성했다.

추가 기업 신청은 최종 합격 발표 마감일 직전에 미합격자 대상으로 진행된다. 단, 이전에 희망 기업으로 제출한 곳에 합격하면 당연히 희망 기업이 우선으로 배정된다.

최종 합격 발표는 문자로 발표하기 전, 먼저 전화로 합격 내용과 앞으로의 절차에 대해 안내를 주신다. 이번 기수는 7월 2일이 최종 발표일이었는데, 참여 기업 측 사정으로 매칭이 늦어져 7월 4일까지 최종 발표를 진행했다.

참고로 선발 과정에서 구글 폼을 제출해야 할 일이 많은데, 상당히 타임어택이 심하다. 최종 합격 전까지는 휴대폰을 정말 자주 확인하며 살아야 할 것 같다 (...)

결론적으로 나는 1지망 기업에 합격했다! 액셀러레이팅 관련 기업인데, 이력서와 자기소개서에 작성했던 애자일 프로세스 경험, PMF 검증, IR 피칭 경험 등 스타트업에 대한 관심이 드러나는 부분을 좋게 봐 주시지 않았을까 싶다.

참고로 기업 우대 사항에 대졸 우대, 디자인 전공 우대가 있었는데, 나는 대졸도 아니고 디자인 전공자도 아니었다. 우대 사항에 해당하지 않는다고 해서 원하는 기업에 지원을 포기하지 않았으면 좋겠다.

사전직무교육 일정

사전직무교육은 7/7(월) ~ 7/11(금) 총 5일 동안 9 to 6로, 9호선 마곡나루역 부근에서 진행된다. 점심 식사 1시간이 주어지고, 따로 점심은 제공되지 않아서 근처에서 사 먹어야 한다.

하루 교육 수당보다 점심 값이 더 비싸다(!)

첫 날인 월요일은 오전에는 프로그램 오리엔테이션, 오후에는 직무교육이 진행되고, 화금요일은 오전·오후 모두 직무교육이 이루어진다. 또한, 월화는 UX/UI 디자인 및 프로덕트 디자인 위주의 교육이 진행되고 수~금은 콘텐츠 디자인 위주 교육이 진행된다.

오리엔테이션

오리엔테이션과 사전직무교육은 기본적으로 오프라인으로 진행되지만 비수도권 거주자는 운영진 분들께 사전에 말씀드리면 ZEP으로 온라인 참여가 가능하다. 온/오프 하이브리드는 불가능.

오리엔테이션 내용은 다음과 같다.

• 프로그램 개요

• 수업 툴 설치 및 채널 가입 (Notion, Slack)
• 출결 및 수료 기준
• 수당 지급 안내
• 서류 및 표준계약서 작성
• 팀 구성

교육이 끝난 후 따로 서류를 제출하는 번거로움이 없도록 현장에서 많이 도와주셨다. 심지어 온라인으로 도장 제작하는 방법까지 하나하나 알려주신다... 참여자들을 많이 배려해 주신다는 것이 느껴진 부분이었다.

팀 구성 은 5일 간 실습 수업을 함께 할 팀빌딩 과정이다. 거창한 것은 없고, 운영진 분이 앉은 자리대로 4~5명 씩 묶어서 임의로 팀을 구성해 주신다.

우리 팀은 비전공자·전공자, 재학생·졸업생, UX/UI 디자인·콘텐츠 디자인 직무 희망자가 골고루 섞인 팀이다. 오늘 하루 종일 피곤하기도 하고 정신도 없어서 평소보다 낯을 더 많이 가렸는데, 다들 활발하고 좋으신 분들이어서 다행이라고 생각했다. 내일은 더 친해져 보려 노력할 예정...!

추가로 이번 기수 경쟁률은 4:1이었다고 한다.

통합디자인은 아직 1기여서 경쟁률이 엄청 높지는 않은 것 같으니 관심 있는 사람은 경쟁률이 더 높아지기 전에(!) 빠르게 신청하면 좋을 것 같다.

직무교육 1일차

첫 날 직무교육은 오후 타임, 13~18시까지 진행되었고, UX/UI·프로덕트 디자인을 위주로 진행되었다. 5시간 동안 이론만 진행되는 교육이었다.

오늘 배운 내용은 이러하다.

• 통합디자인의 범위와 연관성 (왜 다양한 디자인 분야에 대한 이해가 필요한가?)

• UX/UI 디자인, 프로덕트 디자인, 브랜드 디자인, BX 디자인, 콘텐츠 디자인의 정의
• 인하우스와 에이전시의 차이
• ) 프리랜서의 장점과 단점, 영업 방법
• 더블 다이아몬드 프로세스
• 취업을 위한 장기적 목표 설정
• GUI 디자인 트렌드
• 게슈탈트 심리학, 휴리스틱 원칙, UX 심리학
• 포트폴리오 제작 노하우

사실 독학으로라도 UX/UI를 조금이라도 공부해 본 사람들이라면 누구나 어렵지 않게 따라갈 수 있을 정도의 내용이었다. 특히 디자인 전공하신 분들에게는 너무 익숙한 개념들이어서 오히려 조금 지루했을 수도 있겠다는 생각이 들었다.

하지만 UX/UI에 대해 아~무것도 모르는 사람이 듣기에는 따라가기에 조금 벅찰 수도 있겠다는 생각이 들었다. 5시간이라는 긴 시간이지만, 상당히 많은 내용을 포함하고 있기에 디테일한 부분까지 자세히 설명해 주시기는 아무래도 벅찰 수밖에 없어 약간 빠른 속도로 진행됐기 때문...

반대로 생각하면, 나는 UX/UI는 그동안 꽤 열심히 공부해 왔지만 브랜드·BX 디자인이나 콘텐츠 디자인·마케팅에 대해서는 아는 것이 별로 없어 수~금에 진행될 수업들을 온전히 따라가기 어려울 수도 있겠다는 생각이었다. 그렇기에 내일은 수업 내용을 복습하면서도, 타 디자인 분야에 대해 조금이라도 개념을 익히고 가려고 한다.

대학 수업보다 더 길게 진행되는 교육이어서 정말 힘이 빠졌지만... 그래도 배운 내용을 개인 노션에 열심히 정리했다. PDF로 뽑아 보니 총 11장이 나오더라.

교육이 끝나고 모든 PPT 자료를 슬랙에 공유해 주시긴 하지만, 그래도 내가 직접 필기하지 않으면 머릿속에 잘 남지 않을 것 같아 정리해 보았다.

대체로 개념은 익숙했지만, 과제를 하면서 생각이 조금 깊어졌다.

지금까지 단순히 이론을 공부하고, 개인 습작을 만들고, 개발 프로젝트를 진행해 왔지만 정작 '나 자신'의 커리어 로드맵에 대해서는 그다지 생각해 보지 않았다는 것을 이제서야 깨달았다.

'이전 경험과 관심사를 바탕으로 자신의 10년 후를 상상하며 첫 목표 회사의 도메인, 직무, 회사 형태 등을 정리해서 제출'이라는 과제가 이렇게나 어려울지 몰랐다. 그동안 막연히 '나는 스타트업이 잘 맞는 것 같다', '에이전시보다는 인하우스 디자이너가 되고 싶다', '비주얼보다 UX 설계와 서비스 기획에 강한 디자이너가 되고 싶다'라고만 생각했을 뿐, 정확한 나의 최종 목표가 무엇인지는 생각해 보지 않았다. 그동안 내 진로를 고민하며 숲을 보지 못한 것이다.

다른 사람들이 자신이 희망하는 산업군을 척척 말하는 것을 보고도 약간 놀랐다. '산업과 직무는 다르다'라는 강사님의 말씀이 머릿속에 맴도는 이유도 이 때문일 것이다. 앞으로 어떤 도메인의 디자이너가 되고 싶은지 꾸준히 고민해 봐야 겠다고 생각했다.

포트폴리오를 준비하는 것도 물론 중요하지만, 내가 어떤 사람이 되고 싶은지를 먼저 결정해야 한다는 것을 다시 한 번 느낀 하루였다.

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

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

하지만 해냈죠?

오늘의 주제: 온보딩

사용자에게 서비스의 가치를 빠르게 설명할 수 있는 온보딩 화면을 디자인해 보자.

포함되어야 할 요소

1. 핵심 기능 강조 일러스트 or 아이콘 (2장)
2. 진행 인디케이터(점·바·숫자 중 택 1)
3. “다음/건너뛰기” 버튼

타겟 설명

18~35세 일정 관리를 시작하고자 하는 MZ세대

서비스 구분

모바일 앱

레퍼런스

온보딩 화면은 크게 두 가지 종류로 나뉜다.

1. 앱의 기능을 설명하는 온보딩
2. 서비스 환경을 셋팅하는 온보딩

생산성/라이프스타일 앱이라면 2번으로 가도 좋겠지만(e.g. 닉네임, 루틴 등), 오늘의 목표는 빠르게 앱의 가치를 전달하는 것이니 1번과 같은 방향이 좋겠다고 생각했다. 그리고 2번은 1시간 안에 절대 못 끝낼 것 같았다

1. 리멤버

가장 집중해서 본 점은 온보딩 첫 화면, '받은 명함, 어떻게 관리하시나요?'라는 문구였다. 서비스의 실제 화면을 보여주고 기능을 간략히 설명하는 일반적인 온보딩 화면과 사뭇 달라보였기 때문이다.

바로 서비스의 기능을 설명하지 않고 사용자의 Pain Point를 질문 형태로 던지면서 자연스럽게 다음 화면으로 넘어가 서비스의 가치를 알아볼 수 있도록 유도했다는 점이 매우 흥미로웠다. 사용자의 체류 시간을 높이는 데에는 UX 라이팅도 정말 큰 역할을 할 수 있겠구나, 라고 생각하며 이 전략을 벤치마킹 해 보기로 했다.

(이미지 출처. 같이 읽어보면 좋은 아티클) 온보딩 화면, 어떻게 구성하면 좋을까?

2. 알라미

비슷한 맥락으로 UX 라이팅을 벤치마킹 요소로 삼았다. '내일 아침이 기대돼요'라는 문구를 통해 사용자로 하여금 서비스 사용에 대한 기대를 높일 수 있는 카피라고 생각했다.

디자인 초안

다소 황당한 와이어프레임 등장.

오늘은 와이어프레임 단계부터 상당히 애를 먹었는데, 지금부터 그 이유변명을 해 보겠다.

온보딩 화면의 목적은 사용자에게 서비스의 기능과 가치를 전달하는 데에 있다. 그렇기에 나는 본격적으로 작업에 들어가기 전에 이 서비스의 기능을 간단하게라도 설계해야 했고, 이 단계에서 너무 많은 고민을 했다.

'일정 관리를 시작하는 사람은 어디에서 가장 어려움을 느낄까?'라는 고민부터 시작해서, '이 문제를 해결하기 위해서는 어떤 기능이 가장 효과적일까?', '사용자도 충분히 매력적으로 느낄 수 있는 기능일까?'까지...

물론 실제 서비스를 만든다면 반드시 해야 하는 고민이지만, 오늘은 시간 내에 디자인을 완성하는 연습을 하는 시간이었다. 기획보다는 레이아웃 구성이나 라이팅에 조금 더 신경을 기울였으면 더 좋은 결과물을 만들어 낼 수 있었을 것 같다.

화면은 총 3 page를 만들었다. 1 page로는 모든 것을 담아내기 부족하고, 5 page 이상은 온보딩 치고 지나치게 많은 투자라고 생각했다. 따라서 3 page 안에 가장 중요한 핵심만 담아내고자 했고, 레퍼런스를 기반으로 Problem - Soultion - Outcome 구조로 흐름을 잡아 보았다.

여기서 다시 한 번 문제가 발생한다.

기능을 설명할 키 비주얼 화면이 없다.

사실 나는 사이드 프로젝트에서 온보딩 화면을 만들어본 적이 있어서, 그 경험을 기반으로 막연히 '그냥 있는 거 써서 하면 되겠지~'라고 생각했으나... 다시 생각해 보니 그 당시에는 MVP에 포함될 핵심적인 화면이 몇 개 있는 상태였다. 상당히 안일한 사고였다.

대략 5분 정도 벙쪄 있다가, 급하게 이미지를 넣기로 결정했다. 하지만 무료 소스 이미지, AI 이미지를 섞어 사용하다 보니 톤앤무드도 맞지 않고, 프라이머리 컬러인 블루와도 어울리지 않았다.

그런 생각을 하다가 1시간이 끝났다.

수정

여러 가지 시도를 해 보았다. 1~2page에 있던 CTA를 빼고 next/prev 버튼을 넣어보기도 하고, 이미지도 바꿔보고, 그라디언트도 바꿔보았다. 이미지 사이즈와 텍스트 공간을 명확히 분리해 보기도 했다.

하지만 여전히 마음에 들지는 않았다. UI 디자인이 아니라 카드뉴스 디자인처럼 만들어졌다는 점이 굉장히 불만족스러웠고, 고등학생이나 20대 초반도 사용하는 서비스의 첫 화면이 지나치게 무거워 보인다는 것도 별로였다.

완성

이미지가 들어가는 것이 모든 문제의 원인이라고 생각했다. 서비스 도메인이 의료, 패션, 뷰티 쪽이거나 UI 컨셉이 신중한, 고급스러운, 무거운과 같은 키워드였다면 실사 이미지가 어울릴 수도 있었겠지만, 10대 후반부터 30대 중반까지의 사용자를 타겟으로 한 생산성 어플에는 어울리지 않았다.

과감하게 실사 이미지를 빼 버리고, 가벼운 낙서 느낌의 일러스트 디자인을 넣어 보았다. 단시간 내에 3가지 그래픽을 뽑아 내기 위해 Adobe firefly로 벡터 이미지를 생성하고 마음에 들지 않는 부분은 펜툴로 조금씩 다듬었다.

그 결과, 처음과 달리 전체적으로 부담스러워 보이지 않는 화면이 완성되었다. 프라이머리 컬러가 과하게 사용되지 않으면서도 모든 요소와 조화롭게 보이고, 이전보다 시각적으로 문구가 전달하는 의미를 잘 표현하는 느낌이다.

그토록 신경을 썼던 UX 라이팅은 꾸준히 수정되었다.

1. 첫 화면에서는 질문 형식으로 사용자에게 공감한다. 앞서 보았던 리멤버의 온보딩 전략을 이 화면에 사용하였다. 처음에는 '대처'라는 단어를 사용했지만, 비교적 캐주얼한 단어는 아니기에 다소 사무적으로 들릴 여지가 있었다. 어딘가 따지거나 사용자를 피면접자처럼 대하는 것처럼 보이기도 한다. 따라서 공감의 의도에 맞도록 '무엇부터 해야 할 지 막막하신가요?'라는 문구를 사용했다.

2. 사용자가 겪는 상황을 해결할 수 있는 핵심 솔루션을 나타낸다. 이번 디자인을 위해 임의로 'AI가 대신 계획해 주는 나의 하루 일정'을 떠올렸다. 일정 관리를 시작하고자 하는 사용자는 기본적으로 해야 할 일이 많을 것이고, 처음이기에 이 일들을 어떻게 정리해야 할지 모를 것이라고 생각했기 때문이다. 적절한 페르소나 이미지.

표현 선택에도 나름의 의미가 있다.

우선, 온보딩에서 서비스 세팅을 하지 않는 만큼 가입 후 바로 사용자가 스스로 서비스를 세팅할 수 있도록 유도하는 것이 중요하다고 생각했다. 때문에 '오늘부터'라는 표현을 넣어 사용자가 서비스에 대한 기대를 품고 24시간 내에 서비스를 사용해 볼 수 있도록 설계했다.

'매니저'라는 표현은 개인 맞춤형 서비스라는 점을 은연 중에 나타내고 싶어 사용했다. '당신의 하루'라는 표현도 같은 맥락이다. '나만의'와 같은 표현도 고려했지만, '매니저'가 훨씬 더 사용자와 서비스의 거리감을 좁혀주는 표현이라고 판단했다.

3. 사용자가 서비스를 통해 얻을 수 있는 가치를 효과적으로 제시한다. 마지막 화면에도 AI 기반 서비스라는 점을 강조하고 싶었다. Outcome을 나타내는 화면인 만큼 서비스가 사용자에게 가져다 줄 수 있는 효과를 더 명확하게 드러내기 위해 '효율적인'이라는 형용사를 붙였다. 가장 강조하고 싶었던 문구는 '어제보다 더 생산적인 오늘'이라는 표현이다. 우리 서비스를 만나기 전의 모습(어제)과 서비스를 사용하게 된 이후(오늘)의 모습이 대비되는 표현으로, 서비스의 가치를 더 뚜렷하게 전달할 수 있으리라 기대했다.

이전부터 꾸준히 신경쓰고 있는 점을 한 가지 더 기록해 보자면, 버튼 영역이다. 겉으로 보기에는 단순히 텍스트로 보이지만, 사용자가 손가락으로 클릭해야 하는 부분이기에 텍스트만의 사이즈로는 사용성에 불편함이 있을 것이다. 따라서 텍스트 버튼도 오토레이아웃으로 버튼 영역의 사이즈를 최소 사이즈(48px)이상으로 잡고 있다.

추가로 오토레이아웃을 적극적으로 사용하며 이후 반응형 디자인을 할 때에도 빠르게 작업할 수 있도록 연습하고 있다.

회고

온보딩 화면을 너무 만만하게 봤다.

'그냥 화면 목업 넣고 글 넣으면 되는 거 아니야?'라고 생각한 처음과 달리, '서비스의 가치를 빠르게 전달한다'라는 목표를 달성하기 위해서는 메인 기능이 들어갈 화면들만큼 많은 고민과 시도를 해야 했다.

앞으로 내가 어떤 프로젝트에 참여할 지는 모르겠지만, 어떤 서비스를 만들게 되든 사용자와 서비스의 첫 만남이 긍정적이고 기대감에 찰 수 있도록 UX 라이팅부터 그래픽까지(혹은 키 비주얼 화면, 이미지 등) 꼼꼼히 설계해야 겠다고 반성하는 하루였다.

오늘의 주제: 로그인

사용자가 스플래시 다음으로 처음 접하게 되는 로그인 화면을 디자인해 보자.

포함되어야 할 요소

1. 앱 로고 또는 이름
2. ID(이메일)/비밀번호 입력 필드
3. 로그인 버튼
4. ‘비밀번호 찾기’, ‘회원가입’ 링크
5. 소셜 로그인 버튼 (선택)
6. 상태 피드백 (예: 비밀번호 오류 / 선택)

타겟 설명

20~30대 직장인 또는 대학생 바쁜 상황에서도 빠르게 진입하길 원함 익숙한 구성과 신뢰감 있는 디자인을 선호함

서비스 구분

모바일 앱 (iOS/Android 공용, 반응형 고려 X)

레퍼런스

본격적인 디자인에 앞서 약 10분 간 빠르게 레퍼런스를 서치했다.

1. 요기요

사용자의 빠른 서비스 진입을 위해 이번 디자인은 소셜 로그인에 중심을 두고 진행하고자 했다. 가장 먼저 눈에 띈 레퍼런스 화면은 '요기요'다. 다양한 소셜 로그인을 제공하고 있는 것은 물론, 버튼도 깔끔하게 배치되어 있다. 로고-서브타이틀-버튼이 모두 중앙 정렬되어서 시각적으로 불편함이 없고 시선의 흐름이 자연스럽다. 각 버튼 내의 심볼과 버튼명이 들쭉날쭉하지 않은 것도 '깔끔하게 보이는 것'에 큰 몫을 하고 있다.

2. Texture

로고 뿐만이 아니라 서비스의 소개도 간략하게 나와 있어 사용자로 하여금 서비스에 대한 기대를 높이고 있는 점을 벤치마킹했다. 로고와 버튼 사이 넓은 여백이 화면을 더욱 단정하고 고급스러워 보이게 만들어 준다고 느꼈다.

디자인 초안

처음 1시간 동안 만들어 본 와이어프레임과 UI다. 처참하지만 의도를 하나씩 설명해 보자면...

먼저, 빠른 서비스 진입을 위해 이메일 로그인보다 소셜 로그인이 우선 노출되도록 레이아웃을 구성했다. 특히 신규 유저는 새로운 서비스에 가입할 때에 피로감을 느끼고 쉽게 이탈할 가능성이 있기에 이 부분이 더욱 중요하다고 생각했다.

인풋 필드의 라벨과 플레이스 홀더에도 신경을 썼다. 플레이스 홀더에 '이메일', '비밀번호'가 들어갈 수도 있겠지만 플레이스 홀더는 터치 혹은 입력 시 내용이 사라지고 만다. 그렇기에 이 필드에 입력해야 하는 내용을 사용자가 언제나 인지할 수 있도록 '이메일'과 '비밀번호'를 플레이스 홀더가 아닌 라벨로 처리했다.

한 가지 더 신경을 쓴 점은, 비밀번호 정책을 로그인 화면에도 명시해 둔 것이다. 비밀번호 정책은 각 서비스마다 조금씩 차이가 있기에 사용자는 서비스 별로 비밀번호를 다르게 설정할 수밖에 없다. 그러다보면 로그인 시 우리 서비스에서 설정했던 비밀번호를 잊어버릴 가능성이 농후하고, 오랜만에 서비스를 찾은 사용자라면 그 확률은 더욱 높아진다. 여러 번 비밀번호를 틀리고 사용자가 화를 내며 이탈하는 상황을 최대한 방지하도록 캡션에 정책을 명시하여 사전에 힌트를 제공하고자 했다.

아쉬운 점

일단 완성도가 매우 떨어진다(!) 급하게 완성하는 바람에 가장 중요한 로그인 버튼도 넣지 못했다... 이후 한 시간 동안 실제 서비스에 사용할 수 있을 정도로 퀄리티를 끌어 올리는 것이 최우선 목표였다.

다음으로, 이메일 로그인에 대해 한 번 더 고려해 볼 필요가 있다. 웹이라면 공간이 어느 정도 나올 수 있겠으나, 모바일 앱은 이메일 로그인을 하단에 배치하면 키보드 영역에 필드가 반드시 가려지게 된다. 이를 개선하기 위해서는 소셜 로그인 화면과 이메일 로그인 화면을 분리할 필요가 있다.

위 문제들을 기반으로 1시간 동안 디벨롭을 진행했다.

완성

이왕 디벨롭하는 김에 소셜 로그인 버튼 가이드도 찾아보고 최대한 지키면서 수정해 보려고 노력했다.

가장 큰 차이점은 위에서 말한 소셜 로그인과 이메일 로그인의 분리이다. Depth가 하나 더 늘어나긴 했지만, 소셜 로그인을 우선시했다는 기획 의도에는 더 적절한 방식이라고 생각한다. 이메일 로그인 화면은 '다른 계정으로 로그인' 버튼 클릭으로 접근할 수 있도록 설계했다. 충분한 여유 공간이 생기니 텍스트 사이즈를 조정하여 가시성을 높일 수 있었다. 덕분에 시각적으로 더욱 시원해 보이는 효과도 얻을 수 있었다.

타겟은 '신뢰감 있는 서비스'를 선호하는 경향이 있기에 소셜 로그인 버튼을 제외하고는 모두 블랙을 사용하여 무게감을 주었다. 레퍼런스에서 확인한 여백 또한 활용하기 위해 인풋 필드 전체에 라인을 주는 대신, 하단에만 라인을 주어 조금 더 트여 보이고 고급스러운 느낌을 줄 수 있도록 의도했다.

이에 맞추어 타이포는 Regular, Medium, SemiBold만 사용하고, Gray/100 컬러는 #ffffff가 아닌 #f8f8f8을 사용했다. 그 대신 4.5:1 비율을 준수할 수 있도록 본문은 #696969 컬러를 마지노선으로 설정했다.

오늘의 꿀팁. able 플러그인을 사용하면 웹 접근성 지침 검사를 간편하게 할 수 있다.

시간과 기력(?)이 남아 에러 케이스도 간단히 설정해 보았다. 비밀번호 정책을 준수하지 않으면 로그인 버튼이 활성화되지 않고, 비밀번호를 잘못 입력하면 캡션 위치에 에러 메시지가 노출된다. 1자 이상 수정이 발생하면 에러 메시지가 사라지고 기존 정책 캡션이 다시 노출되는 흐름이다. (회고를 쓰면서 생각이 든 건데, 에러 메시지를 토스트로 노출하는 쪽이 사용자 혼란을 덜 수 있을 것 같다.)

회고

일단 시작을 했다는 점에서 박수!

확실히 경험이 부족하고, 공부가 부족하고, 손이 느리다는 것이 체감된다. 그래도 로그인 화면은 몇 번 디자인 해 본 화면이라 완성은 할 수 있었지만, 대시보드나 레포트 같은 익숙하지 않은 화면이 나오면 와이어프레임부터 헤매다가 완성을 못 할 수도 있을 것 같다는 생각이 든다. 하지만 이 사실을 지금이라도 깨달아서 참 다행이고, 앞으로 이 활동을 꾸준히 지속하며 낯선 화면도 능숙하고 빠르게 디자인 하고 싶다.

정해진 시간 안에 좋은 레퍼런스가 빠르게 생각날 수 있도록 여러 서비스를 가리지 않고 다양한 플로우로 사용해 보는 것도 좋을 듯하다. 만약 사용자 경험이 좋은 서비스를 발견했다면 그냥 넘기지 않고 그 서비스의 해당 화면 혹은 플로우가 왜 좋았는지도 생각해 보는 습관을 들이자.

그동안 교내 IT 동아리 팀장 +a... 역할을 맡아오면서 하루하루 업무에 치이는 탓에 개인 공부를 할 시간이 없었고, 그마저도 디자이너가 아닌 PM의 역할이었기에 더더욱 공부에 소홀했다.

하지만 이제 거의 끝났지롱!

초심을 찾고 다시 폐관수련을 해 보련다.

Daily UI를 시작한 이유는?

먼저, 디자인 편식을 고치고 싶었다.

평소 클론 디자인을 위한 레퍼런스를 찾으면서 무의식적으로 내가 좋아하는 도메인, 스타일, 패턴을 선정하곤 했다. 물론 안 하는 것보다는 낫겠지만.. 결국에는 문제 해결력도 저하되고 성장도 정체되기 마련이다. 이 챌린지(?)의 핵심은 랜덤한 주제로 디자인을 하는 것이다. 매일 도메인도 달라지고, 타겟 세그먼트도 달라지고, 패턴 또한 달라진다. 주제가 정해지면 반드시 그 주제로 디자인을 해야 하는 것이 포인트다.

다음으로, 꾸준히 진행할 수 있는 무언가가 필요했다.

Daily UI는 하루 2시간, 최대 2시간 30분만 진행하기로 결정했다. 마감시간을 설정함으로써 정해진 시간 안에 집중을 극대화할 수 있고, 하루에 시간을 오래 투자해야 한다는 부담감을 줄여 침대에서 벗어나 책상 앞에 앉을 수 있는 동기를 부여할 수 있다는 효과를 노렸다. 필자는 손이 꽤 느린 편인데, 마감시간을 통해 작업 시간도 단축할 수 있기를 기대해 본다.

Daily UI 진행 방법

1. 하루에 한 화면을 그리는 것을 목표로 한다. 부담스럽지 않은 디자인 습관을 형성하고 싶어, '인터랙션까지 다 담아보겠다!'라거나, '가상의 서비스 하나를 완성하겠다!'와 같은 거창한 목표는 세우지 않았다. 매일 한 화면이라도 그려낸다면 성공으로 인정한다.

2. UI 주제를 선정한다. 앞서 말한 디자인 편식을 예방하기 위해 Chat GPT를 이용한다. 아래 내용들을 포함하여 매일 주제를 던져 달라고 프롬프트를 만들어 보았다.

1. 주제
2. 서비스 구분 (WEB/APP)
3. 서비스 타겟층
4. 필수 포함요소 *기획

오늘 주어진 주제는 거부하거나 변경할 수 없다 (!) 누구도 강제하지는 않지만, 자신과의 약속이 없으면 이것을 하는 의미가 없다.

3. 1시간 동안 주어진 주제를 기반으로 UI를 디자인한다. 제한된 시간 내에 레퍼런스 서치, 와이어프레임, UX 설계, UI 디자인을 모두 끝낸다. 엄청 짧은 시간은 아니지만, 긴 시간은 아니다. 이것저것 딴 짓을 하거나 시간 분배를 잘못한다면 완성이 어렵겠지만, 온전히 몰입한다면 충분히 모든 것을 끝낼 수는 있는 시간이라고 생각한다. 하지만, 퀄리티는 떨어질 수 있을 것이다. 이를 보완하기 위해...

4. 피드백을 기반으로 UI를 개선한다. 최대 1시간 동안 디자인한 UI를 개선해 본다. 최대한 완성도 있는 습작을 만들되, 이 또한 처지거나 부담되지 않도록 시간을 제한한다. 이 시간에는 서치한 레퍼런스를 더 찾아볼 수도 있고, 사용자 경험을 조금 더 고려해 볼 수도 있겠다. 독학으로 공부하고 있는 관계로, 피드백 역시 GPT 선생님이 수고해 주시겠다. (생각보다 꼼꼼하게 잘 봐 준다(!))

5. 오늘 공부한 내용을 간단히 회고한다. 작업하며 특별히 신경 쓴 점, 잘했다고 생각하는 점, 아쉬웠던 점 등을 기록하며 회고한다. 모든 내용은 벨로그에 기록될 예정이다. 글이 안 올라오는 날이 있다면 댓글로 호되게 채찍질 해 주시길...

사실 오늘의 몫은 이미 끝내고, 회고만을 남겨 둔 상태다. 오늘의 UI와 회고는 다음 게시물에서 이어가 보겠다.

이디야멤버스는 순수 국내 커피 브랜드인 이디야커피의 공식 모바일 멤버십 서비스다. 모바일 스탬프 적립 및 사용, 제품 주문 및 선물하기, QR코드 간편 결제 등 다양한 서비스를 제공하고 있다. 부가적으로 이디야 소식을 통해 이벤트나 신제품을 사용자에게 소개하기도 한다.

서비스 특징

• 이디야멤버스는 메인 페이지의 상단에서 회원 등급, 스탬프와 쿠폰 보유 개수를 보여준다. 보통 이러한 부분은 마이페이지에서 보여주는 경우가 많은데, 이 부분이 조금 독특하다고 생각했다.
• 큰 사이즈의 배너로 이벤트와 매장 소식 등을 전달하고 있다.
• 간편주문, 매장주문, 배달주문 등 사용자가 자주 찾는 기능은 퀵 메뉴로 보여주고 있다.
• 테마(mood) 별로 그에 맞는 메뉴들을 보여주며 사용자들에게 추천메뉴 혹은 신제품을 소개하고 있다.
• 현장결제는 FAB로, 간편주문 등은 GNB 버튼으로 표현하고 있다. 하단 네비게이션 바가 움푹 파인 모양을 하고 있는 것이 재미있다.

서비스 UX/UI 분석

좋았던 부분

• 사용자가 자주 사용하는 결제, 주문 등의 버튼의 사이즈가 다른 버튼보다 커서 사용자가 원하는 목적을 달성하기 편할 것 같다고 생각했다. 캡처 상에는 드러나지 않았지만, 이 버튼들에는 작은 모션들도 존재한다. 이러한 작은 포인트들 덕분에 사용자가 고민하는 시간이 줄어들 수 있겠다고 생각했다.
• 브랜드 컬러를 충분히 활용하면서도 브랜드 컬러에 단계를 나누어 단조로운 느낌이 들지 않았고, 브랜드 컬러를 무분별하게 사용하지 않아 복잡하다는 느낌또한 들지 않았다. 브랜드 컬러를 적절하게 활용하여 브랜드의 이미지를 명확하게 보여주는 좋은 UI의 예시라고 생각했다.

아쉬웠던 부분

• 메인 페이지에서는 아쉬운 부분을 그다지 발견하지 못했다.

회고

잘했다고 생각한 부분

• 오토레이아웃에 점점 더 익숙해지는 기분이다.
• 독특한 모양의 네비게이션 바를 만드는 데에 성공했다. 아래 영상의 앞 부분을 많이 참고했다. https://www.youtube.com/watch?v=Ox7uNtdHC8w&t=78s
• 요소들 간의 배치는 아직 엉성하지만,** 각 요소의 사이즈**에 대한 감이 얼추 잡히고 있는 것 같다. 자간/행간 조절에도 어느 정도 익숙해지고 있는 것 같다.

아쉬웠던 부분

• 좌우 마진이 생각보다 그렇게 넓지 않았다. 20으로 잡고 작업을 시작했으나, 실제로는 18이었다. 이 점을 제대로 알아차리지 못해서, 전체적인 배치의 비율이 많이 깨졌다는 점이 가장 아쉽다.
• 아이콘을 만드는 데에 이제는 조금 익숙해졌지만, 아직까지도 많이 부족하다고 생각한다. 특히 '이디야소식'의 아이콘이나 '선물하기'아이콘 같이 기본 도형에서 다소 변형이 필요한 아이콘에서 나의 부족함이 감춰지지 않는다. 다양한 아이콘을 따라 그려보는 연습이 더 필요하다고 생각했다.
• 무엇보다도, 개인 사정으로 2주 간 모작을 진행하지 못했다는 점이 가장 아쉽다. 포트폴리오, 프로젝트 등으로 바쁘다는 이유 뒤에 숨어 공부를 게을리 하지 말자고 다시 한 번 더 다짐했다.

새롭게 배운 점

• 자간에도 강약을 준 것이 인상깊었다. 이를 테면, 사용자가 중요하게 보는 메뉴명이나 가격은 자간을 0.15% 정도 넓게 설정하고, 사용자들이 비교적 덜 중요시 여기는 배너나 헤드라인은 자간을 -2% 정도로 좁게 설정하는 것이다. 폰트의 강약은 컬러나 사이즈뿐만 아니라 자간으로도 표현할 수 있다는 점을 배우게 되었다.

2012년에 출시한 요기요는 '배달의민족', '쿠팡이츠'와 함께 대한민국의 대표 배달 어플이라고 할 만큼 인기를 얻고 있는 배달 서비스이다. 현재는 음식 배달뿐만 아니라 편의점, 뷰티, 반려동물용품, 문구 등의 제품 배달도 겸하고 있다. 서비스의 이름은 '요기(여기, here)'와 조금 먹었다는 뜻의 '요기'를 모티브로 삼았다고 한다.

서비스 UX/UI 분석

요기요 마이페이지의 UX/UI를 더욱 면밀히 분석하기 위하여 다른 배달 어플의 마이페이지와 비교해보고자 한다.

'쿠팡이츠'의 마이페이지

• 쿠팡이츠 마이페이지의 가장 큰 문제점은 선택지가 너무 많다는 것이다. 힉의 법칙에 따르면, 선택지의 개수가 많으면 많을 수록 사용자의 의사결정 시간도 늘어난다. 즉, 지나치게 많은 선택지의 개수는 사용자의 의사결정에 불편함과 혼란을 초래한다는 것이다. 가령 사용자는 고객센터의 문의를 하고 싶었을 뿐인데 너무나도 많은 선택지때문에 고객 지원을 찾는 데에 어려움을 겪을 수 있다.

배달 앱은 아니지만, 토스의 경우에도 '전체' 화면에서 수많은 선택지를 보여주고 있다. 하지만 쿠팡이츠와 토스의 사례는 조금 차이가 있다.

1. 토스는 이 화면에서 검색 기능을 제공한다. 예를 들어 '소비 다이어리'를 찾고 싶은 사용자는 스크롤을 내려 '소비 다이어리'를 찾을 수도 있지만, 검색 아이콘을 클릭하여 '소비 다이어리'라는 텍스트(혹은 일부 텍스트)를 검색해도 된다. 이는 선택지가 너무 많다는 리스크를 현명하게 잘 대처한 기능이라고 볼 수 있다.

2. 토스는 기능의 주제를 기준으로 수많은 기능을 분류했다. UX 심리학 법칙 중 '밀러의 법칙'은 정보를 덩어리로 나누었을 때 사용자가 정보를 더 쉽게 인지하고 처리한다는 점을 강조한다. 이러한 점을 미루어보았을 때 토스의 사용자는 보다 더 쉽게 자신이 원하는 선택지를 찾을 수 있는 것이다. 이로써 토스는 수많은 선택지 중 사용자가 자신이 원하는 것을 최대한 빠르게 찾을 수 있도록 도와주려 최선을 다하고 있다.

• 다시 쿠팡이츠로 돌아와서 본다면, 쿠팡이츠는 수많은 선택지를 단순히 나열만 하여 사용자가 원하는 목적을 빠르게 달성할 수 있도록 도움을 주지 않고 있다고 볼 수 있다. 이는 사용자를 배려하지 못한 UI라고 판단할 수 있으며, 개인적으로 쿠팡이츠 마이페이지의 UI에서 가장 개선이 필요한 부분이라고 생각한다.

• 쿠팡이츠는 마이페이지에서 ‘내가 남긴 리뷰’, ‘도움이 됐어요’, ‘즐겨찾기’를 가장 강조해서 보여주고 있다. 나는 이것들을 클릭하면 해당 선택지의 상세 정보를 볼 수 있을 것이라고 예상했지만, 실제로는 그렇지 않았다. 내가 원하던 정보를 보기 위해서는 ‘자세히 보기’ 버튼을 클릭해야만 했다. 굳이 이렇게 만들어야 했을까? 무슨 의도인지는 잘 모르겠으나, 클릭을 한 번이라도 최소화하려는 노력이 더 필요하지 않았을까 싶었다.

너무 쿠팡이츠만 많이 까는 것 같아서 미안한 마음이다...

'배달의민족'의 마이페이지

• 배달의민족의 마이페이지도 쿠팡이츠와 비슷한 개수의 선택지를 가지고 있었으나, 이 경우에는 카드와 타이틀을 활용하여 최대한 깔끔하게 분류했다.
• '주문내역'이나 '쿠폰함'같은 사용자들이 자주 찾는 주요 요소들은 컬러가 있는 아이콘을 활용하여 사용자가 더 쉽게 해당 선택지를 찾아갈 수 있도록 도와주었다. 동시에 배달의민족의 아이덴티티도 담겨있어서 마이페이지까지도 브랜드의 이미지를 충분히 녹여낸 점이 인상깊다.
• 그러나, 이 또한 카드의 개수가 조금 많다고 느꼈다. 시각적으로 보았을 때 약간 복잡한 감이 있었다.
• 이와 같은 맥락으로 메뉴가 그렇게 많지 않음에도 불구하고 스크롤이 이 정도까지 길어질 필요가 있었나 라는 생각이 들었다. 더 깔끔하게 정리할 수 있었을 것이라는 아쉬움이 자꾸만 드는 UI였다.

'요기요'의 마이페이지

• 요기요는 위에서 소개한 두 서비스의 아쉬운 점을 모두 해결한 UI라고 생각했다.
• 요기요의 마이페이지는 가장 중요한 요소들만 묶어 놓은 카드형 컴포넌트를 하나만 배치했다. 그 이외의 요소는 주제에 맞는 타이틀을 부여하여 분류하고, 리스트 별로 구분선을 넣어 매우 깔끔하게 디자인되었다.
• 새로 업데이트 된 항목은 적절하게 강조하여 사용자의 클릭을 유도하면서도, 그 크기가 비교적 크지 않아 보기에도 부담스럽지 않았다.

회고

예상과 달랐거나 부족했던 부분

• 이번 모작에서 가장 크게 문제가 되었던 부분은 자간과 행간을 그다지 신경쓰지 않았다는 점이었다. 그러다보니 컴포넌트의 패딩과 요소 간 간격을 맞추려고 해도 어려움이 있었다.
• 솔직히 말하자면, 컴포넌트를 다 만들고 나서 자간과 행간에 문제가 있다는 점을 발견하여 수정하려고 하니 하나하나 수정하는 것이 매우 번거로운 작업이어서 흐린 눈으로(...) 모작을 진행했던 것 같다. 컴포넌트 관련 강의를 한 번 더 복습하면서 더 효율적으로 작업하는 방법을 익혀야 할 것 같다.

잘했다고 생각한 부분

• 지난 모작의 회고에서 폰트 사이즈가 1씩 커지는 경향이 있다는 점을 아쉬운 부분으로 꼽았는데, 이번 모작에서 그러한 부분들이 잘 고쳐진 것 같아서 마음이 뿌듯하다.
• 아직 많은 모작을 한 건 절대 아니지만, 그래도 일주일에 하나씩 꾸준히 모작을 하다 보니 아이콘 그리는 실력도 조금씩 올라가고 있는 것 같다.
• 이전까지는 하단 네비게이션 바의 간격을 너무 좁게 설정하는 경우가 많았는데, 이번에는 적당하게 잘 넓혀준 것 같다.
• 마진이 1416에서 조금 헷갈렸는데, 다시 보니 14였다는 것을 알 수 있었다. 하루 안에 끝낼 수 있는 모작이지만, 23일 정도 시간을 두고 꼼꼼하게 검토한 덕분인 것 같다.

다음 모작에서 도전해보고 싶은 점

• 첫 번째 모작을 할 때부터 해보고 싶다고 말은 했는데, 겨우 이번 주가 되어서야(...) 본격적으로 디자인 시스템을 배우면서 실습을 진행하고 있다. 디자인 시스템 공부를 UI 모작과 겸해서 공부하면 더 좋을 것 같다는 생각을 항상 하고 있었다. 그리고 이제는 정말로 해볼 수 있을 것 같다. 다음 모작에서는 하나의 앱을 정해서, 일주일동안 주요 화면과 서브 화면 12개 정도를 따라 그려보고 어플의 디자인 시스템까지 만들어보고 싶다. ~과연 일주일 안에 할 수 있을지 의문이긴 하지만...~~

2020년에 출시한 MUNTO(문토)는 관심사를 기반으로 하여 사용자가 직접 온/오프라인 소모임을 만들고 참여할 수 있도록 설계된 플랫폼이다. 부가적으로 커뮤니티 기능을 추가하여 사용자가 자신의 소모임 후기나 일상을 다른 사용자들과 공유할 수 있는 공간을 함께 만들었다.

서비스 특징

문토는 소모임의 종류를 크게 세 가지로 분류하고 있다.

• 소셜링 : 일회성 모임으로, 번개처럼 가볍게 다른 사용자들과 만날 수 있다.
• 클럽 : 지속형 모임으로, 같은 클럽 안의 멤버들과 정기적 혹은 비정기적 모임을 가지며 꾸준히 만날 수 있다. 클럽 안에서 소셜링을 열 수도 있다.
• 챌린지 : 같은 관심사 목표를 가진 멤버들과 소통하여 목표를 달성할 수 있는 모임이다. 주 n회 활동을 인증하는 방식이며, 소셜링이나 클럽과 달리 온라인 모임이 주를 이루는 편이다.

또한 문토는 사용자가 만든 소셜링을 더욱 효과적으로 홍보하기 위한 수단으로 '기획전' 이벤트를 진행하고 있다. 기획전은 문토에서 제시한 필수 해시태그를 사용한 모임 중 참가비가 있는 모임만 노출된다는 특징이 있다.

서비스 UX/UI 분석

좋았던 부분

• 문토에서 '카테고리'는 서비스 측에서 사전으로 설정한 분류이며, '태그'는 사용자가 모임을 만들 때 임의로 설정하는 분류이다. 이러한 점을 고려했을 때 카테고리를 아이콘과 함께 배치하여 태그보다 크게, 위쪽에 배치했다는 점은 상-하위 분류의 위계질서를 잘 나타냈다고 볼 수 있다.
• 또한 문토는 소모임을 세 가지로 세분화하고 커뮤니티나 채팅 기능까지 가지고 있는 만큼 정말 많은 화면을 가지고 있다. 이처럼 다양한 화면을 가지고 있으면서도** 사용자가 바로바로 원하는 화면에 진입할 수 있게 만들었다는 점**이 인상깊었다. 소셜링, 클럽, 챌린지 등 모임은 상단 네비게이션 바에, 라운지, 채팅, 프로필 등 기타 부가 기능은 하단 네비게이션 바에 배치하였다는 점이 그러하다. 이는 사용자가 더 빠르게 앱에 익숙해지는 일도 도울 수 있다고 생각한다.

아쉬웠던 부분

• 앱을 실행하면 가장 먼저 배너가 보이고, 그 아래로 카테고리가 보인다. 그 아래 태그와 모임 추천은 스크롤을 내려야만 볼 수 있다. 그런데 배너가 화면을 거의 다 채울 정도로 크게 배치될 이유가 있었을까? 이미지를 크게 보여주면서 현재 진행하는 이벤트를 효과적으로 홍보하는 목적이었겠지만, 공간을 지나치게 많이 차지함으로써 사용자의 입장에서는 큰 배너가 다소 부담스러울 수도 있고 추천 모임을 찾기 위해 스크롤을 해야만 하는 불편함도 겪을 수 있을 것이라고 생각한다.
• 소셜링이 무엇인지, 클럽이 무엇인지에 대한 설명이 따로 나와 있지 않았다. 문토 앱을 처음 접하는 나로서는 이 부분이 가장 난감했던 것 같다. 클럽, 챌린지 화면으로 넘어가면 이를 설명해주는 배너가 따로 있었지만, 이러한 용어를 설명해주는 온보딩 화면이나 작은 배너가 있으면 좋지 않았을까 하는 아쉬움이 든다.

회고

예상과 달랐거나 부족했던 부분

• 생각보다 마진 값이 작았다. 14 정도로 예상했으나, 캡처 화면으로 확인해보니 12라는 값이 나오는 것을 확인할 수 있었다.
• 여전히 하나의 컴포넌트 안의 크기, 간격 값을 잘 맞추지 못하고 있다. '취향 저격 소셜링' 리스트 안의 컴포넌트가 정말 가관이다(...) 당연히 모작을 하면 할 수록 이러한 값을 맞추는 감이 늘 것이라고 예상은 하지만, 모작 하나를 하더라도 제대로, 정확하게 하고자 하는 마음가짐을 다시 한 번 다잡을 필요가 있다고 생각했다.
• 예상보다 내가 생각한 폰트 사이즈보다 한 px 씩 작았다. 폰트 사이즈 값을 짝수로 최대한 맞추려고 해서 생긴 문제였는데, 캡처 화면으로 확인해보니 폰트 사이즈는 홀수인 경우가 생각보다 많았다. 폰트 사이즈를 비롯한 모든 UI의 기본에 대해 함께 공부하면서 모작을 진행해보면 좋겠다는 생각이 들었다.

잘했다고 생각한 부분

• 그림자나 배너 안의 그라데이션 등 작은 부분까지 신경을 쓰고 있다는 점에서, 잘하고 있다고 스스로를 칭찬해주고 싶다. 앞으로도 꼼꼼함과 섬세함을 잃지 않으면서 모작을 진행하고 싶다.
• 아이콘 만드는 게 조금 익숙해졌다! 이전에는 단순한 아이콘을 제외하면 모두 펜 툴로 그리다가 망하곤 했는데(..) 이제는 하나의 아이콘을 기본 도형으로 쪼개서 볼 수 있는 능력이 생긴 것 같다.

2019년에 출시된 '하우머치'는 간편하게 근무 스케줄을 등록하고 급여, 각종 수당, 세금 등을 자동으로 계산하여 사용자가 이번 달 수익을 쉽게 확인할 수 있도록 도와주는 모바일 앱 서비스이다. 부가적으로 아르바이트생들의 익명 커뮤니티로 사용자들간의 소통 공간도 함께 만들었다.

서비스 특징

아르바이트 월급은 시급과 일한 날짜뿐만 아니라 주휴 및 야근 수당, 추가 수당, 4대 보험 적용 여부 등 고려해야 할 사항이 정말 많다. 아르바이트를 하나만 하는 것이 아니라 여러 개를 동시에 하고 있을 경우에는 월급 계산이 더 복잡해지곤 한다. 이럴 때마다 일일히 계산기를 두드리고 있는 것은 매우 귀찮고 번거로운 일일 것이다.

하우머치는 이러한 아르바이트생들의 불편함과 번거로움을 최소화하고자 출시된 앱이다. 메인 화면에서는 근무지 명과 근무 기간, 이번 달 월급을 한 눈에 파악할 수 있다. '출근' 및 '퇴근' 버튼을 통해 자동으로 근무 시간을 측정할 수 있으며 '근무 등록'으로 근무 날짜 및 근무 시간, 휴게 시간, 각종 수당 등을 수동으로 기록할 수도 있다. 여러 개의 근무지에서 일하게 될 경우 '근무지 추가'로 새로운 근무지를 추가하고 '근무지 순서 변경'을 클릭하여 각 근무지의 우선 순위에 따라 순서를 변경할 수도 있다.

서비스 UX/UI 분석

좋았던 부분

• 사용자가 원할 만할 대부분의 기능을 메인 화면에서 처리할 수 있었다.
• 그러면서도 디자인이 심플하여 가독성이나 사용 측면에서 큰 어려움이 없었다.
• 사실 이 앱에서 가장 중요한 부분은 '이번 달 내가 받을 돈이 얼마인가?'하는 부분이라고 생각한다. 그런 측면에서 이번 달 월급을 표시하는 텍스트가 큰 사이즈로 디자인되어 텍스트의 중요도를 잘 표현했다고 생각했다.

아쉬웠던 부분

• 우측 상단 '전구' 아이콘을 누르면 무엇이 나올 것이라고 생각하는가? 나는 '앱 사용 가이드' 혹은 '아르바이트 정보' 등이 나올 것이라고 생각했으나, 실제로 해당 아이콘을 누르면 '유료 버전 구매'와 '광고 제거 리워드'가 표시된다. 참고로 내가 예상했던 '앱 사용 가이드'는 앱 내에서 구현되지 않았으며, '아르바이트 정보'는 네비게이션 바의 '정보'를 클릭해야 볼 수 있다. 이러한 측면에서 사용자는 혼란을 겪을 수 있다고 생각했다.
• '출근' 및 '퇴근' 버튼은 클릭 한 번으로 근무 시간을 기록할 수 있다는 점에서 매우 편리하다고 생각할 수 있다. 하지만 막상 사용해보면 편리하지만은 않다. 오히려 불편한 부분이 많다. 예를 들어, 시급이 10,000원인 근무지에서 10시부터 18시까지 근무하는 사용자가 있다고 가정해보자. 이 사용자는 오늘 근무지에 9시 53분에 도착해서 18시 2분에 퇴근했다. 출근 및 퇴근 버튼은 근무지에 도착하고 퇴근한 시간인 9시 53분과 18시 2분에 클릭했다. 이 때 우리는 일급이 80,000원으로 계산될 것이라고 생각하지만, 실제로 앱에서는 81,500원으로 계산된다. 어찌 보면 '정확하게 계산한다'고 생각할 수도 있지만 대부분의 현실에서 이런 경우 80,000원으로 일급이 계산되기 때문에 나는 이 기능이 '현실적인 계산'을 하는 데에 있어서 오히려 매우 불편하다고 생각한다.

회고

위클리 클론디자인 챌린지 시작

UXUI디자인 프리랜서 '꽃내랑'님이 홀릭스(HOLIX)에서 운영 중이신 '위클리 클론디자인 챌린지'에 가입하게 되었다. 챌린지 운영 방향성이 내가 추구하는 공부 방향과 잘 맞았고(예를 들면, 빈 페이지에서 대부분의 요소를 직접 처음부터 만들어 보는 것), 다른 분들의 클론 디자인을 보면서도 얻는 부분이 많을 것이라는 기대였다. 이번 클론디자인은 챌린지 가입 후 첫 UI 클론 디자인이다.

금주 수요일에 가입하여 일요일까지 챌린지를 진행해야 하는 상황이었는데, 주말에 약속과 근무가 잡혀 버려(...) 챌린지를 진행할 시간이 이틀밖에 없었다. 따라서 저번 모작처럼 여러 페이지와 인터랙션을 만들 시간이 부족하여 메인 화면만 만들게 된 것이 아쉬웠다. 다음 주는 메인 화면 1장과 서브 화면 1장정도를 따라해보고 간단한 인터랙션까지 만들어보고 싶다.

잘했다고 생각한 부분

• 생각보다(!) 전체적인 큰 틀의 사이즈를 잘 잡았다. 다만 그 안에 들어가는 요소의 사이즈나 간격에서 오류가 많이 발생했다. 앞으로는 이런 세세한 부분을 더 신경써야 할 것 같다.

가장 어려웠던 부분

• 위에서 언급했던 것처럼, 간격을 맞추는 부분이 제일 어려웠던 것 같다. 앞으로 이 어려움을 해결하기 위해서는 단순히 따라만 하고 끝내는 것이 아니라, 실제 화면과 내가 만든 화면을 겹쳐 보고 실제 화면의 간격을 체크해 보는 과정이 필요할 것 같다고 생각했다. 이렇게 비교해 보니 내가 만든 화면은 컴포넌트 간의 간격보다는 그 안의 텍스트, 아이콘 등 각종 요소의 간격이 가장 심각(..)하다는 것을 한 눈에 파악할 수 있었다. 컴포넌트를 만드는 데에 아직 익숙치 않다는 이유도 있을 것 같다. 다음 모작에서는 이 부분에서 가장 많이 고민해야 할 것 같다.
• 내가 만든 화면이 실제 화면보다 더 쨍하고 밝은 느낌이 있는 듯하다. 다음 모작에서는 실제 화면에서 컬러를 추출한 결과와 내가 설정한 컬러를 비교해보며 어떤 차이가 있는지 자세하게 공부해보고 싶다.

Toss Signup Clone Design Figma Prototype

서비스 소개

서비스명 : Toss Toss는 비바리퍼블리카가 운영하는 핀테크 스타트업이다. '간편송금'을 위주로 종합적인 금융 서비스를 실시하고 있다.

"사용자라면 누구나 불편함없이 공평하게 서비스를 이용할 수 있어야 한다"

이와 같은 철학덕분에, 토스는 쉽고 간편하다는 특징으로 많은 사용자를 보유하고 있는 서비스이다.

서비스 특징

Toss UI의 가장 큰 특징은 역시 1 thing/1 page가 아닐까 싶다.

이는 이번에 클론 디자인 주제가 되었던 Signup에도 잘 나타나있는데, 한 페이지에 오로지 하나의 항목만을 입력하게 하여 사용자가 느낄 수 있는 가입 절차의 복잡함과 번거로움을 최소화하였다.

이미지출처 : WWIT

이처럼 같은 카테고리의 다른 APP(KakaoPay)와 비교하면 Toss의 특징이 더욱 확연히 드러난다.

이미지출처 : WWIT

Toss 가입 화면의 또 다른 특징은 텍스트 필드를 역순으로 배치했다는 것이다. 지금까지 입력한 것들을 보여주면서도 새로운 입력 필드에 도달하기 위하여 따로 스크롤을 해야 할 필요도 없다는 점을 생각하면, 사용자의 불편함을 최소화하기 위해 부단히 노력한 UI라고 볼 수 있다.

하지만, 여기에서 한 가지 의문이 들 수 있다. "텍스트 필드가 역순으로 배치되면 오히려 사용자가 어색함을 느끼지 않을까?"라는 것이다. 그러나 이러한 의문을 Toss 사용성 테스트를 통해 해소하였다. 이는 toss tech 블로그에 자세하게 적혀있다.

toss tech : 거꾸로 입력하는 가입 화면, 처음에 어떻게 떠올렸을까?

아티클의 내용을 간단히 정리하자면, 사용자는 본인이 입력해야 하는 파란 라인의 텍스트 필드에 집중하기 때문에 이미 입력한 텍스트 필드의 순서에는 크게 신경을 쓰지 않는다는 것이었다. 이로써 Toss는 1 thing/1 page라는 디자인 철학을 지키면서도, 사용자가 느낄 수 있는 순서 배치의 어색함에 대한 의문도 해결한 채, 사용자가 더욱 편리하고 쉽게 느낄 수 있는 가입 화면을 만들었다.

회고

처음 시도한 클론 디자인

이번 클론 디자인은 내가 UX/UI design 공부에 입문한 후로 처음 제작한 클론이다. Figma 강의를 들으면서, "이걸 실무에서 대체 어디에 어떻게 쓴다는 거지?"라는 의문을 직접 해소하기 위해 맨 땅에 헤딩(...)처럼 시도한 클론 디자인이었기에, 아쉬운 부분이 매우 많이 느껴진다.

ⓐ 예를 들면, button의 prototype같은 것이다. 실제 Toss의 가입 화면 작동 방식과 최대한 비슷하게 구현하고 싶었기에 button에 간단한 Animation을 넣어 실제로 button을 클릭했을 때 button이 눌리며 약간 축소되는 모습, 클릭되는 모습을 만들고자 하였다. 하지만 막상 만들어보니 button이 좌측을 기준점으로 눌리는 모습을 볼 수 있었다. (이 부분을 아직까지도 해결하지 못했는데, 혹시 해결 방법을 아시는 분이 있으면 댓글 바랍니다...)

ⓑ 또한 약관에 동의하는 page에서는 본래 필수 항목을 모두 동의한 후에 '확인' button이 활성화되어야 하는데, 그 부분을 자세히 구현하지 못했다는 점도 많은 아쉬움이 남는다.

이 외에도 아쉬운 부분이 많지만, 가장 크게 느낀 문제점은 이 두 가지였다.

그러나 color와 icon/font size, margin 등을 기존 reference 위에 그대로 따라그리지 않고, 빈 페이지에서부터 시작하여 만들었다는 점, 기존의 icon이나 imege 등을 그대로 가져오지 않고 모두 직접 만들어 보았다는 점에서 매우 큰 의의가 있는 활동이었다. 개인적으로 모작을 하며 기존의 것을 그대로 따 오거나 그 위에 대고 그리는 것은 공부하는 데에 큰 의미가 없다고 생각하기에, 이러한 방식은 앞으로도 모작을 하면서 계속 유지를 할 생각이다.

다음 클론 디자인에서는...

이번 모작을 하며 design system을 새로 공부해보고 싶다는 생각을 했다. 하나하나 순서대로 만들다 보니, page 간의 일관성이 떨어진다는 느낌을 많이 받았기 때문이다. 이러한 문제를 해결하기 위해 design system을 미리 만들어 두고 시작을 하면, 작업 속도도 더욱 빨라지고 각 page도 서로 통일된 느낌을 보여줄 수 있지 않을까, 하는 기대가 있다.

새로운 것들을 계속 공부하고 시도해나가는 과정이 아직까지 너무나도 재미있다. 실무에서 일하면서도, 몇 년, 몇십 년이 지나도 이처럼 공부에 대한 열정과 흥미가 식지 않으면 좋겠다.