UI 브리핑 : 3화 - 프레임워크로 UI 설계하기
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
자, 어제에 이어서 - 프레임워크의 한 종류인 부트스트랩에 대해서 이야기를 해보겠습니다
https://brunch.co.kr/@clay1987/92
프레임워크란 간단히말해서. 개발자 / 디자이너 / 기획자가 빠르게 웹사이트 / 앱페이지를 만들기위해 - 미리 만들어진 조립식 툴을 사용하는거라고 보시면 됩니다. 그리고 실무에서 부트스트랩같은 HTML / 자바스크립트 친화적인 프레임워크는 널리 사용되고있는 것들 중 하나죠. 추후엔 워드프레스 얘기도 좀 해드리겠지만. 일단 부트스트랩에대한 얘길 진행하겠습니다
부트스트랩은 현재 4.31버전이 나와있고. 가보시면 무료로다운로드를 받을 수 있습니다. 그러나 정작 다운을 받아보면. 일반적인 디자이너들은 이게뭔가-싶은 당황스러운 파일들만 보게됩니다
간단히 말해서 부트스트랩 프레임워크는. 디자인을 위한 툴이 아니라. 개발을 위한 도구들입니다. 그렇기에 개발적인 환경을 구축해놓고. 하나하나 UI 컴포넌트들을 만드는게아니라. 부투스트랩에 사전등록된 녀석들을 갖다 쓰는 것에 가깝죠. 그래서 확인해야하는게. 부트스트랩을 어떻게 설치하고. 어떻게 불러와야하는지에 대한 부분을 확인해야합니다.
http://bootstrapk.com/getting-started/
이 문서는 3.32버전이라서 좀 옛날버전이지만. 사용하는 방법은 크게 다르지않습니다. 크게 CDN. 혹은 NPM방식으로 사용할 수 있는데요. NPM같은 경우는 노드.라는 프로그램을 통해서 설치를 할 수 있고. 패키지 매니저. (물건들을 자동으로 옮겨놓고 설치 / 관리해주는 프로그램)입니다. 자세한 내용은 추후 설명하겠지만. 이런 설치방법은 기본적으로 그냥 따라하면되는 것들이고. 그이후에 부트스트랩의 강점인. 미리 준비된 프리셋 UI들을 확인하실수있습니다.
https://getbootstrap.com/docs/4.0/examples/
예제 샘플 화면을 들어가보시면. 실제 그대로 사용할수있는 예제 데모사이트들이 그대로 드러납니다.
이와같이 - 개별 UI 컴포넌트들을 쌓아서 만들어진 커다란 레이아웃들을 예제로 제공하기도하고.
https://themes.getbootstrap.com/
유료이긴하나. 개별 디자인들의 탬플릿도 제공합니다. 이런 부트스트랩의 유/무료 탬플릿들은 디자인을 많이 하지않아도. 자신이 원하는 디자인 / 설계내용에 맞게 수정 / 개선할 수 있고. 개별로 UI 컴포넌트를 추가하거나. 제거하여 다른 형태를 만들수도있습니다.
https://getbootstrap.com/docs/4.3/components/alerts/
그래서 중요해지는게 부트스트랩에서 기본적으로 지원하는 - UI 컴포넌트들이 어떤게있는지. 그게 실제로 적용되었을땐 어떤게 나올수있는지. 개발이전에. 설계를 하는 입장에서. UI 디자이너는 - 이런 UI 요소들에 대해서 파악하고. 그걸 어떤식으로 배치해서 - 원하는 디자인을 만들어낼것인지. 그리고 그중에 어디까지가 커스터마이즈 / 수정이 가능한지를 확인해야합니다. 쉬운내용은 아닙니다만. 이런 '기술적 어려움'은 개발자 입장에서도 마찬가지라서 감각을 갖고있는 디자이너들이 설계자로서 - 프로젝트 진행을 수월하게 뚫어주는 역할을 해서. 경쟁력이 생기는 거라고 보시면 될것같네요.
UI 컴포넌트들의 명칭은 - 다른 프레임워크들과 비슷한 내용도 있고. 약간씩 다른 내용도 있습니다. 또한 기본 부트스트랩을 변형한 - 테마들. 라이브러리들의 형태와도 조금씩 다르죠. 그래서 가장 좋은 방법은. 기본적인 부트스트랩 UI 컴포넌트들과. 상용화된 판매중인 테마들의 컴포넌트들을 서로 비교하는것입니다.
https://demos.creative-tim.com/material-kit-pro/index.html
유명한 부트스트랩 기반 마테리얼 킷중 하나인 - creative kim의 마테리얼킷입니다. 보시면 아시겠지만. 기본적으로 부트스트랩이 지원하는 내용외에도. 스타일을 가미해서. 고유한 방식으로 디자인을 해두었습니다. 이런 변형된 컴포넌트들 + 기존의 부트스트랩 컴포넌트들을 뜯어서. 원하는 내용을 만들어내고. 개별 요소들이 어떤 요소들인지. 무얼 보고 - 소스코드를 참고해야하는지. 세세하게 정리할 수 있다면. 설게자로서는 굉장히 환영받을 일입니다.
https://demos.creative-tim.com/material-kit-pro/docs/2.1/getting-started/introduction.html
이러한 개별 마테리얼 킷의 경우. 따로 컴포넌트들에 대한 사용 설명서를 갖고있습니다. 그렇기에 명칭 / 설명서 - 대략적인 사용스펙을 확인해두면 좋은것이죠.
대부분의경우. 우리의 인식이나. 자유로운 상상력에비해. 프레임워크는 제한적이고. 변형이 불가능한 경우가 많습니다. 개발자친화적인 부분이 많다보니. 이런 내용을 세세하게 알아나가는 것 역시도. 굉장히 노가다스러운 일인데. 이건 현재 - 다른 방법으로 대체가 되지 않기때문에. 전문성을 가지는 UI 디자이너들에게는 꽤 큰 경쟁력이됩니다.
다른 부트스트랩 관련 테마 / UI 킷들 중에. 대시보드팩 / 관리자모드 용으로 인기가높은 - 또다른 패키지입니다. 유료 / 무료버전이 있고. 각자 다운로드가 가능하며. 뜯어보실만한 내용들이 많이있습니다. 과연 디자인퀄리티가 나오긴할 까. 자유도가없으면 디자이너 역할이 없는거나 마찬가지아닌가. 그런생각을 하실수도있는데요. 실제 부트스트랩을 기반으로 만들어진 사이트들중에. 잘 만들어진 것들을 보시면 - 생각보다 그렇게 제한적이지않고. 퀄리티도 괜찮다는걸 아실수있습니다.
부트스트랩 기반으로 만들어진 홈페이지 사례 - 01
부트스트랩 기반으로 만들어진 홈페이지 사례 - 02
부트스트랩 기반으로 만들어진 홈페이지 사례 - 03
https://www.sysdoc.com/what-we-do/overview
부트스트랩을 기반으로 '변형 / 응용' 할것인지는 프로젝트마다 달라지겠지만. 이런 UI 컴포넌트들의 기반을 짜집기해서 만들어나가는 방식을 아는 디자이너와. 모르는 디자이너의 차이는 매우 큽니다. 이런 부트스트랩 기반으로 만들어진 베스트케이스들은. awwward 같은 사이트에서도 확인하실 수 있고. built by bootstrap best case 등의 검색어를 통해서도 찾아보실수있습니다.
https://www.awwwards.com/websites/bootstrap/
결국 기본 UI 뼈대만 갖고도 얼마나 다양한 규격들을 만들 수 있는지. 그리고 그것들이 기본적으로 어떤 기본 UI 요소들을 통해 만들어진 것인지.
데이터테이블에서부터.
얼럿창
작성용 탬플릿
설정창
페이지네이션
단순한 입력창과 드롭다운 형태의 변형 선택창.
메뉴 영역과 드롭다운 버튼 / 일반 버튼의 영역등등
다양한 UI들이있고. 기본적인 스타일이 있는데. 이것을 다시 '어떻게' 변형해야. 위에서 보여드렸던 것처럼. 응용사이트./ 좋은 디자인이 나올수있는지. 그걸 확인하고, 개발자나 이후 작업자에게 전달할 수 있어야합니다.
이 부분들은 당연히 쉬운 작업이 아닙니다.
- UI 컴포넌트들을 보고 원형찾기.
- UI 컴포넌트별 스펙 확인하기
- 프로젝트 개발환경에 맞춰서 변형 가능한 정도 확인하기
이 세가지를 모두 진행할 수 있어야합니다.
다만 이런 '확인 / 변형영역 예상'등은 현재까지 자동화가 될 수 없는 영역이기때문에. UI 디자이너들. 특히 설계에 특화된 디자이너들에게는 굉장히 좋은 미래먹거리라고 볼 수 있는것이죠. 부트스트랩의 프레임워크에 익숙해지시면. 추후에는 동일한 개념으로 - angular / vue 등의 자바스크립트 프레임워크에서도 동일한 작업을 하시게됩니다. 거기에도 UI 컴포넌트가있고. 유료 테마가있고. 변형 / 기본틀을 유지해야하는 영역들이 상황마다 다르거든요. 사실 그래서 우리가 인터넷 상에서 흔히 볼수있는 - 컨셉이미지들을 파고드는게. 일정 수준 이상에선 무의미해지는 것도 이런 이유에서입니다.
이 파일은 부트스트랩 3.0버전 대의 AI 파일입니다. 사실 퀄리티가 크게 높진 않으나. 오늘 이야기드린 - 부트스트랩의 기본 UI 요소들을 대부분 포함하고있어서 한번 뜯어보시면 좋을것같네요.
대부분의 디자이너들은 당장 예뻐보이는 시각물들을 찾는데 익숙해져있는 경우가 많습니다.
그러나 이런 시각물들. 당장 보기엔 좋죠. 하지만 그걸 개발자들이 개발해줄까요? 우리 실제 프로젝트에서 그걸 실험적으로 적용할수있을까요? 그걸 관리자 단에서 용납해줄까요? 대부분의 프로젝트들은 시간 = 가격이기때문에. 가능하면 검증가능한 뼈대와. 작업이 수월한 프레임워크를 사용하게는 현재의 IT 업계 흐름입니다.
어제 이야기드렸듯이. 인스타그램같은 기본 틀들을 소규모 상공업자들에게 인기를 끌고있는 상태에서 복잡한 기능을 가진 사이트들을 '구축해주세요'라고 하는 업체들은 많지가 않습니다. 그래서 일반 사업자들과 / 복잡한 기능을 가진 사이트들을 나누는 기점이 - 크게 생겨버렸기에. 단순 시안을 만드는 디자이너들은 크게 필요가없는 상태가 됐습니다. 프레임워크가 쓰이는 이유는 결국 그런 이유때문이고. 단순 / 빠르게 작업이 가능하기때문인데. 개발자의 중간위치에서. UI디자이너가 이런 '설계와 사전확인'작업을 해주지않으면. 사실상 역할이랄게 별로 없는 상탭니다.
인스타그램 외에도 이런 '네이버단위에서 쉽게만드는 반응형 / 결제모듈 포함된 사이트'들이 많아진 상태라. 프레임워크에대한 이해는 거의 필수라고 봐도 좋습니다.
오늘 이야기드린것을 정리해보면
1. 부트스트랩은 웹개발을 위한 프레임워크고, 가장 쉬운 프레임워크 중 하나이다.
2. 프레임워크에는 UI 컴포넌트들이 기본적으로 탑재되어있고. 각자 약간의 변형 / 개선이 가능하지만. 그 영역이 각자 다르다.
3. 기본 스타일 외에도 판매되는 UI 킷들이 있고. 이런 킷들과 기본 부트스트랩을 비교분석하는 과정이 꼭 필요하다.
4. 부트스트랩을 기반으로 하되, 변형 / 응용하여 만들어진 사이트들은 눈여겨보지않으면 부트스트랩의 기본 형태가 거의 남아있지않다. 그만큼 생각외의 자유도가 있고. 수준이 높다.
5. UI 컴포넌트를 확인하고. 설계를 하는 역할은 개발자들도, 기획자들도 하기가 어렵다. 디자인 + 개발에대한 내용을 동시에 알아야하기떄문에. 디자이너들의 독점적인 역할이 될 수 있다.
6. 당장 개발을 모르더라도. 다른 프레임워크들에서도 이런 UI컴포넌트들이 있고. 비슷한 방식으로 배워나갈 수 있다.
쉬운내용은 아니지만. 일단 '꼭 알아두셔야할' 부분에 가깝다고 할 수 있겠네요.
다음시간에는 프레임워크의 UI 요소들중에. 개별 레이아웃의 응용 / 변형 배치된 컴포넌트들을 하나하나 뜯어보고. 기본 UI 컴포넌트들과. 판매되는 UI 킷들을 서로 비교해보는 과정이 있을것 같습니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
