내 포트폴리오를 기획/디자인부터 개발까지 해보자 #1
글을 시작하며
학기 중 ‘멋쟁이사자처럼’ 프론트엔드 세션을 진행하던 중, 운이 좋게도 디자인 세션에 참여할 기회가 생겨 한 학기 동안 듣게 되었다.
디자인 세션 운영진분이 열정적이고 자세하게 설명해주셔서 처음 디자인이라는 것을 배우는 나도 부담 없이 따라가며 배울 수 있었고, 피그마나 디자인이 처음이다 보니 동아리원들과 웃긴 상황이 많이 나와서 재미있게 세션을 진행할 수 있었던 것 같다.
기획
3주차에 진행했던 기획은 멋쟁이사자처럼 아이디어톤 주제 및 프로젝트를 기획했다.
내가 기존 진행했던 프로젝트의 기획은 팀원 모두가 모여 브레인스토밍으로 타겟층을 정하고 주제를 정하고~ 이 기능을 구현하고~ 같은 느낌이었다면 자세하게 글로 기획안 명세를 작성하는 경험은 처음이라 쉽지 않았다.
위처럼 기획 명세서에는 배경, 문제상황, 목표, 구현내용, 주요 기능들을 상세하게 명세화해줘야 한다!
디자인세션동안 진행할 내 프로젝트는 "내 포트폴리오 만들기"로 정했다. 기존에 노션으로 만들어 둔 포트폴리오가 있지만 웹사이트로 조금 더 디자인적인 요소를 추가하고 배치와 구성을 내가 직접 하고 싶어서 반응형 웹/앱으로 구성하기로 했다!
사실 프론트엔드 개발자 지망생이라는 사람이라면 웹사이트로 보여주는 게 더 신용성 있다고 판단한 것도 있다.
간단한 프로젝트에 대한 기획은 와이어프레임을 짜면서 같이 구상해도 충분하다고 하셔서 나는 피그마에서 와이어프레임을 작성하며 프로젝트 기획도 같이 구성하기로 했다.
와이어프레임
이전에도 간단한 와이어프레임을 구성하고 보면서 개발한적은 몇 번 있지만 직접 와이어프레임을 세세하게 구성한적은 처음이였다!
나는 와프를 짜면서 기획도 했기 때문에 머릿속에서 포트폴리오 구성을 생각하며 와프를 만들었다.
프론트 개발을 하다가 디자인세션을 들은 경우는 내가 첨이라, 다른 동아리원들은 디자인을 이쁘고 화려하게 하던데, 나는 이걸 내가 직접 구현해야한다는 생각에 와이어프레임을 짜며 이건 css 속성을 어떻게 주고.. 얘는 컴포넌트화 해서 재사용하고.. 같은 생각이 계속 맴돌아서 와프부터 픽셀단위로 비율을 한땀한땀 정교하게 구성했다.. 비율이 맞아야 반응형 만들기 쉽단말이야..
스타일가이드와 디자인 시스템에 대해서도 배웠는데 두 개가 조금 헷갈릴 수 있어서 정리해두려고 한다.
스타일 가이드
스타일 가이드란 제품의 일관된 UI/UX를 위한 시각적 표현 규칙을 모아둔것
- 일관된 사용자 경험을 제공
- 디자인/개발 재작업 방지
- 온보딩 시간 단축
스타일 가이드에는 로고, 컬러팔레트, 폰트시스템, 버튼 시스템, 아이콘, 그리드, 모달 등 이 표현된다.
UI 텍스트 가이드라인 제작기
텍스트에 강남언니 뿌리기 by 강남언니 블로그
blog.gangnamunni.com
KRDS
대한민국 정부 디자인 시스템 KRDS는 누구나 쉽게 정부 서비스를 경험할 수 있도록 가이드라인과 디자인 리소스 및 디자인 시스템 구축을 위한 모든 자료와 최신 정보를 제공한다.
www.krds.go.kr
디자인 시스템
일관성, 효율성, 확장성을 위해서 디자인 시스템을 구성합니다.
사용자가 앱이나 웹사이트를 쓸 때, 구성되어있는 화면은 모두 비슷하게 생겨 있어야 익숙함을 느끼고 헷갈리지 않습니다.
버튼 위치, 폰트 크기, 색상 등이 제멋대로면 사용자가 혼란을 겪고 이탈할 가능성이 높습니다.
때문에 디자인의 전체 설계 구성 요소를 모아두어 디자이너나 개발자가 매 번 새로 디자인, 새로 코딩하지 않아도 되도록 설계합니다.
- 스타일가이드
- 컴포넌트 ( 버튼, 재사용가능한 UI 요소 등)
- 로고, 디자인 파일, 폰트, 아이콘
Human Interface Guidelines | Apple Developer Documentation
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.
developer.apple.com
Starbucks Creative Expression
You are using an unsupported browser. Please upgrade your browser to improve your experience. (close) Our newexpression.It all starts here. Use this guide as a high-level overview of how the Starbucks brand comes to life.MessageCanvas support required.As w
creative.starbucks.com
스벅 스타일가이드의 움직이는 UI는 어떻게 만드는건지 참 대단한것같다.. 나중에 꼭 만들어봐야지
디자인 시스템을 구성해보자
어찌저찌 구성한 내 디자인 시스템이다. 내 포트폴리오기 때문에 내 사진이랑.. 내 소개가 많은데 다 만들고 보니 약간 나르시즘적인 자기애가 충만한 사람같아 보인다.. 이런식으로 포트폴리오 컴포넌트를 구성했고 대표 컬러도 다크-화이트 모드 2가지로 분류해서 정해두었다.