[080] PJT_4: 피그마(Figma)로 화면설계서 제작

 

2024.09.09(월)
 
PJT 4일차

 

PJT 1~2일차에는 주제 선정, 팀 이름 등을 정했다.

 

3일차엔 특강 진행!

현업에 계시는 멘토님께 조언을 얻었다.

해당 피드백이 굉장히 굉장히 많이 도움이 되었다..

 

그리고 4일차부터 매일 진행된 내용을 줄글로 나열할 예정!

그리고 구현하면서 어려웠던 점을 구글링해서 요약하고자 한다.

(기본적이지만 처음 알았던 정보들도 함께..)

 

---

 

PJT

9월 1주차

• 데일리 스크럼 작성 시작
• Figma로 화면설계

 

---

Figma로 스토리보드 제작

 

피그마(Figma)로 화면 설계하는 이유

 

디지털 프로덕트 개발 과정에서 화면 설계(UI/UX 디자인)는 매우 중요한 요소입니다. 사용자 경험(UX)을 극대화하고, 서비스의 가치를 잘 전달하기 위해서는 정확하고 직관적인 설계가 필수적입니다. 이러한 과정에서 피그마(Figma)는 뛰어난 협업 기능과 강력한 디자인 도구로 현업에서 많이 사용된다고 합니다.

 

1. 피그마(Figma)란 무엇인가?

Figma는 클라우드 기반의 디자인 툴로, 실시간 협업과 디자인 공유가 가능한 도구입니다. 웹 브라우저에서 작동하며, 별도의 설치 없이도 어디서든 사용할 수 있어서, 팀 구성원들이 동시에 작업하고 피드백을 제공할 수 있는 환경을 제공합니다.

 

2.  왜 피그마를 사용할까?

1) 실시간 협업 기능

피그마의 가장 큰 장점 중 하나는 실시간으로 협업이 가능하다는 점입니다. 다른 팀원이 디자인 작업 중일 때, 기획자나 개발자도 동시에 접속하여 의견을 공유하고 수정 사항을 바로 반영할 수 있습니다. 

 

2) 클라우드 기반

Figma는 클라우드에서 작동하기 때문에 별도의 소프트웨어 설치가 필요 없습니다. 웹 브라우저만 있다면 어디서나 작업이 가능하고, 파일을 주고받을 필요 없이 링크만 공유해도 작업물이 실시간으로 업데이트됩니다.

 

3) 디자인 시스템 관리

디자인 시스템을 중앙에서 관리할 수 있어 일관된 디자인을 유지하는 데 유리합니다. 색상, 폰트, 버튼 스타일 등 디자인 요소들을 한 곳에서 관리하여 팀 전체가 동일한 스타일 가이드를 따를 수 있습니다.

 

4) 멀티플랫폼 지원

피그마는 다양한 플랫폼에서 사용 가능합니다. Windows, Mac, Linux 등 운영체제에 상관없이 사용할 수 있어 다양한 환경에서 작업하는 팀에게 적합합니다.

 

5) 프로토타이핑 기능

디자인 작업뿐만 아니라 프로토타입을 빠르게 제작할 수 있는 기능을 제공합니다. 버튼 클릭, 페이지 전환 등의 상호작용을 추가하여 실제 동작하는 앱이나 웹사이트의 흐름을 미리 테스트해볼 수 있습니다. 이 기능을 통해 개발 전 사용자 피드백을 얻고, 필요한 수정 사항을 미리 반영할 수 있습니다.

 

한 팀원분이 유료 버전을 사용하고 계셔서, 여러 페이지로 나눠 작업을 진행했습니다.
대박 편한 기능.. (위 내용은 GPT 기반으로 작성)

[080] PJT_4: 피그마(Figma)로 화면설계서 제작

 

 

화면 설계(UI/UX 디자인)란 무엇인가?

화면 설계란 디지털 제품, 예를 들어 웹사이트나 모바일 애플리케이션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 시각적으로 구성하고 계획하는 과정입니다. 화면 설계를 통해 사용자가 제품을 어떻게 이용할지, 어떤 경로로 이동할지, 각 화면에서 어떤 정보를 제공할지를 구체적으로 정의합니다.

 

이 과정은 단순히 '보이는 것'을 디자인하는 것이 아니라, 사용자가 제품을 쉽게 이해하고 이용할 수 있도록 사용자 경험을 최적화하는 것입니다. 사용자가 처음 접하는 화면에서부터 원하는 작업을 완료할 때까지의 경로를 설계해 효율적이고 편리한 인터페이스를 만드는 것이 목표입니다.

 

왜 화면 설계가 필요한가?

1) 사용자 경험 향상

사용자가 직관적으로 서비스를 사용할 수 있도록 만드는 것이 화면 설계의 핵심입니다. 복잡한 기능이나 정보를 이해하기 쉽게 제공하는 것이 중요합니다. 좋은 화면 설계는 사용자의 불편함을 줄이고, 목표에 더 빨리 도달할 수 있게 해줍니다.

 

2) 명확한 커뮤니케이션 도구

화면 설계는 개발자, 디자이너, 기획자 등 팀 내의 명확한 커뮤니케이션 도구 역할을 합니다. 이를 통해 개발자와 디자이너는 구체적인 화면을 공유하면서 작업 내용을 이해하고, 각자의 역할을 분명히 할 수 있습니다. 설계가 명확하지 않으면 개발 과정에서 혼란이 발생할 수 있습니다.

 

3) 개발 방향을 구체화

개발자는 화면 설계를 통해 각 기능이 어떻게 구현되어야 할지 명확한 비전을 얻게 됩니다. 기능의 우선순위와 화면 전환 흐름을 알 수 있어 개발이 보다 효율적으로 이루어집니다. 미리 설계된 화면은 개발 중에 발생할 수 있는 변경 사항을 최소화하고, 일관된 방향으로 프로젝트가 진행되도록 도와줍니다.

 

4) 프로젝트 관리 및 일정 관리에 도움

화면 설계는 프로젝트의 전반적인 일정 관리에 필수적인 요소입니다. 구체적인 설계를 통해 각 기능이 어떤 화면에서, 어떻게 작동할지 명확하게 알 수 있기 때문에 개발 기간을 예측하고 관리할 수 있습니다. 이를 통해 개발 팀은 보다 효율적으로 작업을 나누고 일정에 맞춰 개발을 진행할 수 있습니다.

 

5) 사용자 요구사항 반영

사용자의 요구사항이나 피드백을 반영한 화면 설계를 통해, 사용자의 기대를 충족시킬 수 있습니다. 개발자는 설계된 화면을 바탕으로 사용자 요구를 구현할 수 있으며, 설계가 변경되더라도 명확한 가이드라인을 통해 쉽게 조정할 수 있습니다.

 

 

 

---

 

피그마 작업은 완료된 상태!

내일부터는 DB 설계한 후, 개발 시작할 계획이다.

아좌자!