Figma로 UI 기획 연습하기

✨ UI 기획이란?

• 사용자 인터페이스를 효과적으로 설계하여 사용자가 제품이나 서비스를 쉽고 편리하게 사용할 수 있도록 만드는 과정

• 단순히 예쁜 화면을 만드는 것을 넘어, 사용자의 행동과 심리를 이해하고 이를 바탕으로 최적의 경험을 제공하기 위한 과정

🍄 UI 기획의 중요성

• 사용자 만족도 향상

  • 직관적이고 사용하기 쉬운 UI는 사용자가 제품이나 서비스를 긍정적으로 인식하고 만족도를 높이는 데 크게 기여

• 비스니스 목표 달성

  • 좋은 UI는 사용자의 이탈률을 낮추고, 목표하는 행동(예. 구매, 회원가입 등)을 유도하여 비즈니스 목표 달성에 직접적인 영향을 미침

• 개발 효율성 증대

  • 명확한 UI 기획은 개발 과정에서 발생할 수 있는 혼란을 줄이고, 효율적인 개발을 가능하게 함

• 브랜드 이미지 제고

  • 일관되고 편리한 UI는 브랜드의 전문성과 신뢰도를 높여 긍정적인 브랜드 이미지를 구축하는 데 도움을 줌

🪜 UI 기획 과정

기획 -> 디자인 -> 개발 -> 런칭

1. 목표 설정 및 사용자 연구

   • 프로젝트 목표 정의

   • 사용자 분석

   • 경쟁사 분석

   • 정보 구조(IA) 설계

2. 화면 설계

   • 와이어프레임 작성: 페이지의 레이아웃, 정보 배치, 기능 요소를 간략하게 스케치

   • 프로토타이핑: 와이어프레임 + 상호작용, 실제 작동하는 것처럼

   • 스토리보드 작성: 각 화면의 구성, 기능, 사용자 시나리오 등을 상세하게 기술하여 개발 및 디자인 팀과의 소통을 돕는 문서 작성

3. 시각 디자인 및 구현

   • 비주얼 디자인

   • 디자인 시스템 구축

   • 개발자 협업

4. 사용자 테스트 및 개선

   • 사용성 테스트

   • 피드백 반영 및 개선

🍁 UI 기획안

• 기획에서 디자인 단계로 넘어갈 때 디자이너가 기획을 잘 이해하기 위해

• 와이어프레임 단계에서 기술해놓은 기획안

👻 UI 기획자가 하는 일

• 서비스의 목적과 사용자의 니즈를 분석하여 UI 전략을 수립

• 정보 구조를 설계하고 사용자 플로우 정의

• 와이어프레임, 스토리보드, 프로토타입 등을 제작

• 디자인 팀, 개발 팀 등 다양한 팀과 긴밀하게 협업

• 사용성 테스트를 기획하고 결과를 분석하여 개선점을 도출

• 서비스 출시 후에도 지속적으로 사용자 데이터를 분석하고 개선 방안을 제시

💻 UI 기획에 사용되는 주요 도구

• 와이어프레임/프로토타이핑 툴: figma, Adobe XD, sketch, balsamiq, proto.io, Axure

• 화이트보드/협업 툴: miro, notion

• 문서화 툴: google docs, notion

🕹 UI 기획 vs IT 기획