UI 브리핑 : 4화 - UI 설계를 공부하는 방법
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
자, 오늘은 웹페이지에서의 '보이는' 부분과 '보이지않는 실제 비례'를 확인하는 방법을 알아볼겁니다. 이건 그리드시스템 / 최소단위를 아는것과도 연관이있는데요. 아시는 분들은 아시겠지만. CSS는 눈으로 보여지는 것들 외에. '가상의 박스'들을 만들어. 레이아웃을 잡게해주는 기능도 갖고있습니다. 실제로 개발자들이 / 퍼블리셔들이 확인하게되는것도 이런 가상의영역들이죠. 그리고 그걸 덩어리단위로. 반복 / 패턴단위로 잘라내어 붙여넣는게 개발자들이 실제 하는 일들입니다.
예를 들어서 이건 네이버 메일의 레이아웃을 선으로 표현한것입니다. 우리가 눈으로 보는것 이상으로 작은 박스들이 여러개 있고. 그것들이 다 일정한 크기의 반복되는 박스들로 이뤄져있다는걸 알 수 있습니다.
이 페이지는 네이버의 클라우드 플랫폼 서비스의 레이아웃을 들여다본것인데요. 우리가 '생각'으로 하는 것들고. 실제 정확한 레이아웃 영역은 조금씩 차이가있다는걸 알 수 있습니다. 실제로 디자이너들이 훈련을 통해 '보이지않는 레이아웃을 봐야하는' 훈련엔. 이런 틀을 바라보는 것이 포함됩니다.
또한 어떤 페이지를 보건 간에. 그 페이지가 반응형 처리가 되어있는지. 아니면 개별로 주소를 따로 처리해서 모바일 진입시 -다른 페이지를 따로 보여주는지. 모바일 레이아웃이 우선되어야하는 페이지인지. PC 레이아웃이 우선되어야하는 페이지인지도 확인을 해야합니다. 위의경우는 PC가 우선시된것에 가깝겠네요
. 위의 화면은 구글의 클라우드 플랫폼 UI이고. 이역시도 레이아웃을 확인해보면. 네이버와는 크기나 비례가 꽤 차이가 난다는걸 알 수 있습니다. 실제로 복잡한 화면일수록 디자이너들이 설계 / 디자인하는데 있어서 많은 시행착오가 필요하고. 분석해봐야하는 중요도가 올라갑니다
사실 이건 그리드 최소단위에 대한 분석을 이야기드렸던 때에 잠시 얘길 드렸던건데. 회사마다 디자인 단위가 다르고. 구글의경우는 특히나 전세계적으로 유명한 곳이지만. 비례사용이 일반적인 디자인들보다 좀 크고. 뭉툭한 편입니다. 그래서 개인적으로는 PC전용의 화면을 디자인한다고하면. 그리드 단위는 카카오나 네이버같은 IT 기업들을 참고하시는게 좋습니다. 다만 설계나 페이지 단위의 이동. 메뉴 구조 등에 있어서는 구글등을 참조하시라고 추천드리고싶네요.
복잡한 구조일수록 설계에 공수가 들어가고 그걸 어떻게 해결했는가를 따라하고 / 응용하는것이 UI 디자이너의 역할이기도합니다.
실제로 실무를 하시다보면. 서비스 하나만 잡고들어가는 - 시안성 페이지를 만드는게 아니라면 관리자나. 통계. 일반 사용자들에게 드러나지않는 - 어드민성 페이지를 만들게되는 경우가 많습니다. 패션 디자인이나. 사진이미지로 퉁칠수있는 페이지가 아니라. PPT나, 실시간 통계, 관리페이지 등의 데이터들이 대부분이라는것이죠. 그래서 수준높은 UI디자인설계와 / 실무를 대비하기위해서는 꼭 확인해보시기를 추천하는 몇가지 사이트들이있습니다.
무수한 서비스를 동시에 포함하고. 판매 / 관리할 수 있는 - 클라우드 플랫폼 (네이버, 구글, 아마존 등)이 그것이고요. 그 다음이 메일 서비스 (네이버, 구글 등)입니다. 그리고 또 한가지는 키워드 광고 / 통계에 관련된 화면들입니다.
당 서비스들은 약간의 회원가입 절차만 겪고나면. 굉장히 복잡한 구조들을 보여주는데요. 레이아웃적으로 완벽하기보다. 4:3 비율과 16:9 비율의 화면을 모두 지원하기위한 고민이 그대로 들어간 - 복잡한 데이터 화면들이 굉장히 많습니다.
위화면은 구글 애널리틱스의화면인데. 단순통계뿐 아니라 상세한 레이아웃별 - 별도 통계화면까지 제공합니다. 그만큼 레이아웃에 대한 설계와 배치에 대한 고민이 많았다는 것이고. 들여다볼만한 내용도 많다는 것이죠
정리하면.
1. 메일 시스템
2. 클라우드 플랫폼 (개발전용 서비스)
3. 키워드광고 / 통계분석 서비스
이 세가지에 대한 부분은 UI디자이너로서 꼭 역분석을 해봐야하는 서비스들입니다. 역기획서를 써보시는것도 필요할거구요. 또한 그 과정 이후에 세부적으로. 데이터테이블은 어떻게 썼는지. 메뉴구조는 좌측 / 상단 탭 / 드롭다운 등을 어떤식으로 사용했는지. 그리고 해당 페이지에 대한 모바일 지원이 되고있는지. 거의 조사보고서를 쓰시는것처럼. 세세하게 체크해보고. 정리해보시는게 필요합니다.
위에서 이야기한 구글. 네이버, 아마존 등의 회사들은 사실상 IT 업계의 표준과도같은 회사들이며 사실상 네이버도 구글이 하고있는 디자인 시스템을 그대로 따라가려고하고있는 상황입니다. 그래서 더욱더 - 작업물이나. 설계에 대한. 포폴을 작성하시려한다면 크게 두가지가 필요합니다. 하나는 구글쪽의 설계와 프로그래밍적 연결선의 중요성을 강조하시면 좋구요. 하나는 awwwards같은 곳에서 기술적인. 아티스트적인 측면의 강조점들중. 괜찮은 서비스를 비슷하게 따라만들어보시는게. 설계자와 - 아티스트의 성향 모두를 증명할 수 있는 방법이 될거라고 봅니다.
또한 이외에도 해외동향을 통해서. 주요 업체들 (예 :lyft, spotify 등) 에 대한 디자인 트렌드를 확인하 고. 경쟁사들에비해 어떤 구조가 다른지.강점이 뭔지에 대해서 분석하는것도. 4~5년차 이후의 UI디자이너에게는. 꽤나 중요한 연구과제들중 하나입니다.
그리고 여기에 추가로. 여력이 남으신다면. (언제까지나 선택적입니다) 아주아주 복잡한 화면을 가진 게임들이나. 서비스들을 찾아서 스크린샷을 찍고. 자료화해서 정리해보는것도 아주 좋은 방법입니다. 복잡한화면들에 대한 레이아웃. 표기되는 정보의 양. 그것들의 연관관계까지. 단순히 눈으로 보기보다는 계속 눌러보고, 연결되고. 그걸 '이렇게 했으면 더 좋았을텐데'하고 체감하는게 중요하거든요.
제가 오늘 이야기드린 서비스들은 수많은 - 현업 서비스들 중에서 아주 일부에 불과합니다.다만 복잡도나. 메뉴구성. 그리고 정보의 중요성 부분에서 - UI 디자인과 기획 / 마케팅 분야까지. 꽤 밀접한 관계를 가진 서비스들이죠. 실제로 더 잘 만들어진 서비스들은 어떻게 그걸 해결했는지. '과연 내가 생각하는 것들'이 실제 실무에 반영할 수 있는 구조인지. 항상 자료를 통해 검증하고. - 더 나은 구조를 찾는 습관을 들이시는게 중요합니다.
오늘 이야기한 내용을 정리하자면 다음과 같습니다
1. 웹디자인 트렌드라는건 디자인 스타일보다, 설계와 메뉴구조가 더 중요하다
2. UI 설계 실력을 늘리려면.내용이 복잡하고, 잘 드러나지 않는 (데이터 뭉치들이 많은) 서비스를 분석해보면 좋다.
3. 메뉴구조와 설계에서는 개발자가 우선시되는 구글이 더 낫고, 네이버의 스타일링. 디자인. 비례감각 등은 참고하면 좋다
4. 메일시스템 / 키워드광고, 분석 / 클라우드 플랫폼 - 이 세가지 서비스는 꼭 확인해보자.
5. 이외에도 해외에서 잘나가는 서비스들이 뭔지. 그들의 상대적 강점은 뭔지. UI는 어떻게되어있는지. 대충 10~20개 정도는 꼭 알아두고. 확인해보자 (국내도 포함)
내일은 - 쉬어가는 느낌으로. 게임UI를 통한 스케일링과. 윈도우 기반의 배율 기반 스케일링. 그리고 우리가 사용하고있는 모니터 화면에대한 - 오해와 실제.에대한 얘기를 좀 해보겠습니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
