웹기획 본기획 도구 변화와 과거의 한계웹기획 도구는 시대에 따라 지속적으로 변화해 왔습니다. 과거에는 파워포인트, 엑셀, 한글 등을 주로 사용했으며, 이는 화면 설계, 히스토리 작성, 협업 등에 어려움을 초래했습니다. 특히, 프로젝트 후반 단계에서 의견 차이가 발생하면 공방전으로 이어져 프로젝트 실패로 이어지는 경우가 많았습니다.건축, 토목, 전자 분야에서는 도면을 통해 설계를 명확하게 표현하고 협업하는 반면, 웹기획 분야에서는 이러한 도구가 부족했습니다. 파워포인트는 한계가 있었고, 다른 도구들은 설치, 유료, 파일 변환 등의 불편함을 야기했습니다.​와이어프레임 도구 도입과 트로이의 등장저는 이러한 문제를 해결하기 위해 와이어프레임 도구 도입을 시도했습니다. 초기에는 Axure를 사용했지만, 불편함으로 인해 다음 트로이를 사용하게 되었습니다. 트로이는 웹 기반 무료 도구였으며, 페이지 이동 및 내용 기록, 개발자와 디자이너 간 소통 기능 등을 제공했습니다.트로이는 저에게 큰 도움이 되었지만, 본기획 업데이트 부족과 다른 툴의 등장으로 서비스가 종료되었습니다. 하지만, 웹기획 도구의 중요성을 일깨우는 계기가 되었고, 끊임없이 새로운 도구를 모색하는 태도를 갖게 해주었습니다.​ 피그마 도입과 웹기획의 혁신2019년 사업 시작을 앞두고 해외에서는 피그마라는 웹 디자인 협업 도구를 활용한다는 것을 알게 되었습니다. 당시 피그마는 아직 국내에서는 잘 알려지지 않았지만, 디자인 툴 이상의 잠재력을 느꼈습니다.피그마는 실시간 협업, 프로토타입 제작, 버전 관리 등 다양한 기능을 제공하며, 웹기획 프로세스를 크게 개선했습니다. 저는 피그마를 도입하여 모든 기획 문서 작성 및 공유, 소통을 진행했습니다.​금융/공공 프로젝트에서의 피그마 활용: 어려움과 극복최근 금융/공공 프로젝트에 참여하면서 인터넷 접근이 제한된 환경에서 작업해야 하는 어려움에 직면했습니다. 처음에는 피그마 작업 후 파워포인트 변환 방식을 고려했지만, 협업 효율성을 위해 디자이너와 협력하여 피그마 도입을 추진했습니다. 참여자들은 처음에는 본기획 낯설어했지만, 빠르게 적응하여 피그마를 활용한 협업을 진행했습니다. 이를 통해 기획 지연 문제를 해결하고, 관리자와 사용자들의 만족도를 높일 수 있었습니다.​피그마: 웹기획 필수 도구의 등장피그마는 단순한 디자인 툴을 넘어 웹기획 프로세스 전반을 개선하는 강력한 도구입니다. 실시간 협업, 프로토타입 제작, 버전 관리 등의 기능을 통해 의사소통을 명확하게 하고, 작업 효율성을 높일 수 있습니다.아래 자료를 보면 디자인 툴로 인식할 수 있겠지만 실제는 디자인 툴의 장점과 협업 툴의 장점 그리고 파워포인트의 장점까지 모두 포함하고 있다고 생각합니다. 최근에는 파워포인트 형식(Slide Deck)의 웹 기반 서비스도 추가되어 베타로 서비스 중입니다.​​​Figma SlideDeck​저는 개인 경험을 통해 피그마가 웹기획 분야의 필수 도구가 되어가고 있다고 확신합니다. 실제로 최근에는 기획자 채용 시 피그마 활용 능력을 우대하는 기업들이 늘어나고 있으며, 프로젝트에서도 피그마 작업을 본기획 요구하는 경우가 많아지고 있습니다.​​​​​​피그마 활용 웹 기획 팁피그마는 웹 기획 단계에서 사용자 경험을 직관적으로 구체화하고, 효율적으로 의사소통하며, 일관된 디자인 시스템을 구축하는 데 큰 도움을 줄 수 있는 강력한 도구입니다. 피그마 활용 웹 기획을 위한 몇 가지 추가 팁을 알려드리겠습니다.1. 디자인 시스템 구축부터 시작하기웹 기획을 시작하기 전에 버튼, 텍스트 스타일, 색상 등 기본적인 디자인 요소를 정의하고 관리하는 디자인 시스템을 구축하는 것이 좋습니다. 이렇게 하면 디자인 일관성을 유지하고, 디자인 작업의 효율성을 높이며, 브랜드 가이드라인을 확립하는 데 도움이 됩니다.​2. 사용자 흐름도를 만들어 전체적인 구조를 파악하기사용자가 웹사이트를 어떻게 사용하게 될지 시각적으로 표현하는 사용자 흐름도를 만들어 전체적인 웹사이트 구조를 파악하는 것이 중요합니다. 이렇게 하면 사용자 경험을 중심으로 웹사이트의 구성을 계획하고, 중요한 기능과 페이지 간의 본기획 연관성을 명확하게 정의할 수 있습니다.​3. 와이어프레임 제작으로 구체적인 화면 구성 설계하기사용자 흐름도를 기반으로 각 페이지의 구체적인 레이아웃, 요소 배치, 기능 등을 설계하는 와이어프레임을 제작합니다. 피그마는 다양한 와이어프레임 템플릿과 레이아웃 옵션을 제공하여 빠르고 쉽게 와이어프레임을 만들 수 있도록 지원합니다.​4. 프로토타입 제작으로 사용자 경험을 시뮬레이션하기와이어프레임을 기반으로 실제 웹사이트처럼 사용자 경험을 시뮬레이션할 수 있는 프로토타입을 제작합니다. 피그마는 버튼 클릭, 페이지 전환, 애니메이션 등 다양한 인터랙션을 설정할 수 있는 강력한 프로토타입 기능을 제공합니다.​​5. 사용자 테스트를 통해 디자인 개선하기제작된 프로토타입을 실제 사용자에게 테스트하여 사용자 반응을 직접 확인하고 디자인을 개선하는 것이 중요합니다. 피그마는 사용자 테스트 도구와 연동되어 테스트 결과를 쉽게 수집하고 분석할 수 있도록 지원합니다.​6. 디자인 피드백 수렴 및 반영하기디자인 팀, 개발 팀, 클라이언트 등 본기획 다양한 이해관계자로부터 디자인 피드백을 수렴하고 디자인에 반영하는 과정이 중요합니다. 피그마는 댓글 기능, 버전 관리 기능 등을 통해 피드백 수렴 및 반영 과정을 효율적으로 관리할 수 있도록 지원합니다.​7. 웹 표준 및 접근성 고려하기웹사이트가 웹 표준을 준수하고 모든 사용자가 쉽게 이용할 수 있도록 접근성을 고려하는 것이 중요합니다. 피그마는 웹 표준과 접근성 검사 기능을 제공하여 디자인 단계에서 웹 표준 준수 및 접근성 문제를 확인하고 해결할 수 있도록 지원합니다.​8. 최신 플러그인 및 템플릿 활용하기피그마는 다양한 기능을 추가하는 플러그인과 미리 제작된 디자인 템플릿을 제공하는 활발한 커뮤니티를 가지고 있습니다. 웹 기획 단계에서 필요한 다양한 기능을 가진 플러그인을 활용하면 기획 작업의 효율성을 높일 수 있으며, 디자인 템플릿을 참고하여 기획 방향성을 설정하거나 시간을 단축할 수 있습니다.피그마를 활용하여 본기획 웹 기획 단계를 효과적으로 진행하면 사용자 중심의 웹사이트를 설계하고, 개발 과정을 간소화하며, 웹사이트 출시 후 문제 발생 가능성을 줄일 수 있습니다.​피그마는 웹 기획 프로세스를 간소화하는 데 도움이 되는 강력한 도구입니다. #피그마 #웹기획피그마를 사용하면 더 나은 사용자 경험을 만드는 데 도움이 되는 와이어프레임, 프로토타입 및 디자인 시스템을 만들 수 있습니다. #ux디자인 #ui디자인피그마는 협업에 적합한 도구이기 때문에 팀과 협력하여 최상의 웹사이트를 만들 수 있습니다. #협업 #디자인사고​​​결론: 끊임없는 학습과 변화에 대한 열린 자세웹기획 도구는 시대에 따라 지속적으로 변화하고 있습니다. 저는 과거의 경험에 안주하지 않고, 끊임없이 새로운 도구를 배우고 적용하는 열린 자세를 유지하며 웹기획 분야의 발전에 기여하고자 합니다.피그마는 제게 개인적으로 큰 변화를 가져다주었으며, 앞으로도 웹기획 분야의 발전과 더불어 더욱 다양한 도구들을 탐색하고 활용해나가겠습니다.저의 본기획 경험이 다른 웹기획자들에게 도움이 되기를 바랍니다.​​​추가적으로 언급하고 싶은 내용다양한 도구 활용: Figma Mirror, Figma jam 등 다양한 도구들을 활용하여 웹기획 프로세스를 개선할 수 있습니다. 각 도구의 장단점을 파악하고 상황에 맞게 적절하게 활용하는 것이 중요합니다.협업 문화 조성: 웹기획 도구는 팀워크를 통해 더욱 효과적으로 활용될 수 있습니다. 팀원들과의 소통을 통해 도구 활용 방식을 공유하고, 서로에게 피드백을 제공하는 협업 문화를 조성하는 것이 중요합니다.지속적인 학습: 웹기획 분야는 빠르게 변화하고 있습니다. 최신 트렌드와 도구를 파악하기 위해 관련 블로그, 콘퍼런스, 교육 자료 등을 활용하여 지속적인 학습을 해야 합니다.​​​#웹기획 #피그마 #웹디자인 #협업 #프로젝트관리 #디자인 #개발 #UX #UI #웹사이트제작 #기획지연 #사용자만족도 #금융프로젝트 #공공프로젝트 #실시간협업 #프로토타입 #버전관리 #웹기획자 경험담 #도구 변화 적응 #끊임없는 학습 #성장 스토리​​​