인프런 커뮤니티 질문&답변

안녕하세요. >> 표시로 각 항목별 답변 드려요.

실제로 개발할때 IA, 페르소나만 있으면 되나요?

제가 앱을 하나 개발중인데요. 저 혼자 1인 개발로 하고 있습니다. 일단 생각나는데로 페이지 하나씩 개발하다보니 페이지 다 만들고나서 기능 추가, 수정을 위해 갈아 엎는 경우가 계속 생기더라구요.

AI에 물어보니,

혼자서 개발할 때의 적용 순서 (요약)

"대참사"를 막기 위한 가장 이상적인 생각의 흐름은 다음과 같습니다.

1. "누구를 위한 앱이지?" -> 유저 페르소나를 간단히 정의한다. (예: "30대 초반의 이직 준비생, 김코딩")

>> 네 맞습니다. 이게 정말 필요합니다. 누구를 위한 서비스인가를 먼저 생각하고 시작해야 합니다.

1. "김코딩은 지금 어떤 어려움을 겪고 있지?" -> 유저 저니맵을 그려본다. (예: "강의 정보가 흩어져 있어 비교하기 힘들다"는 Pain Point 발견!)

>> 네 이건 사실 유저 저니맵은 대기업이나 해외기업이 아니고선 하진 않습니다. 하지만 좀 기획을 공을 들이는 스타트업이나 개인들은 이것을 추가로 하기도 합니다. 그런데 사실 지금은 AI 시대라서 AI에게 요청하고 해당 내용을 받아서 동의하거나 일부 생각이 다른 부분을 수정해달라고 하면 돼서 유저 저니맵을 그려보는 것도 좋습니다.

1. "좋아, 이 문제를 우리 앱으로 어떻게 해결해 줄까?" -> 핵심 기능들의 유저 플로우를 그린다. (예: "강의 비교하기" 플로우, "수강 신청" 플로우를 그려보며 필요한 화면들을 구체화한다.)

>> 네 이것도 AI로 10분이면 할 수 있는 일이어서 해보는 것을 추천드려요.

1. "그래서 우리 앱은 총 몇 개의 화면이 필요하고, 메뉴는 어떻게 구성할까?" -> IA를 정리한다. (예: 엑셀에 필요한 페이지 목록과 메뉴 구조를 쭉 적는다.)

>> 이 부분은 AI가 아직 잘 못하는 것 같아요. 그리고 메뉴의 구성이 해외의 서비스와 국내 서비스가 유사하기도 하지만 다른 부분도 많고 AI는 이런 서비스의 메뉴를 너무 과하게 만들 거야 너무 간소화해서 만들거나 해서 이 부분에 있어서 경력이 없으신 분들은 기준 잡기가 어렵다고 생각합니다. 하지만 방법이 있습니다. 그건 실제로 존재하는 유사 서비스를 직접 파악해서 메뉴 구조를 작성해보시면 아~ 이런 서비스는 이런 정보의 규모가 필요하구나를 아실 수 있고 그렇게 직접 작업하시면서 AI에게 더블체크하시면 도움이 되실 거에요.

1. "각 화면의 레이아웃은 어떻게 잡고, 흐름은 자연스러운가?" -> 와이어프레임/프로토타입을 만든다. (예: Figma로 간단히 화면들을 그리고 연결해서 직접 클릭해본다.)

>> 피그마로 할 수 있는 것은 1차 UI를 그리고 2차 프로토타이핑을 해보면 흐름을 시뮬레이션을 할 수 있어서 누락된 UI를 발견해서 추가하실 수 있으실 거에요. 직접 클릭해보면 누락 포인트를 더 확실하게 잡아내실 수 있으실 거에요.

1. "오케이, 이대로 만들면 되겠다!" -> 이제 개발을 시작한다.

>> 일단 1) 유저 페르소나 2) IA 3) UI 4) 프로토타이핑 그런데 프로토타이핑을 전체 페이지를 할 필요는 없고 회원가입, 로그인, 비번찾기, 마이페이지 등 회원체계에 대해선 꼭 해야 하고요. 이게 기본 뼈대니까요. 그리고 핵심 페이지들 정도 쇼핑몰이면 리스트, 상세, 결제 등 정보를 프로토타이핑을 해보시면 됩니다. 더 욕심을 내시면 더 하셔도 되는데 프로토타이핑도 노가다여서요.^^; 5) 마지막으로 기능정의까지 해놓으시면 기획단에서는 다음 단계인 디자인, 개발을 위한 준비는 된 것입니다.

이 과정을 거치면, 개발 단계에서는 이미 구조가 다 정해져 있기 때문에 '뭘 만들어야 하지?'를 고민하는 대신 '어떻게 잘 만들지?'에만 집중할 수 있습니다. 라우팅이 꼬이거나 페이지를 뒤엎을 확률이 극적으로 줄어들게 됩니다.

>> 맞습니다. AI 시대에 기획이 더 필요한 이유입니다. 설계 단계에서 시행착오를 다 겪고 디자인 단계부터는 달리시면 되는 게 맞습니다.

위와같이 얘기해주는데요. 유저 저니맵과 유저 플로우는 따로 할 필요가 없나요? 선생님 강의에 내용이 없는거 같아서요. 그리고 와이어프레임과 프로토타입은 같은거에요?

>> 유저 저니맵, 유저 플로우는 선택이지 필수는 아닙니다. 그리고 IA 작성이 번거로우시다면 유저 플로우가 IA와 유사한 것이어서 유저 플로우를 만드셔도 됩니다.

네 제 강의의 커리큘롬이 현업에서 더 보편적으로 쓰이는 것이고 현업에서는 유저 저니맵, 유저 플로우는 저 말고는 하는 분들을 보지 못했습니다.

와이어프레임은 UI를 뜻하고, 프로토타입은 견본품이란 뜻인데 피그마에서의 프로토타입은 각 화면 UI를 연결하는 것으로 프로토타입이라고 합니다.

그럼 우선 답변이 된 것 같고요. 추가로 궁금하신 사항은 또 문의 주세요. 저 역시 매일매일 기획을 하거나 개발을 하고 있어서 바로 바로 답변은 드리지 못하지만 지금과 같이 또 답변 드리겠습니다.

감사합니다.^^

안녕하세요, 인프런 AI 인턴입니다. 박상원님.

현재 앱 개발 중에 경험하고 계신 문제점과 관련하여 저도 이해가 갑니다. AI가 설명한 개발 프로세스는 효율적인 앱 개발을 위해 취해야 할 단계들을 잘 정리한 것입니다. 질문 주신 부분에 대해 몇 가지 추가 설명을 드리겠습니다.

1. 유저 저니맵과 유저 플로우의 차이점:
   
   • 유저 저니맵: 유저가 서비스를 이용하는 과정의 여정을 시각적으로 나타낸 것입니다. 사용자가 어떤 경로를 통해 서비스를 이용하고, 어떤 경험을 하는지를 이해하는 데 도움이 됩니다.
     
   • 유저 플로우: 앱 내에서 사용자가 특정 기능을 수행할 때 거치는 단계들을 시각적으로 표현한 것입니다. 주로 특정 목표를 달성하기 위해 사용자가 어떤 화면을 거치는지를 보여줍니다.
     

이 둘은 별개의 도구는 아니지만, 서로 보완적인 역할을 합니다. 따라서, 개발 효율성이나 깊이 있는 사용자 이해를 위해 둘 다 사용하는 것이 좋습니다.

2. 와이어프레임과 프로토타입의 차이점:
   
   • 와이어프레임: 페이지 레이아웃과 UI 요소들의 배치를 간단하게 그린 스케치입니다. 세부적인 디자인보다 기능적 요소에 중점을 둡니다.
     
   • 프로토타입: 와이어프레임에 인터랙티브 요소를 더한 것입니다. 실제 어플리케이션처럼 클릭이 가능하고 흐름을 체험할 수 있습니다.
     

따라서, 와이어프레임과 프로토타입은 같은 개념이 아니며, 프로토타입은 와이어프레임의 발전된 형태로 볼 수 있습니다.

관련하여 더 많은 정보와 구체적인 가이드를 제공하는 기존의 답변이 두 군데 있습니다:
- 어디에 언급되었는지 문의 주셔서 답변드려요!
- 강의 중에 말씀주시는 wbs나 작업물에 대한 양식?

이 답변이 박상원님의 이해를 돕는데 도움이 되었길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.