brunch

You can make anything
by writing

C.S.Lewis

by 리플러스 Mar 06. 2019

UI 브리핑 : 2화 - UI 디자이너로 살아남기

UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리


이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.





자, 오늘 이틀째군요. 오늘은 잠시 쉬운이야기로 좀 시작을 해보겠습니다.

https://insidestory.kr/19411





유튜브 사용률이 일반 검색엔진을 넘어서게된건 오늘내일 일이 아닙니다마는. 여기에계신 대부분의 인원들은 아마 20대 이상이실거라고 생각합니다. 그리고 지금도 초~중학생정도 되는 인원들은. 유튜브에서 대부분의 검색을 진행합니다. 국내의경우도 마찬가지인데. 네이버의경우도 위기감을 급속하게 느끼고. 네이버 TV와 블로그의 vlog화를 진행하고있죠. 





https://insidestory.kr/21455

그러나 유튜브의 편리함이나. 컨텐츠 생산자들의 - 수익모델에 대해서. 네이버는 정말 좋지못한 대안이기떄문에. 그 세력이 많이 약화되고있고. 심지어 기업리뷰나 소개같은 플랫폼조차도 블로그 -> 페북을 넘어서 이제는 인스타그램 쪽으로 넘어간지 오래입니다.





https://ko.lab.appa.pe/2018-11/2018sns_somako.html


정보적인 측면에서 


1. 이곳은 어떤곳이고

2. 간편하게 접속할 수 있고

3. 시각적 만족감을 주는


플랫폼이라는 면에서 인스타그램같은 플랫폼은 앞으로도 흥할 예정이고. 현재에도 인스타그램 사용자는 (10~20대 중심으로) 늘어나고있습니다.2018년 11월 기준으로 한국에서는 페북이 하향세 / 인스타가 상향세였고. 현재는 인스타가 좀더 높은상태입니다







자.그럼 이런 정보들이 실제 디자이너들에게 어떤 영향이있는가. 를 살펴보겠습니다.



일단 첫번째. SNS는 기존부터도 레드오션이었지만. 더이상 새로운 SNS는 등장하기가 어렵게됩니다. 정말 특이한 사례로 한국의 틱톡은 해외에서도 인기가 급증하고있는 특수사례인데. 이역시도 기존에 있었던 서비스를 강화한것에 가깝습니다.


https://platum.kr/archives/113538




이는 즉. SNS에 관련된 서비스는 더이상 기획되거나 개발되지않을 것이고. 기존의 플랫폼이 확고해진 바. 해당 플랫폼에 서브 서비스로 들어가는 서비스들이 주를 이루게된다는 이야기입니다. 이는 앱시장이 줄어들고있다.라는 이야기와도 일맥상통하는데요. 시장규모는 늘고있음에도. 개별 앱 유료결제는 8~90퍼센트 이상이 게임에서 나오고있습니다. 그중에 다시 - 카카오톡이나, 페이스북, 네이버 등의 거대 서비스들의 위주로 매출이 발생 -> 더이상 영세한 앱 서비스들이 성공하기가 어려워집니다. 그렇기에 앱 UI 디자이너가 크게 필요하지 않은 구조가 되어갑니다.



http://www.jobkorea.co.kr/Search/?stext=%EC%95%B1%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88



실제로 현재 앱디자인에 대한 잡코리아의 검색수는 서울지역 기준으로 200개 정보가 채 되지않습니다. 2~4월 쯤이 신규 공채가 있고. 규모가 커지는 인력시장임에도 불구하고. 앱디자인의 키워드가 이렇게 줄어들었다는건. 현실적으로 신규 디자이너가 뽑히지않는- 업계 상황을 그대로 반영한거라고 봐야겠죠



대신 uI디자이너는 그나마 상황이 좀 나은게. 현재 350건 정도가 나오네요. 말그대로 앱만 디자인할줄 알아서는 - 살아남기가 힘든 구조가 되어간다는것입니다. 대부분 시안제작이나. 포토샵 리터칭. 배너제작 정도에 - 앱디자인을 배우면 좀더 살아남기 쉬워지지않을까.라고 생각하시겠지만. 현실은 PC와 웹규격에대한 공부까지 필요해지는게 현실입니다.







http://clay1987.blog.me/221385479901




최근 현업에 계신 분들은 느끼고계시겠지만. 점차 기획자와 디자이너들의 설자리가 줄어들고있고. 이는 네이버의 디자인 관련 컨퍼런스인 데뷰 2018에서도 발표한 바 있는 내용입니다.







https://tv.naver.com/v/4577969

키노트의 핵심이 - 디자이너들의 시대는 갔다.; 이제 다른 역할을 더 찾아서 적응하거나. 도태되는 길 뿐이다. 라는걸 이야기했다는건 굉장히 의미가 깊죠.







https://blog.naver.com/sabum007/221436483586



국내 디자인 / 브랜딩 쪽에 거의 최상위조직인 플러스엑스의경우도. 이런 문제에대해서 고민을 하고있는 상태입니다. 그 누구보다도 디자인을 잘하는 사람들도. 단순히 퀄리티만으로 승부할수가 없게된거죠. 그래서 2017년부터 2018년까지는. 플러스엑스에서도 해외와 중국쪽 프로젝트를 많이 잡았었는데. 이제는 분야를 '자동화, 패턴화'시키고 - 다른 분야를 넓힐 예정이라더군요.



아마 들어보신적이 있으시겠지만. 디자인 시스템이라고하는 키워드가 2018년 중후반에 유행했었습니다. 그리고 그건 -사실상 디자이너들의 역할의 종말에 대해서 이야기하는것과 비슷한거였죠. PC와 앱 기준으로. 모든 UI 컴포넌트가 패턴화되고. 코딩으로 수정 / 재배치가 용이해지면서. 일정 수준 이상의 패턴이 만들어지면. 더이상 UI 디자이너가아니라. 개발자와 유지보수인력만 있으면 되는. 그런 시대가 오고있는겁니다.






https://brunch.co.kr/@designforhuman/2


기계적이고. 수학적인 그리드. 그리고 반복 / 수정이용이한 코드화. 재사용. 이미 디자인의영역이라기보다는. 개발과. 반복적 패턴 / 레이아웃의 영역이 되었죠. 이런 특성때문에라도 더욱더 개발에 대한 필요성이 높아지고있는 현실입니다. 사실 지금도 2~3년차 정도에서는 디자인만 잘해도 크게 문제가없을겁니다. 그건 기존에 스터디방에서 이야기가 나왔던 -실무자들의 주장'이기도했지만 큰 흐름에서는 이미 변화가 이어지고있고. 스케치. 어도비 XD같은 프로그램적 변화뿐 아니라. 직업적인 역량에서 - 디자인 실력 이상으로. 설계와. UX의 개선. 그리고 그것의 코딩까지 - 요구하는 것이 점차 당연시되고있습니다.






https://opentutorials.org/course/1

그래서 제가 추천드렸던것은. 무료강의이자. 개발에대해서 아주 간단하게. 약 1주일정도면 보고 확인할 수 있는 수준의 영상강의목록들이었습니다. 다만 이것만으로는 부족한지라. 이후에는 HTML, CSS에대한 기본적인 지식 / 강의들을 따로 찾아보기 시작하셔야한다고 얘길 드렸었죠. 사실 이정도까지 얘길 드렸던게 기존의 스터디방의 기조였고. 이후에 프레임워크나. 자바스크립트에 관련된 이야기를 좀 드리다가 말았었는데. 사실 여기에서 벽을 느끼실 분들이 많을거라고 생각합니다. 그래서 진행하려하는것이 '설계'에 좀더 집중하는 이야기를 드릴것이고. 실제 UI 컴포넌트를 수정 / 변형하는 방식에 대해서 얘길 드리게될거같습니다.









https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

그래서 오늘은 일단. UI 컴포넌트들의 요소별 명칭과. 생김새에 대한 자료를 올려드리겠습니다. 









사실 모바일에서의 내용은 PC쪽 기준과 좀 다르지않나요-하고 생각하실수있는데. 네. 좀 다르긴합니다. 다만 핵심 뿌리는 PC에 두고있고. 요즘은 반응형 웹 기반으로 PC의 비례와 레이아웃에서 두가지를 모두 지원할 수 있는 프레임워크를 많이 씁니다. 그렇기때문에. 더욱더 PC기준에서 기본 요소들을 이해하고. 요즘 자주쓰이는 프레임워크들에서 사용되는 UI 요소들이 어떤 명칭을 갖고있는지. 어떤 패턴으로 주로 사용되는지. 변형된 방식은 어떤게있는지를 소개드리게될듯합니다.






http://bootstrapk.com/

첫번째 프레임워크는 부트스트랩입니다. Sass라는 CSS 프리프로세서 (css를 쓰기 쉽게 만들어주는 방식)을 지원하기도하고. 워낙 자주쓰여서. 개발관련된 UI 컴포넌트를 확인하기 참 좋은 자료죠




http://bootstrapk.com/components/

UI 디자인을 하는데 왜 개발 프레임워크용 컴포넌트를 알아야하는가.는 아주 간단합니다. 앞으로 변화하는 환경에서는. 마치 퍼즐맞추듯이. 기본 UI 컴포넌트들을 일단 필요한 위치에 배치를 합니다. 이후에 약간의 수정이나. 커스터마이징을 가하는 형태로 쓰이는게 대부분이 되기 때문입니다. 완전하게 커스텀한 구조를 UI디자이너와 퍼블리셔가 새로만드는게아니라. 이미 만들어지는 코드들을 떼어다가 붙여넣는. 약간 수정하는 형태로 진행이되는 방식에 익숙해지실 필요가있습니다.





탭. 버튼. 심지어 포스트 스타일까지





세부적으로는 텍스트 크기와 라벨링까지


기본적으로 설정된 요소들만을 재조합해서. 상용화될만한 수준의 시안을 만들 수 있는. 기획자이자 설계자가 될수있어야합니다. 그리고 그것과는 별개로. 이걸 커스텀하게 수정해서. 이보다 더 좋은 결과를 만들어낼 수 있으려면 어떤걸 수정해야하고. 어떤게 변형되어야하는지. 그런걸 알아나가는게 추후의 UI 디자이너들이 가져야할 상식적인 내용중 하나입니다.


 사실 HTML을 좀 만져보신분들은 이게 가능하겠습니다마는. 그게 불가능하신 분들을 위해서 - 추후에 웹사이트의 디자인을. 개별 UI 컴포넌트로 분해. 분석하는 방법에 대해서 이야기를 해보려합니다.







이건 기존에 제가 이야기드렸던 그리드 최소단위와같은 기초적인 단계를 넘어서는 과정입니다. 반복되는 UI 컴포넌트. 덩어리 단위의 패턴을 찾고. 그 패턴이 - 개발자가 새로 구현해야하는 것인지. 아니면 기본 부트스트랩 등의 프레임워크가 지원하는 내용인지. 그걸 알아채는게 중요합니다. 약간 영단어 외우는거랑 비슷한 느낌이되실수도있겠네요.



이 부분에 대해서는 좀 더 쉬운방법이 없는지. 고민을 좀 해보겠습니다마는. 이런 UI 컴포넌트의 특징과. 형태. 변형사용방법. 혹은 그럴수없는 부분들까지. 약간의 사용범위를 알아두시면 큰 도움이될것같네요. 해당 내용은 내일 다시 이야기를 해보겠습니다.






오늘 이야기를 정리해보면 다음과 같습니다.


1. UI는 항상 기술환경과 밀접한 영향을 갖고있다. 그렇기에 사용자들의 사용패턴 / 환경이 변화를 눈여겨보아야한다.


2. 시안만 만들줄 아는 디자이너는 더이상 필요하지 않은 시대가 오고있다. 특히 앱디자이너의 경우는 이런 현상이 더 심한데, 이 부분은 실제 구직 사이트에서도 앱디자인만 할줄아는  UI 디자이너는 설자리가 좁아지고있다. 


3. 디자인을 넘어 기술과 개발에 관련된 지식. 설계에 관련된 지식을 쌓아야 장기적으로 UI디자이너로서 살아남을 수 있다. 그러기 위해서는 실무에서 자주 쓰이는 프레임워크들을 파악해두는것이 중요하다.


4. 프레임워크를 기반으로 한 설계 / 디장니은 - 이미 만들어진 UI 컴포넌트들을 재조합, 수정하여 결과를 만들어내는 방식이다. 그렇기에 하나부터 열까지 모두 신규로 디자인하는 것이 아니라, 기존의 모듈을 쌓아올리는 방법에 익숙해져야한다.






이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.

저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!




단톡방 이용안내

https://brunch.co.kr/@clay1987/113



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari