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

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