디자인을 처음 접하는 개발자들에게 이 글을 바칩니다.
근데 사실 본인도 디자이너는 아니고 그냥 UI/UX에 관심 있는 개발자이기 때문에 디자인 처음하는 개발자만 보시길~
❌ 디자이너들은 출입금지입니다… ❌
이 글은 개발자인 우리가 울며 겨자 먹기로 디자인을 해야 할 때 도움이 될 만한 팁들로 채워져 있습니다.
아마 읽고 있는 당신도 디자이너 없이 프로젝트를 시작해서 개발자인데도 디자인을 해야 하는 상황일 겁니다.
디자인에 대해 아무것도 모르지만, 이 가이드를 따라 하면 야 너두 디자인할 수 있어…~~~! 🍀
먼저 프로젝트 디자인을 진행하는 일반적인 과정은 다음과 같습니다.
1. IA(정보 구조) 작성하기
2. 레퍼런스 찾기
3. 와이어프레임 작성하기
4. 디자인 시스템 설정하기
5. GUI(그래픽 사용자 인터페이스) 디자인하기
1. IA(Information Architecture) 작성하기
IA는 정보 구조를 의미합니다.
쉽게 말해 페이지 간의 연결성과 콘텐츠의 배치를 체계적으로 정리한 것입니다.
IA를 작성하는 것은 프로젝트 초기 단계에서 가장 중요한 작업 중 하나입니다.
아직 기획이 완전히 확정되지 않았다면, 최소한의 MVP(최소 기능 제품) 정보를 바탕으로 어떤 페이지가 필요하고, 각 페이지에 어떤 콘텐츠가 들어갈지 대략적으로 정리하는 것이 좋습니다.
예시로 이전 프로젝트에서 작성한 IA입니다.
이렇게 페이지들을 나열하고, 각각의 페이지에 들어갈 요소들을 목록으로 작성해 둡니다.
2. 레퍼런스 찾기
IA를 작성했다면, 이제 각 페이지에 필요한 디자인 레퍼런스를 찾아야 합니다.
디자인 경험이 없는 개발자에게는 특히 더 중요합니다.
모방은 창조의 어머니!!
먼저 잘 만들어진 디자인들을 참고하는 것이 가장 좋은 방법입니당.
대충 기본이라도 하는 디자인을 하기 위해서는 대세를 따르는 것이 좋습니다.
사람들이 많이 사용하고 익숙한 UI 가 어쩌면 정답일 수도 있기 때문이죠
레퍼런스를 찾는 가장 간단한 방법은핀터레스트(Pinterest)라는 사이트를 활용하는 것입니다.
핀터레스트는 다양한 이미지와 디자인을 검색할 수 있는 사이트로, 무궁무진한 레퍼런스 아이디어를 가지고 있습니다.
검색할 때는 원하는 디자인 키워드 + `UI` 혹은`디자인`을 입력하면 됩니다.
예를 들어 로그인 화면 디자인이 필요하다면 로그인 UI라고 검색해 보세요.
수많은 로그인 화면 디자인 예시가 나올 겁니다. 원하는 디자인을 찾으면 저장해 두고 참고하면 됩니다.
예시로 '카드 UI', '대시보드 UI' 등 원하는 화면을 검색해 보세요.
참 쉽쥬?
3. 와이어프레임 작성하기
레퍼런스를 충분히 모았다면, 이제 이들을 참고하여 와이어프레임을 작성할 차례입니다. 레퍼런스를 통해 정한 UI를 베이스로 내가 원하는 대로 화면을 구축해 보면 됩니다.
여기서 중요한 점은 처음부터 완벽한 디자인을 하려고 하지 말라는 것입니다. 처음부터 완성도 높은 디자인을 시도하는 것은 시간 낭비가 될 수 있습니다.
와이어프레임은 말 그대로 디자인의 스케치입니다. 대충 레이아웃을 잡고, 페이지 구성 요소들을 배치하는 단계입니다.
기획이 변경되거나 기능이 바뀌는 상황에 대비해 유연하게 수정할 수 있도록 간단하게 작업하는 것이 좋습니다.
이렇게 해야 나중에 디자인을 수정해야 할 때도 쉽게 대응할 수 있습니다.
절대 대충 한 게 아닙니다. 다 의도한 거에열...~~
4. 디자인 시스템 설정하기
와이어프레임 작업이 완료되면, 이제 전체적인 디자인 테마와 시스템을 설정할 차례입니다. 이 단계에서는 서비스의 성격을 고려하여 디자인 방향을 결정해야 합니다.
이때 고려해야 하는 것은 우리의 서비스는 어떤 성격을 가진 서비스인가? 라는 질문입니다.
예를 들어, 신뢰성을 강조해야 하는 서비스라면 깔끔하고 신뢰감 있는 UI가 필요하고,
감성적이거나 스토리텔링이 중요한 서비스라면 애니메이션과 캐릭터를 활용한 포근한 UI가 필요할 수 있습니다.
그런데 사실 이 부분에서 본인도 전문가는 아니기 때문에 색과 관련되어서는 잘 정리된 다른 블로그를 추천합니다.
좋은 색상을 고르시길 ~~!
색채 심리학을 브랜딩에 적용하는 방법
목차 1.색채 심리학이란 무엇인가? 2.컬러의 의미 3.브랜딩에서의 컬러 4.색상 선호도 5.주의해야 할 점 6.추천 아티클 매일, 어디서든 우리는 다양한 컬러에 둘러싸여 있다. 주변에 있는 어떤 사물
brunch.co.kr
그리고 디자인 시스템을 설정할 때는 색상 팔레트, 폰트, 버튼 스타일 등 중요한 디자인 요소들을 한 곳에 모아두는 것이 좋습니다.
그리고 꼭 피그마(Figma)에서 팔레트로 만들어 기록 두세요. 그래야 팀원들과 공유하기도 쉽고, 디자인의 일관성을 유지할 수 있습니다.
특히, 색상 코드나 폰트 사이즈 등은 꼭 통일된 시스템을 만들어 사용하세요.
그렇지 않으면 개발 도중 예기치 않은 디자인 문제로 골머리를 앓게 될 수 있습니다. ((절대 본인 이야기 아님))
5. GUI 디자인하기
GUI는 그래픽 사용자 인터페이스의 약자로, 실제 사용자에게 보여질 페이지의 디자인을 말합니다.
이제 와이어프레임과 디자인 시스템을 바탕으로, 실제 페이지 디자인을 시작할 시간입니다.
공용 컴포넌트를 먼저 디자인하고, 이를 기반으로 페이지를 구축해 나가는 것이 좋습니다.
이렇게 하면 디자인의 일관성을 유지하면서도 효율적으로 작업할 수 있습니다.
이 단계를 마치면, 당신도 디자인할 수 있는 멋진 개발자가 됩니다!
사실 디자인은 개발자가 따로 공부하지 않았다면 어려운 영역입니다.
그래도 이 가이드가 조금이라도 도움이 되어서
처음으로 디자이너 없이 프로젝트를 진행하는 개발자들에게 작은 힘이 되길 바랍니다.
파이팅! ~~ 👊
((p.s. 혹시 이 모든 걸 읽고 어이가 없는 디자이나 혹은 디.개분이 계신다면 언제든지 피드백해주셔도 좋습니다..~~))
'우테코' 카테고리의 다른 글
| [우테코 6기] 방끗의 페르소나와 유저 플로우 짜기 (1) | 2024.09.30 |
|---|---|
| [우테코 6기] 프로젝트 환경 세팅 및 기술 스택 정하기 (1) | 2024.08.30 |
| [우테코 6기] 레벨3 팀플 진행 과정; 내가 디자이너야, 개발자야? (4) | 2024.08.26 |
| [우테코 6기] 레벨3 팀플 아이디어 기획 및 주제 선정 과정 (5) | 2024.08.26 |
| [우테코 6기] 우아한테크코스 프론트 레벨 2 수료 생활기 🚀 (39) | 2024.06.28 |
