디자인 초보 탈출! 전문가처럼 보이는 웹디자인 꿀팁

 

안녕하세요 찐망고입니다.

 

디자인은 단순히 시각적인 요소를 넘어서 사용자와의 소통을 위한 도구인데요.

효과적인 디자인을 위해 스토리텔링을 활용하고, 각 디자인 요소에 의미를 부여하는 방법을 포스팅 해볼게요.

 

1. 디자인에 스토리 담기

디자인의 각 요소에 의미를 부여하고, 사용자와의 소통을 강화하기 위해 스토리텔링을 활용하세요.

• 스토리텔링: 디자인에 이야기를 담아내어 사용자와 감정적으로 연결됩니다. 예를 들어, 브랜드의 역사나 철학을 시각적으로 표현합니다.
• 의미부여: 디자인 요소 하나하나에 의미를 담아 일관성을 부여합니다.
  • 화면 구성: 이벤트 배너를 클릭을 유도하기 좋은 위치에 배치하여 사용자의 행동을 유도합니다.
• 디자이너의 고민 이해하기: 디자인을 보면서 디자이너의 고민을 이해해보세요.
  • 이 버튼을 왜 이렇게 배치했을까?
  • 왜 이 컬러를 사용했을까?
  • 박스의 모양이 왜 동그라미일까?

 

2. 메인 페이지의 첫인상

첫 화면에서 이미지를 효과적으로 사용하여 사용자의 관심을 끌어야 합니다.

• 첫인상: 첫 화면에 사용된 이미지는 사용자가 스크롤을 내릴지 말지를 결정합니다.
• 고퀄리티 이미지 사용: 관련 업종의 사진을 사용하고, 품질 높은 이미지를 활용합니다.
  • 무난한 사진: 빌딩, 도시, 친환경, 글로벌 사진은 대부분의 업종에서 사용 가능합니다.
  • 이미지 합성 및 보정: 필요한 경우 이미지를 합성하고, 전체적인 톤을 정리하여 일관성을 유지합니다.
• 영상 활용: 이미지만이 아니라 영상을 적극적으로 활용하여 동적인 첫인상을 줄 수 있습니다. 배경 영상이나 짧은 클립을 통해 더 생동감 있는 화면을 구성할 수 있습니다.

 

3. 폰트 사용하기

적절한 폰트 사용은 디자인의 완성도를 높입니다.

• 영문폰트와 한글폰트: 영문과 한글을 모두 반영하는 폰트를 사용하세요.
• 폰트 개수: 1~3개의 폰트를 사용하는 것이 좋으며, 폰트 크기와 자간, 행간을 신경 쓰세요.
• 폰트의 강약 사용: 많은 폰트보다는 폰트 두께의 종류가 다양한 폰트를 사용하는 것이 좋습니다.
• 기본 폰트: 고딕체는 가독성이 높아 기본으로 사용하기 좋습니다.

 

4. 디테일에 신경 쓰기

디자인의 작은 디테일들이 모여 완성도 높은 디자인을 만듭니다.

• 박스 형태: 둥근 테두리 형태와 선 두께 사이즈를 신경 쓰세요. 예를 들어, 버튼의 모서리를 둥글게 처리하면 더 부드러운 인상을 줄 수 있습니다.
• 단위 고려: px, dp, pt와 같은 단위를 잘 고려하세요.
• 적절한 사진과 아이콘 사용: 사진과 아이콘을 적절히 사용하여 시각적 효과를 극대화하세요.
• 간격과 비율: 각 요소 간의 간격과 사이즈 비율을 꼭 신경 쓰세요. 빈 공간(화이트 스페이스)을 활용하여 디자인의 가독성과 집중도를 높입니다.

 

5. 기본을 탄탄하게

디자인의 기본을 탄탄하게 다져야 합니다.

• 기본 디자인: 누구나 괜찮다고 느낄 수 있는 디자인에는 이유가 있습니다. 많이 찾아보고 배워보세요.
• 대기업 사이트 참고: 대기업 사이트는 기본형도 예쁘게 봐줍니다. 일반 기업 사이트도 보수적인 디자인을 선호합니다.
• 업종별 스타일: 업종마다 선호하는 스타일과 컬러가 있습니다. 해당 업종의 특성을 반영한 디자인을 합니다.
• 전체적인 통일감: 나무만 보지 말고 숲을 보며 전체적인 통일감을 유지하세요.
• 트렌드 파악: 디자인은 트렌드에 민감하므로 계속해서 보고 공부해야 합니다. 최신 디자인 트렌드를 지속적으로 팔로우하세요.
• 스토리텔링: 고객을 설득할 수 있는 디자인을 하기 위해 스토리텔링이 중요합니다.
• 모작 및 클론디자인: 잘된 디자인을 충분히 모작해보는 것도 좋은 연습입니다. 이를 통해 디자인 기술과 감각을 향상시킬 수 있습니다.