힐다의 작업실

뒤늦게 다시 시작하게된 디자인시스템 공부하기! 저번까지 과정을 하면서 느꼈던 점은 딱히 서비스가 없으니까 기준 잡기가 어려웠다. 그래서 정말 정말 정말 간단한 서비스를 생각해두고 진행해야하나? 싶은 생각이 들었다. (근데 그러면 기획도 조금 해야하니까 이쪽 공부?도 같이 병행이 필요할 듯!, 근데 당장 엄청 이게 중요도 있는건 아니니 주객전도되지않도록 조심) 과정을 진행하면서 다른 디자인시스템은 어떻게 했는지 같이 기록하는게 좋을 것 같다 정부 디자인시스템, 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디자인적으로 조금..부족하다는 생각이 갑자기 들어서 다음부터는 클론디자인을 주마다 진행하면서 병행해볼 생각이다!