by
Jun 01. 2019
UI 디자인을 공부하는 방법 - 2019
UI 디자인, 이 순서대로 파고들면 공부가 쉬워집니다!
Q. UI 디자인을 공부하려하는데 어떤 순서대로, 뭘 공부해야할지 모르겠습니다.
실무공부를 하기위한 정보순서나, 정해진 커리큘럼 같은게 있을까요?
기존 UI 디자인 연구소 단톡방에서 나온 질문입니다. 저는 약 1년간 UI 디자인 초심자들이 자주 질문하시는 내용들을 합쳐서. 주된 질문들을 문서화하는 작업을 진행해왔답니다. 이번 시간에는 그 문서들을 질문의 맥락에 맞게 한번에 정리해서 알려드리겠습니다.
1. 내가 무엇을 모르고, 어떤걸 해야하는지 확인하자
https://brunch.co.kr/@clay1987/108
기존 단톡방에서는 초심자, 1~2년차 실무자, 4~5년차 실무자 등. 다양한 분들이 질문을 주시곤했습니다. 그래서 각자 다른 상황에서, 본인이 어떤 상태인지를 먼저 체크해야했죠. 그래서 정리한 글이 위의 내용입니다.
2. 모바일 OS에 대한 이해
https://www.youtube.com/watch?v=VYNLZr4JS-s&t=1s
일반적으로 초심자분들이 제일 접하기쉬운 규격이 모바일 UI쪽입니다. 그래서 UI 초심자들에게는 일단 모바일 UI공부를 추천드리곤합니다.
https://brunch.co.kr/@clay1987/94
모바일 규격의 경우 - 구글의 안드로이드 OS, iOS의 공식문서를 보는것만으로는 - 사실 핵심을 알기가 힘든 편입니다. 그래서 추가로 중요한 지점들을 좀 정리해봤습니다.
구글의 - 안드로이드 OS
https://brunch.co.kr/@clay1987/154
애플의 - iOS
https://brunch.co.kr/@clay1987/155
모바일 웹 규격을 위해서라도, 안드로이드와 iOS는 꼭 별도의 공부가 필요합니다. 그리고 가능하면 최신버전 OS 규격을 꼭 따라만들어보시는걸 추천합니다.
3. 초심자들을 위한 - 웹디자인 기초
https://brunch.co.kr/@clay1987/40
웹디자인의 종류는 크게 두가지로 나눌 수 있습니다. 그렇기에 그 목적에 따른 개별 기획이나 설계에 대한 종류를 구분할 수 있죠. 해당글에서는 초심자들이 이해하기쉽게. 웹개발이 항상 필요한건 아니며 SNS 나 기존 무료사이트빌더 등을 이용해서 사이트를 구축하는 법에 대해서도 언급을 하고있습니다.
https://brunch.co.kr/@clay1987/83
이후에는 웹에 대한 도메인. 호스팅. ftp 등. 웹디자인이 어떤 것들로 이뤄지는지. 개별 구성요소와 구축 방법에 대한 이야기를 합니다.
UI 디자인에서는 웹개발적 지식을 빼놓을 수 없는 상황입니다. 그래서 관련된 내용을 쉽게 배우실 수 있는 - 생활코딩의 영상들을 추천드리는 편인데요. 사실 그 내용이 너무 길고, 100개가 넘는 전체 영상을 모두 보기엔 부담이 큰 편입니다. 그래서 16개 정도로 필수내용들을 간추린 영상목록을 만들어봤습니다.
16개 영상으로 간추린 웹 어플리케이션 만들기 수업 (생활코딩)
https://bit.ly/2EJ4Lcs
웹디자인 튜토리얼
웹개발을 위한 필수 내용들을 튜토리얼 형식으로 정리해보았습니다. 1화부터 6화까지, 필수적인 내용들이 많이 담겨있으니. 생활코딩의 웹개발 영상을 시청하신 이후에 보시길 추천드립니다.
1화 : https://brunch.co.kr/@clay1987/156
2화 : https://brunch.co.kr/@clay1987/157
3화 : https://brunch.co.kr/@clay1987/158
4화 : https://brunch.co.kr/@clay1987/159
5화 : https://brunch.co.kr/@clay1987/160
6화 : https://brunch.co.kr/@clay1987/161
본인이 기본적인 HTML, CSS 공부가 끝나셨다면. 웹 개발 탬플릿을 갖고 규격을 수정하거나. 내용을 복사 붙여넣기하여 원하는 사이트 규격을 만들어보시는걸 추천합니다. 그리고 나중에는 그 규격을 처음부터 코딩하여 다시 만들어보시는 공부법을 추천드립니다.
https://clay1987.blog.me/221509853115
4. 역기획과 서비스 분석
https://brunch.co.kr/@clay1987/71
초심자분들의 경우 역기획이 뭔지. 설계를 어떻게 해야하는건지 모르시는 분들이 많습니다. 그래서 간단한 수준에서 앱서비스의 와이어프레임을 분석하는 작업을 소개해드립니다.
https://bit.ly/2wvPfwf
이후에는 플로우차트와 사이트맵 정리, 개별 화면구성에 대한 큰 틀을 어떻게 잡는지. 참고할 수 있는 외부 자료를 보시는게 좋을듯 합니다. (해당 자료는 기획자이신 노노니 님의 블로그에서 가져왔습니다.)
https://brunch.co.kr/@clay1987/97
역기획을 진행하는 방식에 익숙해졌다면. 이제는 서비스 분석을 해볼 차례입니다. 기존 웹 / 앱 디자인 분석을 해서. 문제를 파악하고 - 개선사항이나. 설계시 어떤 지점을 눈여겨봐야하는지를 이야기하는 내용입니다. 신규 서비스 설계나 기획에서는, 항상 이런 문제점을 확인하는 과정이 필요한 만큼. 여러 사이트를 들여다보고, 분석해보시는게 중요합니다. 만약 서비스 비교분석에 대해 조금더 자세하게 알고싶으시다면. 다음 문서들을 참고하시면 도움이 되실것 같습니다.
애니메이션 스트리밍 서비스 비교분석 사례
1편 : https://brunch.co.kr/@clay1987/150
2편 : https://brunch.co.kr/@clay1987/152
메일 서비스 비교분석 사례
1편 : https://brunch.co.kr/@clay1987/169'
2편 : https://brunch.co.kr/@clay1987/171
5. 디자인 이론 : 그리드 시스템
https://brunch.co.kr/@clay1987/136
디자인 실무자라해도 그리드 시스템을 어떻게 활용해야하는지. 헷갈려하시는 분들이 많습니다. 그래서 개념적 정리와, 실제 실무에서 쉽게 활용하실 수 있는 그리드 최소단위에 대한 이야기를 진행해봅니다.
그리드 최소단위에 대한 튜토리얼 영상
https://www.youtube.com/watch?v=Upjt_3ykkAU
6. 디자인 이론 : 모든 시각물은 도형이다 - 도형적 레이아웃
https://brunch.co.kr/@clay1987/106
모든 시각물들은 사실 임의의 도형으로 바라볼 수 있습니다. 그렇기에 모든 시각물을 도형적인 규격으로 바라보고 분석하는 방식인 - 도형적 레이아웃에 대한 이야기를 진행합니다. 여기에서 게슈탈트 시각인지 이론을 기반으로 사용합니다.
UI 디자인을 위한 게슈탈트 이론 영상
https://www.youtube.com/watch?v=UsworeC7YkA&t=2s
위의 영상에서는 모든 시각물들이 어떤식으로 통일성을 가질 수 있는지. 시각이론을 기반으로 UI 디자인에 어떻게 이를 적용시킬 수 있는지를 알아봅니다.
이미지의 도형적 레이아웃 튜토리얼 영상
https://www.youtube.com/watch?v=zvkoEGtLU8c
다음 과정은 조금 더 복잡합니다. 단순 박스 형태가 아니라. 사진 이미지 속의 추상적인 도형들. 그리고 세이프 프레임에대한 지점을 이야기합니다. 이 방식은 지속적인 분석과 훈련을 통해서 시각물을 바라보는 감각을 강화하는 훈련법입니다.
https://brunch.co.kr/@clay1987/109
글꼴도 하나의 박스나, 도형으로서 바라볼 수 있습니다. 그렇기에 글꼴의 삐죽빼죽한 단면을 어떻게 정리할 것인지. 개별 글꼴들을 어떻게 정리하면 더 안정적일 수 있는지를 알아두시면 좋습니다.
8. 중급자들을 위한 웹개발 - 프레임워크 / 자바스크립트 프레임워크
웹의 미래는 개발에 있다고 해도 과언이 아닙니다. 그렇기에 프레임워크 기반의 개발환경이나 - it 업계상황을 연계해서. 개발자들이 어떤 기술들을 왜 배우는지를 이해해야합니다.
https://brunch.co.kr/@clay1987/92
프레임워크 개발의 대표적인 사례로는 부트스트랩과 같은 웹 프레임워크를 들 수 있는데요. 해당 내용은 하단의 문서에서 확인하실 수 있습니다.
부트스트랩, 어떻게 사용해야할까? (번역글)
1편 : https://brunch.co.kr/@clay1987/131
2편 : https://brunch.co.kr/@clay1987/132
이외에도 자바스크립트 기반의 프레임워크인. vue, react, angular같은 사례가 있는데. 이 부분은 자바스크립트를 깊게 파지않으면 넘어갈수 없기때문에, 여러가지 기반 공부가 많이 필요해집니다.
https://brunch.co.kr/@clay1987/81
웹개발을 좀 더 깊게 공부하시기 위해서는 자바스크립트가 왜 그렇게 유명한지. 얼마나 많이 쓰이는 언어인지 알아두실 필요가 있습니다. 또한 사용되는 언어의 문법이나, 언어적 특징 등도 확인을 해두시면 좋습니다.
https://brunch.co.kr/@clay1987/93
자바스크립트 프레임워크는 해외의 웹개발자들에게 가장 많이 언급되는 키워드 중 하나입니다. 그 이유가 뭐고, 어떤 지점에서 공부를 해야하는지. 그리고 실제 연봉이나, 선호도는 얼마나 되는지. 체크해볼 필요도 있겠죠. 미래의 커리어가 달린 부분인 만큼 차근차근. 다양한 지점에서 공부를 해보시기를 추천드립니다.
9. IT 기술 트렌드 확인하기
IT 생태계는 지금 이 순간에도 빠르게 변화하고있습니다. 그렇기 때문에 과거의 흐름과, 미래의 기술 트렌드를 계속해서 배우고, 따라가야합니다. 다음 문서들은 IT 기술 트렌드와 과거 UI 디자이너들의 상황을 정리해본 내용들입니다.
기존 UI 디자이너들의 시대가 끝났음을 알리는 설명영상
https://www.youtube.com/watch?v=cr55VbPGrVg&feature=youtu.be
기존의 시각물만 만들면 되던 UI 디자이너의 시대가 어떻게 끝나게됐는지. 어떤 위기를 맞게 되었는지.
IT 업계 상황의 변화와, UI 디자이너들의 역할변화에 대한 영상
https://www.youtube.com/watch?v=F7tmSG4pKe4
디자인 퀄리티보다, 설계와 기능 중심. 개발 중심으로 움직이게되는 IT 업계 상황을 이야기합니다.
UI 디자이너의 2차전직에 대한 영상
여기서 UI 디자이너들이 앞으로 살아남을 방법에 대한 내용으로. 크게 두가지를 다루는데. 모두 웹개발이 포함된 / 연관된 방향입니다. 결국 큰 키워드를 정리하면 개발 / 마케팅인데요.
https://brunch.co.kr/@clay1987/82
마케팅에 대한 지점을 빅데이터와 태블로라는 데이터 시각화도구와 함꼐 다루며
https://brunch.co.kr/@clay1987/96
UI 트렌드 번역글을 통해서 앞으로 어떤 기술들이 등장하고. 어떤 지점들이 축소화될것인지를 이야기합니다.
https://brunch.co.kr/@clay1987/95
이후에는 변화하는 개발환경 / IT환경에맞춰서 등장하는 클라우드 플랫폼에대해서 알아두실필요가있고
https://brunch.co.kr/@clay1987/176
위에서 이야기했던 제로 UI 개념이 실제 구글과같은 거대 기업을 통해 어떻게 실현되는지를. 매년 신규 컨퍼런스 등으로 확인을 해두실 필요가 있습니다.
구글 IO 2019 영상 주제 정리
2019 - 메인 키노트 : https://brunch.co.kr/@clay1987/196
2019 - 개발자 키노트 : https://brunch.co.kr/@clay1987/197
구글 어시스턴트 세션 : https://brunch.co.kr/@clay1987/198
10. IT 업계에서 꼭 알아둬야할 핵심 키워드
현재 IT 생태계는 사업 아이템. 기능적 차이가 명확하지않으면. 살아남기 힘든 시대가 되었습니다. 어떤 서비스들이 업종별로 유행하는지. 거기엔 어떤 기술기반이 있는지에 대해서 알아보는 시간을 약 40회간 진행했었습니다. 그중에서 꼭 알아두셔야할 키워드들을 몇가지 정리해봤습니다.
클라우드 플랫폼
https://brunch.co.kr/@clay1987/176
클라우드 플랫폼은 웹개발의 미래입니다. 딥러닝, 머신러닝 개념과 함께 묶여서 모든 기업의 미래를 좌우할 키워드이므로. 꼭 알아두셔야합니다.
CRM 클라우드
https://brunch.co.kr/@clay1987/202
큰 꼭지로 보자면. crm 클라우드도. 메인 클라우드 플랫폼 시장과 연관이있어서 꼭 이해를 해둬야합니다.
핀테크와 금융 API
https://brunch.co.kr/@clay1987/191
핀테크의 변화가. 금융 API와 개별 금융데이터를 통해 극도의 개인화를 하고있고. 상품개발에도 그 데이터를 파고들어가는 데이터마이닝에 사용하고있습니다. 이 지점은 미래 IT 생태계에 아주 중요한 키워드가 될 것입니다.
디지털 마케팅 / 데이터기반 설계
https://brunch.co.kr/@clay1987/178
데이터 기반으로 기존의 에이전시들이 어떻게 변화하고있고. 실제 디지털 마케팅을 통한 설계 개선은 어떻게 해야하는지.
AI 기반의 컨텐츠 개인화 / 맞춤형 디자인
https://brunch.co.kr/@clay1987/182
네이버와 같은 대형 포탈에서 - AI 기반의 개인 맞춤형 컨텐츠를 어떤 식으로 제공하고있는지. 이러한 맞춤형 설계 왜 중요한지도 알아두셔야합니다.
마치는 글 : 앞으로 어떻게해야 IT 업계에서 생존할 수 있을까?
저는 6년차 UI 디자인 실무자입니다. 그런 제가 IT와 웹에 대해 연구를 해왔던 이유는 아주 간단합니다. 한국의 IT 업계는 미국의 기술이 전달될 때 까지, 1~2년 정도의 격차가 발생하는 편입니다. 심지어 잘나가는 실무자들도 최신 스펙을 항상 확인할 수 있는게 아닙니다. 시시각각 변하고있는 IT 환경과 - 개별 기술의 실무부분까지 같이 다루고있는 강의나 책들도 거의 없죠. 당장 해야하는 일에 바빠서 - 신규 기술을 연구하고, 정리하는 사람이 많지 않기 때문입니다.
IT 생태계의 큰 변화는 구글이나. MS같은 거대 회사들이 주도를 하고있습니다. 네이버같은 국내 거대 IT 회사도 구글에서 나오는것들을 따라갑니다. 지금 이 시간에도 해외개발자들은 포럼 / 게시판에서 논의를 통해 문제해결하고. 그게 깃허브나 스택오버플로우등에서 계속 업데이트되고있습니다. 그러니 국내의 학원이나 학교 같은 경우는. 교수나 강사가 연구를 계속하지않는이상 - 죽은 지식을 다루고 있을 가능성이 높습니다. 그러니 주변에 개발자 동료나 상사분이 계시다면. 자주 물어보세요. 어디에서 개발 관련 소식을 들으시는지. 좋은 해외 개발자포럼 / 뉴스등을 확인해야, 우리의 생존 가능성이 늘어납니다.
이외에도 시간이 허락되는 선에서 - 해외 웹개발 관련 팟캐스트를 들으시거나. 대기업 웹개발 면접질문 모음 등을 찾아보시고. 개별 키워드들을 공부하시는걸 추천드립니다.
https://bit.ly/2tBKjUT
추가로 알아보시면 좋은 내용들
- 웹브라우저의 역사
- 브라우저들의 특징
- HTML의 역사
- CSS의 역사
- 자바스크립트의 역사
- XHTM과 HTML의 차이
- DOM이란 개념이 뭔지
- Virtual DOM 이란게 뭔지
- XML은 또 뭐고 대체 왜 등장했던건지
- CSS에서 LESS, SASS는 또뭐고 왜 쓰는지
- 부트스트랩이란건 뭐고 어떤이유에서 만들어졌는지
- 워드프레스는 대체 왜 떴고. 어떤식으로 만들어진 건지
- PHP라는게 대체 왜 쓰였고. 기존에 어떤 문제를 해결하려고 나온건지.
- 자바스크립트와 Node.js는 어떤 관계인건지.
- NPM은 대체 또 뭐고 어떻게 써야하는건지.
- 자바스크립트 프레임워크들은 왜 npm을 통해서 사용하는지
- CDN 방식이란 뭔지
- OOP. 객체지향 프로그래밍이란게 뭔지.
등등...
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
위 자료는 UI 디자인 연구소에서 공유된 자료입니다
https://open.kakao.com/o/gfQpajKb
