UI 브리핑 : 30화-디자인 브리핑 복습, 총정리
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
기존에 정리해둔 UI 디자이너의 핵심역할 영상 - 에서도 이야기를 드렸지만 결국 UI 디자이너의 역할의 핵심이되는건. UI 모듈에 대한 분석과. 설계에대한 부분입니다.
https://www.youtube.com/watch?v=g6LiPL3zTHU
그리고 이런 설계라는건. 결국 비즈니스의 상황에맞는. 모바일 OS의 기본 규격들과. 웹 템플릿 등을 이용해 - 최대한 빠른 시간 내에. 최적의 UI를 설계하는걸 말합니다. UI 디자이너들이하는건 예술이아니고. 클라이언트가 원하는 규격을 제시하고. 그걸 실제로 개발할수있도록 돕는. 전략가의 성향이 강합니다. 기술의 발전 속에서 결국 UI 설계는 점점 더 - 에술적인 자유도를 높이는 방향보다는 시스템적인 규격을 반복하고. 재사용이 가능한 형태로 - 최소화하는 과정으로 연결이 되어왔습니다.
https://brunch.co.kr/@clay1987/132
대표적으로 부트스트랩같은 웹 프레임워크가 그런 규격이구요. 규격의 내용을 수정하고, 배치만 좀 바꿔주는 형태로도 실무에서 원하는 규격들을 금방 만들수있게되었죠. 물론 이런 규격들을 사용하는 설계는. 솔직히 재미가있는것도아니고 굉장히 제한적입니다.
https://medium.muz.li/ui-interactions-of-the-week-133-bf8578b14459
여러 인터렉션방식. 그리고 여러 애니메이팅까지가능해진 XD나 스케치같은 프로그램이 나왔죠. 하지만 저희방에서 이런 규격들이나 컨셉이미지들을 소개하지않는 것도. 실무에서는 이런 유니크한 컨셉의 UI를 거의 사용하지 못하기때문입니다. 정말 대단한 브랜딩 프로젝트가 아니고서야. 일반적인 규격은
이런 원페이지 레이아웃 웹하나에 세부페이지를 집어넣는 정도만으로 끝나버리거나. 아예 이런 원페이지 레이아웃에 - 개별 메뉴에 네비게이션 위치만 달아서 끝나는게 대부분입니다. 이보다 더 복잡한 사이트를 만들고. 거기에맞는 UI 모듈을 달아내야 디자이너로서 성장하고. 설계실력이 올라가는데. 사실 그런 프로젝트를 맡으려면 통신사나. 상세화면. 기능이 복잡한 서비스. 혹은 관리자페이지 등을 다뤄야하죠.
어드민. 관리자페이지나 대시보드같은 경우는 많이 보셨겠지만. 실제로 이런 대시보드는 - 단순 데이터표기가아니라. 태블로나 D3 등의 데이터 관련 시각화 기술과 연결이되어있고 어떤 데이터를 가져다가 -어떤규격으로 보여줄것인지. 모바일 규격에대한 반응형 처리는 어떻게할건지. 이런 부분이 더 중요하고. 심지어 이런 화면들은 실제 실무에서는 그렇게 자주 만나게되기도 어렵죠. 이미 템플릿화는 많이 되어있으니까요.
오히려 UI 디자이너들이 가장 많이 다루게되는것들 중 하나가 이런 데이터 테이블입니다. 실제로 초보자들이나 1~2년차분들이 포트폴리오로 갖고오는건 대부분 컨셉샷이고. 실제실무에서는 사용하지않는 쇼핑몰이나. 사진 위주의 이미지들이 대부분인데반해 실무에서 해야하는건 정보의 위계질서랑. 데이터 편집 / 수정이 편리한 관리자페이지나. 고도의 설계 능력이 필요한 경우가 대부분입니다. 사실 이런 이유에서 저희 방에서는 컨셉 이미지들을 전혀 갖고오지않았었죠. 오히려 사업단위와 개별 서비스들을 분석하는 과정을 많이 가졌었습니다.
https://brunch.co.kr/@clay1987/115
또한 기존의 앱서비스에서 멈추는게아니라. 웹서비스를 다루기위해서 UI 디자이너가 배워야할 시각적 분석방법인. 그리드 최소단위에대한 분석이나 실제 탬플릿이나. 웹상에서 다운받은 자료들을 기반으로 서로 규격이다르고, 비율이 다른 녀석들을 합치는 바업에대해서 이야기해보려는것이 추후의 방향입니다.
https://brunch.co.kr/@clay1987/91
그리드 최소단위를 기반으로한 - 레이아웃 분석과, UI조합에 대한 튜토리얼
https://www.youtube.com/watch?v=Upjt_3ykkAU
추후에는 8point grid라던가 여러이미지를 규격화하는 그리드시스템들에대한 소개와 실제 사용법에대한 내용도 다루게될 예정이구요.
https://blog.prototypr.io/9-best-grid-system-for-web-mobile-ui-265c68d30c09
https://brunch.co.kr/@clay1987/109
기존에 제가 잠시 테스트용도로 진행했던 타이포에대한 실제 실험이나. 사용법.
https://www.youtube.com/watch?v=UsworeC7YkA
게슈탈트 시각이론에 대한 사용방식을 기반으로한 이미지분석법들중 도형적 레이아웃.이라는 부분으로 레이아웃 배치와 구도를 분석하는 방식. 그리고 사진이미지에 안정적인 구도를 가져오는 도형적 분석방식에 대해서도 이야기를 해볼겁니다.
사실 제가 이런 실질적인 튜토리얼을 먼저 이야기하지않았던 이유는. 제 생각에 - 여러분들이 이런 내용들을 다들 이미 알고있을거라고 생각했던것도 있는것같습니다. 그리고 어느정도는 그 생각이 틀렸다는 것과. 개별 설명 외에도 실제 튜토리얼이 꼭 필요하다는점을 좀 늦게 인식하게된것 같네요.
오히려 기존에는 의료 업계분석이나. VR시장. 웹쪽에서 클라우드 플랫폼 등의 서비스들을 들여다보면서. 웹개발의 변화지점과. 앞으로 UI 디자이너들이 살아남기위한 방향성이 어떤 방향인지. 뭘 더 배워야하는지를 다뤘었습니다.
https://brunch.co.kr/@clay1987/162
해당영상에서도 이야긴 드렸지만. 결국 UI 디자이너가 성장하는 과정에서는 업계에대한 이해가 필수이고. 거기에 다시 복잡한 설계와. 상황별 전략적인 템플릿 선택. 수정방식. 기본적으로 사용할수있는 UI와, 새로 만들어져야하는 UI를. 매우 치밀하게 계산해서 개발자와의 소통을 하거나. 거의 기획자 수준의 역할을 맡아야한다는거. 그리고 연차가 5년차 이후에는 단순히 시각물을만드록 설계하는 레벨을 넘어서서 데이터를 들여다보고. 시각화나, 서비스 개선을 위한 규격확인. 리뉴얼시 데이터를 기반으로한 UI 개선 등
https://brunch.co.kr/@beusable/128
단순히 예쁘면된다가아니라 - 사업자가 돈을 들여서. 몇천만원에서 몇억원에 달하는 서비스를 개선할경우 어떤 결과를 얻을수있을것인지를 데이터와 통계를 기반으로 말할수있는 능력이 필요해졌습니다.
나중에는 웹사이트에 스스로 개별 UI에대한 설계 / 개발을 진행하는 능력까지 보유하고 자바스크립트 프레임워크에대한 부분까지 다루게되는. 풀스택 디자이너의 개념이 등장하고있죠.
https://brunch.co.kr/@clay1987/93
사실 이게 말이 쉽지. 저도 배워나가고 자료정리하는 입장에서보면. 너무 알아야할게 많은게 사실입니다. 다만 이런건 개인의 변화뿐아니라 업계변화와도 연관이 크기때문에. 우리가 변해야하는 이유를. 업계를 통해 설명해왔던것이 지난 30회까지의 브리핑 내용이라고 생각합니다.
https://www.emotion.co.kr/who-we-are/
기존에 거대한 UI 에이전시들도 이런 변화의바람에 동참하기위해. 생존을 위해서 디지털 마케팅이라는. - 시각적 브랜딩이아니라. 데이터 기반 마케팅분야에 발을 넓히고있죠.
해당 내용은 2015년 PXD의 글입니다. 꽤유명한곳이죠. UI 디자인 에이전시들의 몰락에대한 내용인데요. 사실 개인적으론 저런 연구조직의 - 페르소나라느니 뭐이런 좀 실무랑 거리가 먼 내용들을 별로 좋아하지않는데. 결국 저런 PXD같은 조직들도 스스로 -이론적인 연구를 넘어서서. 마케팅과 그로스해킹 등. 다방면을 파고들어야하는 위기의시대가 왔습니다.
https://brunch.co.kr/@clay1987/130
해당 글에서도 내용은 자세히나와있구요. 결국엔 앱디자인 하나만 갖고는 생존이 불가능한 업계상황과 실제 신규 사업들의 방향성. 그리고 클라우드 플랫폼에서 진행하는 - '사업이 쉬워지는 기능들'의 등장으로. 새로운 서비스를 만들긴 더 쉬워졌고. 앱과 웹을 가로막던 방향성들도. PWA나, SPA같은 기술의 등장으로 인해. 앱->웹으로의 전환이 더 활발하게 이뤄지고있습니다.
사실 저조차도 웹을 공부하는건 굉장히 어려웠고. 대부분의경우는 그게 -제대로된 튜토링러이나. 필요한 정보의 부재로 인한 것이기도 했지만. 다른분들도 절대로 웹공부가 쉽진 않으실거라는걸 압니다. 사실 그렇기에 이런 여러차례에 걸친 위기론과 + 웹공부에대한 지식 체계 정리를 기반으로. 미래의 방향성을 이야기하는 과정을 가졌던 것이고요. 이제는 그 내용이 어느정도 정리가 되었고. 다들 이 내용에대해서 공감하진 못하디러다로. 필요성만큼은 이해를 하셨을거라고 봅니다.
그래서 추후에는 -그래서 대체 어떻게 배워야하고. 실제 실무하는 사람들 입장에서. 더 뭘 개선해야하는지. 실제 데이터를 다룬다는건 또 뭐고. 작은 규모에서의 서비스에서. 웹기술이나. 추가적인 설계를 진행하려고할떄. UI 디자이너는 뭘 할수있는지. 규모가 큰 곳에서의 설계는 대체어떻게 해야하는건지. 내가 알지못하는 기술을 위한 설계를 진행해야할때. 어떤걸 알아봐야할지. 그런 전략적 선택의 해결방법에 대한 대략적인 안내글이나. 튜토리얼을 실제 사례기반으로 이야기를 드려보려합니다.
https://brunch.co.kr/@clay1987/138
더 나아가자면. Vue.js같은 자바스크립트 프레임워크부터 시작해서
https://brunch.co.kr/@clay1987/161
CSS와 SASS, LESS같은 규격들.
https://brunch.co.kr/@clay1987/141
Node.js나 웹팩. 웹 어셈블리같은 - 자바스크립 기반의 환경에대한 내용들.
https://brunch.co.kr/@clay1987/82
Data 시각화나 SEO관련 지식들과 이걸 실제 설계에 적용하는법. 데이터를 보고 분석하고, 실제 채널 / 서비스 성장에 적용하는법. tableau같은 데이터 시각화도구나, tableau prep같은 데이터 규격정리도구. 등 다뤄야할 고급 기술들이 많이 남아있습니다. 다만 이건 시간이 좀 걸릴것 같네요.
추가로 유튜브채널 재생목록에 70개 정도의 영상목록을 추가로 정리해두었습니다. 해당 내용은 계속 추가될 예정이구요. 앞으로 다뤄야할 내용들이 이런 수많은 내용들을 모두 포함하고있는 상태이기때문에 어떤 순서로. 어떤 단계별로 저도 배우거나, 추가로 학습하면서. 여러분꼐 이야기를 드리는게나을지를. 스스로 확인하고있는 과정이기도합니다.
https://www.youtube.com/channel/UCQsN5WbGs20rAhFA6n2qA3Q/playlists?view_as=subscriber
현재 영상 목록은 370개 정도인데 이 모든걸 다 보시기도힘드실거고. 그리고 심지어 영어로 되어있는 경우가 많아서. 접근성의 문제도있으실 겁니다. 그래서 해당 내용들을 추후에. 단계별로 한글화하거나. 핵심 내용을 정리하면서 - 자체영상으로 대체하는 과정을 걸칠 예정입니다. 굉장히 장기적인 프로젝트가 되겠죠.
http://clay1987.blog.me/221513092495
사실 이부분은 저혼자만 느끼는 부분이라서. 그냥 해외자료를 보는거로 문제를 해소하긴했지만. 유튜브나 브런치 등 - 채널들을 살펴보더라도. 그래서 실무는 대체 어떻게하는데 - 에대한 대답이 결국은 학원가나. 실무에서 혼자서 개고생하는것밖에는 답이없다는게. 뭔가좀 잘못됐다는 생각이 계속 들더군요. 그나마도 학원가에서 배우시는게 의미가별로 없거나. 수준이 떨어지거나. 심지어 제가만든 자료들이 학원가에서 돌고있다는걸 보고. 현실을 좀 깨닫게된것도 있습니다.
대부분 여러분들이나. 제가 과거에 개고생하면서 배웠던 이유가. 결국에는 이런 체게적인 지식이 - 유료화로만 전환되거나. 그나마도 유료화된 자료들마저도 - 제대로된 규격화가안되있고. 퀄리티가 낮은경우가 많다는거였죠.사실 저도 개인적으로야 모든 자료를 유료로 돌리고 유료강의로 해먹으면 돈이야 벌겠죠. 하지만 그게 옳은 방향성이라고 생각하진 않습니다. 차라리 한다면 생활코딩채널처럼. 무료강의를 기반으로하고. 최신 기술을 더 알기쉽게 규격화하고. 널리 공유하는 쪽으로 생각을 하고싶습니다.
뭐, 개인이 운영하는 규격이니까. 얼마나 될지는 잘 모르겠습니다마는. 그 진행을위해서 필요한게 여러분의 피드백입니다. 제가 얼마나 정리를 열심히했는가. 그런건 중요하지않구요. 추후에 어떤 방식으로건간에 더 개선되어야할 지점이나. 알기힘든 부분들. 징검다리로 치면 중간중간의 규격이 빠져있는 부분들이 있을겁니다. 그 부분을 발견하신다면 제게 꼭 이야기르 주셨으면합니다. 제스스로도 계속 더 나은 방식으로 브리핑을 진행하고. - 지식을 규격화할 예정이지만. 저는 혼자이고. 영리적 목적을 갖고있지도않기 때문에. 직원이있는것도 아니죠. 그러니 여러분의 피드백이 중요합니다.
본인이 막히시는 부분은 분명 다른 누군가도 막히고계실겁니다. 그리고 그게 개선되면 . 분명 더 많은 사람들이 - 그 내용에 혜택을 받게되겠죠. 그러니 - 본인이 막히시는 부분이 있으시다면. 추후의 지식체계 정리나. 규격화를 위해서라도.이야기를 주셨으면 좋겠습니다.
제 작은 목표중 하나지만. 사람들이 학원에 가지않아도. UI를 공부할수있고. 관련 전문지식을 체계화하고. 공유하는 문화를 만들어나갈수있으면 좋겠습니다. 그리고 언젠가는 이런 생각에 동참하는 분들을 찾을수있으면 좋겠네요. 추후에는 이런 부분에서 크게 트리를 나누어서. 앱 디자인을 위한 커리큘럼 정리 / 웹디자인을 위한 커리큘럼 정리를 진행하고. 기본적인 툴 세팅에서부터. 설계에대한 내용까지를 싹다 다뤄보려합니다. 시간은 걸리겠지만. 그리 어려운 과정은 아닐거같네요.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
