클론디자인 올리던 것을 브런치와 인스타그램에 올리고 있습니다. https://brunch.co.kr/@hilda 꾸준히 올릴려고 노력 중입니다.^.^ 다음부터는 디자인을 더 분석해보도록...해야겠어요!

최근들어 인스타그램이나 디자인 오픈채팅방, 디스코드방을 통해 여러 정보를 얻는 편인데... 어디서 봤는지 정확하게 기억은 안나지만 캠프콘을 알게되고 주제가 너무 흥미로워서 바로 냅다 신청했었다. 1부로는 김성배님이 "여러분의 포트폴리오가 고객 중심이 아닌 이유"라는 주제로 강연을 2부로는 레드버스백맨님이 "UX리서처의 일, 질문으로 경험을 들여다보기"라는 주제로 강연을 해주셨다. 일단 취준생인만큼 첫번째 주제가 제일 관심이 갔었다. 잦은 서류 탈락으로 문제 해결을 잘 보여주지 못하고 있진 않았을까 어떻게하면 사용자 중심으로 문제 해결한 것을 보여줄 수 있을까에 대한 고민이 있던 도중 그것을 해결해줄만한 주제였던 것 같다! 1부에서는 고객 문제가 무엇인지, 가설이 무엇인지, 고객 문제를 가설을 활용해서 해결하는 방법까지 예시를 정말 잘 활용하시면서 설명을 해주셨다. 기존에 많이 받고 있는 포트폴리오 형태를 말씀하실때.. 그게 대부분 취준생의 포트폴리오라고 생각했다. 물론 내 포트폴리오도 그렇게 구성되어있었다 (내가 생각하는 문제점 → 이렇게 해결하겠다) 단순히 고객의 불편함이 문제가 아니라 고객이 기대하는 것과 현재상태의 차이를 알고 그것을 일치시키기위한 문제해결이 필요하다는 것을 알게되었다. 고객 문제를 정의하는 방법과 가설 중심으로 일하는 법 등 다양한 예시를 들어주셔서... 포트폴리오 정리할 때 열심히 글로 먼저 작성해보고 자연스럽게 읽힐 수 있도록 간략하게 정리하는 과정부터 다시 진행해야겠다고 생각이 들었다... 이후 질의응답 시간도 명확하게 설명해주시는 것을 보면서 이 직군에서는 저렇게 간단하게 설명할 수 있어야하는 능력도 중요한 것 같다는 생각이 들었다. 2부로는 레드버스백민님의 강연이었다. 레드버스백맨님은 여러 글에서 많이 봤던 분이셨다! ux리서처 직무에 대해서 깊게 관심이 있는건 아니지만 ux리서치에 관해서는 궁금한 점이 많았는데 리서치에 대해서든 리서처에 대해서는 잘 설명해주셔서 사용성에 대해 더 생각해볼 수 있는 시간이었다. 이번 시간에 제일 인상깊었던 것은 [공유]가 중요하다는 것! 업무를 하면서도 다른 사이드프로젝트를 하면서도 사소한 공유를 못해서 (나 포함) 조금씩 아쉬웠던 경험이 있었는데... 결론적으로 잘 정리하는 것과 공유하는 것이 중요하다고 생각된다.

처음해보는 해커톤 동아리 자체도 처음이었고... 이런 해커톤이라는 이름의 활동도 처음이었기에 조금 걱정이되었다! 그리고 해커톤 타임테이블이 공개되자마자 살짝 긴장했다.. 어떻게 아침 9시30분부터 밤 11시까지 남아있지? 생각이 들었기때문인데 다행히 팀별로 유동적으로 8시간만 채워도 괜찮다고해서 안심했다. (장소까지 가는데 2시간이었기때문😅) 해커톤 당일 우리팀은 아침 10시~저녁7시까지 진행했다. 10시쯤 오니까 우리팀만 거의 왔었고.. 다른팀은 점심 드시고 오시거나 조금 더 늦게오시는 경우가 많았다. 그만큼.. 더 늦게 남아계시긴하셨지만..! 일찍와서 일찍가는게 더 좋았던 것 같다. 해커톤 일정이 동아리 일정에 거의 막바지에 있었기때문에 디자이너 업무는 엄청~ 많지않았다. 대략적인 진행과정 개발자분이 테스트앱에 올리기 → 디자이너와 기획자는 테스트앱을 통해 QA 진행 (버그를 상-중-하로 나눠 우선순위 나눠 올림, 이때 간편하게 하기 위해 노션을 이용) → 직접 만날 기회가 적으니 개발자분들끼리 소통하며 바로 버그 및 작업 진행 → 남은 시간동안 기획자는 앱 심사에 필요한 기획작업 / 디자이너는 2주 뒤 최종 발표 자료 준비 → 중요 버그 픽스 후 재배포한거 보고 재확인의 과정을 거쳤다. 이날 안드로이드 개발자 1분이 못오셨고, 우리팀 담당 운영진분도 못오셔서 안드로이드 개발자 1분이 엄청 고생하셨다...! QA과정 회사에서는 QA담당자분이 따로 계셨고, 거진 웹앱이어서 테스트앱은 아이폰만 진행해본 경험이 있었는데 안드로이드로 처음해봐서 조금 재밌었다... (?) 안드로이드폰 너무 오랜만에 사용해봐서 그런지 ㅋㅋㅋㅋㅋㅋㅋ 버벅거리긴했는데... 재밌었던 경험...! 어차피 앱 나오고나면 확인도 안드로이드폰으로 해야하니까 아빠 공기계..제가 잘 사용하도록 하겠습니다 😅 여튼 테스트앱으로 들어가서 작동이 잘 되나 + 디자인이 잘 나왔나를 확인했다. 많은 기능이 있던 것은 아니라 기능적으로는 엄청 크리티컬한 이슈가 (물론 테스트앱 전에 고쳐주시긴했지만) 많이 있지않았고 디자인적으로 잘려보인다던가 폰트가 기기 폰트로 나온다던가하는 이슈나 짜잘하게 패딩값이나 간격이 맞지않는 경우를 많이 올렸던 것 같다. 너무 계속 일만하면 집중이 안되니까 중간에 게임을 했었는데 재미있었다. 다들 너무 잘맞추심~ 즐거웠다...

뒤늦게 다시 시작하게된 디자인시스템 공부하기! 저번까지 과정을 하면서 느꼈던 점은 딱히 서비스가 없으니까 기준 잡기가 어려웠다. 그래서 정말 정말 정말 간단한 서비스를 생각해두고 진행해야하나? 싶은 생각이 들었다. (근데 그러면 기획도 조금 해야하니까 이쪽 공부?도 같이 병행이 필요할 듯!, 근데 당장 엄청 이게 중요도 있는건 아니니 주객전도되지않도록 조심) 과정을 진행하면서 다른 디자인시스템은 어떻게 했는지 같이 기록하는게 좋을 것 같다 정부 디자인시스템, 11번가 디자인시스템 등 공개된 디자인시스템이 많아서 비교해서 공부하면 좋을 것 같았다. 아니면 연습과정으로 생각하고 컴포넌트부터 시작해본다. 일단 기본적인 컴포넌트인 버튼, 인풋, 컨트롤 등등을 직접 만들어보며 연습한다. 그래서 결론은? 일단 하자! (고민할 시간에 뭐라도 하면서 배우는 것이 더 좋다!) 서비스를 만들어야하나 고민이 되었지만, 그건 차차 생각하도록하고... 일단 나는 디자인시스템을 완벽하게 만드는 것이 아니라, 다양한 디자인시스템을 보면서 직접 해보면서 배우는 목적이 더 크기 때문에 일단 하기로 결정했다. 그 이후에 내 개인 프로젝트를 하면서 + 사이드프로젝트를 하면서 디자인시스템을 만들 때 더 도움이 될 것이라고 생각한다. 이전에 컬러랑 타이포는 얼추 잡아놨기때문에 다음단계로 넘어가면서 컬러랑 타이포가 부족한 부분을 보충해가는 방향으로 진행했다. 컴포넌트 연습 연습이라는 단어를 붙이긴했지만... 시중에 나와있는 디자인시스템 (머테리얼, HIG, Figma, 원티드 등)은 어떻게 작업을 했는지 확인해보고 나는 이런 방식을 이용해서 컴포넌트를 제작해보는 방식이었다. 그래서 일단 기본 중에 기본! 컴포넌트인 버튼, 텍스트필드, 컨트롤 파트만 일단 정리했다. 버튼 크게 Solid Outlined Text 타입을 나눠서 제작했다. 일반적인 버튼만 먼저 만들었다. (아이콘 버튼이랑 다른 버튼은 추후 제작 예정)

나는 6월부터 DDD(IT 업계의 개발자와 PM, 디자이너들을 위한 사이드프로젝트 모임) 11기에서 활동 중이었다. DDD에서는 벌써 6번의 모임을 진행했었고 8월 31일 7번째 모임에서는 기획+디자이너 분들과 팀에서 만들고 있는 서비스를 UT하는 시간이 주어졌다. 이렇게 오프라인으로 UT를 하는 것은 처음이었어서 긴장됐다. 진행과정 [8월 29일 목요일] 주간 미팅 테스크 설정 및 시나리오 정리 (PM분께서 미리 노션에 정리를 해주셔서 너무 도움이 많이됐다) 디자이너분과 프로토타입 파트 분배 [8월 30일 금요일] 프로토타입 제작 UT를 어떻게 진행할 것인지 정리 [8월 31일 토요일] UT 진행 UT를 설계할 때 먼저 우리의 서비스가 많은 기능이 있지 않았기 때문에 서비스 전반적으로 다 이용해볼 수 있게 진행하는 방향으로 설정하고, 각각 화면에서 이런 점들이 사용자가 의문을 가지거나 불편해하지않을까? 하는 가설을 설정하고 질문을 작성했다. UT 질문지 말하는게 익숙하지않아서 대본을 준비해갔다.. 상황이 끝나면 노션보면서 질문을 했다.

곧 끝나가는 파리 올림픽, 잘 보고 계신가요? 저는 매우 즐겁게 보고 응원하고 있는데요! 올림픽 기간 때마다 네이버와 다음에서는 특집 페이지가 생기는 것을 아셨나요? 경기를 검색해보면 나와서 이미 알고 계신 분이 많으실거라 생각됩니다. 예전에는 자주 사용하던 네이버에서만 슉 확인만 했었는데요. 이런 특집 페이지에서 사용자 경험을 어떻게 고려해서 구성했을지 분석해보는 것도 저에게 많은 도움이 될 것 같아서 저 나름대로 UXUI 분석을 해보았습니다. 첫 페이지 첫 페이지인 메인화면입니다. 네이버의 경우 기존 네이버 스포츠 안에 "PARIS NOW"라는 탭 메뉴를 따로 만들어 거기서 볼 수 있게 했습니다. 다음의 경우 다음 스포츠 안에 GO! PARiS라는 메뉴가 있고 눌렀을 때 단독 페이지로 이동합니다. 여기서 살짝 여담이지만 다음의 PARiS는 i만 소문자로 해놓은 이유가 살짝 궁금해지네용.. 오늘날짜의 경기 알림 네이버 : 오늘의 올림픽 경기라는 타이틀, 다섯개의 경기를 리스트 형태로 우선적으로 보여주고 하단 화살표를 누르면 더 많은 일정이 나오며 파리 일정 전체보기 버튼이 나와 일정 부분으로 이동할 수 있게 합니다. 다음 : 오늘의 주요 경기라는 타이틀, 경기 하나씩 카드 형태로 보여주며 좌우로 스와이프해 볼 수 있습니다. 그리고 우측에 총 9개의 경기라고 표시되어있어 대한민국 경기가 오늘 몇개 있는지 바로 인지할 수 있는 점이 좋았습니다. 대한민국의 메달 현황 a. 네이버 홈화면에 띠배너 형태로 메달 현황이 나오며, 클릭 시 메달 페이지로 이동 메달 페이지에서 대한민국 순위와 함께 합계 메달 개수와 폭죽이 터지는 애니메이션이 같이 나오며, 메달리스트도 확인 가능 순위 리스트에서 꺽쇠를 클릭 시 종목별 어떤 메달을 득했는지 확인 가능 b. 다음 홈화면 상단에 크게 위치해 있으며 클릭하면 동일하게 메달 페이지로 이동 메달 페이지에서 대한민국 옆 꺽쇠를 누르면 종목별 어떤 메달을 획득했는지 확인 가능

먼저 디자인 시스템이다보니까... 무엇에 대한 디자인시스템인지 정의가 안되어있으면 당연히 의미가 없긴하면서도 일단 공부하는 느낌이다보니까 대략적으로 작은 서비스 하나 생각하면서 작업 중에 있습니다. 이전 글에 이어서 Primitive 컬러를 먼저 베리어블에 등록했습니다. 그리고 만들 서비스에서 자주 사용되는 컬러들은 따로 semantic 컬러로 베리어블 등록했습니다. 프로젝트할 때 디자인시스템 만들면서 들었던 말과 거기서 얻었던 인사이트가 있었는데 동아리활동을 하면서도 디자인시스템을 작업을 했는데 이게 서로 소통을 못했다보니까, 팔레트 색상을 해놓고 좀 시간 지나서 시멘틱 컬러를 지정해놓으니까 개발자분들이 헷갈려하셨었다. (팔레트 색상 다 등록해놨는데 디자인에서는 시멘틱으로 다른 이름으로 되어있으니 이 컬러는 뭐지? 하면서 찾아다니셨다고...) 그래서 다시금 이런 작업을 할 때에는 공유하는 것이 제일 중요하다는 것을 깨닫게되는 순간이었다 다시 디자인시스템 작업으로 돌아와서 폰트 스타일 설정 및 갭, 패딩, 마진에 쓰일 간격들도 베리어블에 등록해놓았다. 여기까지하면서 다른 디자인시스템을 많이 봤었는데, 조금씩 다 다른 이름, 방식으로 베리어블이 정리된 것을 확인할 수 있었다. 역시 디자인시스템은 단기간에 슈슉 만들기에는 그 서비스와 같이 일하는 사람들 간의 소통을 바탕으로 정리되어야한다는 것을 알게된 것 같다. 일단 여기까지 진행하고나서 UI디자인적으로 조금..부족하다는 생각이 갑자기 들어서 다음부터는 클론디자인을 주마다 진행하면서 병행해볼 생각이다!

하게된 이유 현재 채용공고만 봐도 디자인 시스템이라는 단어는 거의 들어가고 있다. 예전 회사에서 디자인 시스템을 만들어, 프로젝트를 진행하긴 했지만 뭔가 아쉬웠다. 현재 동아리 디자인 작업을 하면서도 내가 예전에 정말 대략적으로만 스타일을 지정해놨었구나 하고 반성하게 되는 순간이 계속 찾아오고있다... 디자인 시스템을 만들면서 피그마 베리어블 기능에 대해서도 공부도 같이 할 수 있다. 디자인 시스템 장단점 개인적인 생각이지만 장점으로는 일관성 업무 효율성 사전 정의 된 컬러,컴포넌트 등을 재사용하기 때문에 빠르게 이용할 수 있고 디자인 이외에 다른 것들에 리소스(고객 경험 등)를 활용할 수 있다. 또한 개발자,디자이너,기획자 등 같은 문서를 보기 때문에 서로 오해없이 소통할 수 있다. 단점으로는 만드는데 시간이 오래 걸리고 추후 관리도 해야한다. 한 번 만들고 끝! 이 아니라, 팀 내에서 계속 유지관리를 해야한다. (괜히 디자인시스템 팀이 따로 있는 회사가 있는게 아닌 것 같다) 목표 피그마 베리어블 기능을 최대한 활용해 제작하기! 최대한 꼼꼼하게 적용해보기 컬러 정의 먼저 크게 primitives와 sementic 컬러로 나누어서 정리를 진행했다. 정리를 진행하다보니 어떻게 정의할까 고민되었던 것이 있는데