오늘은 피그마 화면설계서를 사용하는 기획자들이 자주 고민하는 버전 관리 방법에 대해 깊이 있게 다뤄보려고 해요. 프로젝트가 커질수록 버전 관리가 얼마나 중요한지 절실히 느끼게 되죠. 특히 피그마에서는 효율적인 버전 관리를 통해 작업의 혼란을 줄이고, 협업의 질을 높일 수 있답니다. 보통 기획자는 대부분 피그마 보다는 PPT나 스케치 등 툴을 이용해서 작성하는데요 피그마가 요즘 대세고 관련 플러그인도 많이 있다보니까 피그마로 화면설계서를 많이 넘어가는 추세입니다. 그만큼 피그마의 강력하니까요 그럼 천천히 따라와주세요
피그마 화면 설계서 버전 관리, 기획자라면 고민되는 문제
1. 피그마 화면설계서란?
먼저, 피그마(Figma)가 무엇인지 간단히 짚고 넘어갈게요. 피그마는 웹 기반의 디자인 툴로, 여러 사용자가 동시에 협업할 수 있는 장점이 있어요. 화면설계서는 앱이나 웹사이트의 구조와 기능을 시각적으로 볼수 있어서 무엇이 바로바로 피드백을 할수 있다는 장점이 있죠.
디자이너뿐만 아니라 기획자, 개발자 등 다양한 팀원들이 프로젝트의 전체적인 흐름을 이해하는 데 큰 도움을 줘서 원하는 프로젝트를 잘 만들수 있도록 도와주는 디자인 툴이라고 보시면 됩니다. 피그마 화면설계서는 특히 서비스 기획자에게 중요한 역할을 합니다.
– UI 구성요소
버튼, 텍스트 필드, 이미지 등 사용자가 직관적으로 알수 있도록 합니다
– 네비게이션 흐름
화면 간의 이동 경로나 사용자가 수행할 작업 순서를 시각적으로 표현을 합니다.
– 기능 설명
각 화면에서 제공되는 주요 기능과 이들이 어떻게 상호작용하는지를 설명을 통해 디자이너, 개발자가 프로젝트를 올바르게 잘 갈수 있도록 도와줍니다.
2. 왜 버전 관리가 중요한가?
프로젝트가 진행될수록 변경 사항이 매번 발생하기 마련이에요. 이때, 버전 관리가 제대로 되지 않으면 이전 작업을 복구하기 어렵거나, 혼란이 발생할 수 있어요. 버전 관리는 단순히 작업 내역을 저장하는 것을 넘어서, 프로젝트의 흐름을 체계적으로 유지하고, 실수를 방지하며, 협업의 효율성을 높이는 중요한 작업이에요 버전 관리는 서비스 기획자의 숙명이라고 말할수 있습니다. 버전 관리의 중요성을 자세히 말씀드리면 아래와 같습니다.
- 변경 내역 추적: 프로젝트가 진행되면서 수많은 수정 작업이 발생해요. 이때 어떤 부분이 언제, 왜 변경되었는지 기록해두면 나중에 큰 도움이 돼요. 예를 들어, 클라이언트의 요청으로 특정 기능을 추가했는데, 나중에 그 요청을 철회할 경우 이전 버전으로 돌아가기가 쉬워요. 누가 요청했는지 확실히 알수 있죠
- 실수 방지: 작업 중 실수로 중요한 요소를 덮어쓸 수 있어요. 하지만 버전 관리가 잘 되어 있다면, 이전 버전으로 복원해 실수를 쉽게 바로잡을 수 있어요. 여러 명이 동시에 작업할 때는 실수의 가능성이 높아지는데, 이때 버전 관리가 실수를 최소화하는 데 큰 역할을 해요.
- 협업 효율성: 팀원들이 각자 작업한 내용을 쉽게 공유하고, 어떤 변경이 이루어졌는지 명확하게 파악할 수 있어요. 이를 통해 팀 전체가 같은 방향으로 나아가고 있음을 확인할 수 있죠. 예를 들어, 디자이너가 수정한 내용을 기획자가 바로 확인하고 피드백을 줄 수 있어요. 이 버튼을 눌렀을때 어떤 기능이 되는지 직관적으로 알수 있어요
3. 피그마에서 버전 관리하는 방법
피그마는 다양한 방법으로 버전 관리를 지원하고 있어요. 여기서는 프레임, 페이지, 섹션을 활용한 구체적인 버전 관리 방법을 설명하면 복잡한 프로젝트도 효율적으로 관리할 수 있어요.
– 프레임으로 묶어서 버전 관리하기
프레임을 활용하면, 화면설계서의 특정 부분을 버전별로 관리하기 쉬워요. 예를 들어, 특정 기능이나 섹션을 프레임으로 묶어서 각 버전을 따로 관리할 수 있어요. 프레임을 통해 한 화면 내에서 여러 버전을 쉽게 비교하고, 변경된 부분을 명확히 할 수 있어 같은 화면을 여러 버전으로 나눠야 할 때 유용해요.
- 기능별 프레임 구성: 동일한 기능이나 화면의 다양한 버전을 프레임으로 묶어 관리하세요. 예를 들어, ‘로그인 화면 v1’, ‘로그인 화면 v2’ 이렇게 프레임을 만들어 비교할 수 있어요.
- 변경 내역 시각화: 프레임을 사용하면 각 버전의 변경 내역을 한눈에 파악할 수 있어요. 이전 버전과의 차이점을 명확히 보여줄 수 있죠.
- 실전 예시: 앱의 특정 기능을 작성중에 있다고 해볼게요 동일한 기능의 여러 버전을 프레임으로 나눠 관리하고 있어요. ‘검색창 v1’과 ‘검색창 v2’ 이렇게 두 개의 프레임을 만들고, 각각의 프레임에서 다른 디자인을 적용해보세요. 클라이언트의 피드백에 따라 두 버전 중 하나를 선택하고, 선택된 버전을 최종 디자인으로 확정하세요. 이렇게 하면 클라이언트와의 소통이 더욱 원활해져요.
– 페이지별로 버전 구분하기
피그마에서는 페이지를 이용해 프로젝트를 구조화 할수 있어요 각 페이지에 버전별로 작업을 나누어 관리하면, 전체 흐름을 유지하면서도 세부 작업을 구분할 수 있어요. 페이지별로 버전을 나누어 관리하면, 프로젝트가 커질수록 각 페이지의 역할이 명확해지고, 팀원들이 쉽게 작업 흐름을 파악할 수 있어요.
- 기능 및 성격별 페이지 구성: 기능이나 성격에 따라 페이지를 구분해보세요. 예를 들어, ‘메인화면 v1’, ‘메인화면 v2’와 같이 페이지를 나눠 관리하면, 업데이트된 내용을 손쉽게 확인할 수 있어요.
- 기능 업데이트 관리: 특정 기능이 업데이트될 때마다 새로운 페이지를 추가하고, 이전 페이지는 그대로 보존하세요. 이렇게 하면 이전 버전과 비교하면서 작업을 진행할 수 있어요.
- 실전 예시: 웹사이트의 주요 페이지를 작성중에 있을때 각 기능별로 페이지를 구분하고, 업데이트가 있을 때마다 새로운 페이지를 만들어 관리하고 있어요. ‘홈페이지 v1’, ‘홈페이지 v2’ 이렇게 두 개의 페이지를 만들어 각 버전에 따라 작업을 나눠보세요. 새로운 기능이 추가되면 ‘홈페이지 v3’ 페이지를 만들어 작업을 진행하고, 이전 버전은 그대로 보존하세요. 이렇게 하면 업데이트된 내용을 팀원들과 쉽게 공유할 수 있어요.
– 섹션으로 기능 업데이트 관리하기
섹션은 페이지 내에서 특정 기능이나 요소를 관리하는 데 유용해요. 피그마에서는 섹션을 사용해 작업 공간을 효율적으로 나눌 수 있어요. 섹션을 통해 페이지 내에서 작은 업데이트나 기능 변경을 효율적으로 관리할수 있고. 매번 반복되는 수정 작업이 많은 프로젝트에서 유용해요.
- 기능 업데이트 관리: 새로운 기능이 추가되거나 변경될 때마다 해당 기능에 대한 섹션을 만들어 관리하고 예를 들어, ‘메뉴 v1’, ‘메뉴 v2’ 이렇게 섹션을 나눠 기능별로 관리할 수 있어요.
- 이전 버전 블라인드 처리: 새로운 섹션을 추가할 때, 이전 섹션은 블라인드 처리해 혼란을 줄일 수 있어요. 이렇게 하면 현재 작업 중인 버전만 집중해서 볼 수 있어요.
- 실전 예시 : 앱의 세부 기능을 기획하고 있을때 기능별로 섹션을 구분해 업데이트를 관리하고, 이전 섹션은 블라인드 처리해 혼란을 줄이고 있어요. 제가 주로 사용하는 방법이긴 합니다. 새로운 섹션을 추가할 때, 이전 섹션은 블라인드 처리해 현재 작업 중인 버전만 볼 수 있게 하면 작업의 집중도를 높일 수 있어요. ‘메뉴 v1’과 ‘메뉴 v2’ 이렇게 두 개의 섹션을 만들어 각각의 섹션에서 다른 디자인을 적용해보는것도 좋다고 생각합니다.
4. 피그마에서 효율적인 버전 관리 및 주의사항
- 버전 이름 정확히 작성하기: 버전 이름을 간단하게 짓지 말고, 어떤 수정이 이루어졌는지 알 수 있게 작성하는게 진짜 중요해요. 예를 들어, ‘v2’ 대신 ‘v2_네비게이션 수정’처럼 구체적으로 작성하는 것이 좋아요.
- 팀원들과의 소통: 팀원들과 작업 내용을 공유하고, 누가 어떤 작업을 했는지 확인하는 것이 중요해요. 이를 통해 버전 충돌을 방지할 수 있어요.
- 주기적인 백업: 중요한 버전은 백업해두는 것도 좋은 방법이에요. 피그마는 클라우드 기반이라 인터넷이 끊기면 접근이 어려울 수 있거든요.
5. 피그마 화면설계서에 대한 나의 생각
저같은 경우는 PPT와 피그마를 동시에 같이 사용합니다. 피그마로는 주로 그림 그리는 용으로 사용하고 공유 및 작성은 PPT를 주로 사용합니다. 피그마로 문서 관리한다는게 생각보다 툴에 익숙하지 않는 사람들에게는 관리하는게 번거로운데요. 회사에서 피그마를 주로 사용하는 곳이라면 디자이너, 개발자도 보는데 익숙하실거예요 그런데 그러지 못한 회사들이 상당히 많아서 피그마로 화면설계서를 보여주면 이게 불편할수도 있습니다. 그래서 제가 하고 싶은 말은 무조건 피그마가 좋은게 아니라 내가 속한 회사에서 어떤 유형의 사람들이 있는지 나이가 많으신분인지 새로운걸 사용하는걸 좋아하는 모험심 강한 사람인지 확인해보시는게 중요하다고 생각합니다. 나만 화면설계서 작성하고 끝이 아니라 실제로 디자인하고 개발하고 하는 분들도 이해를 하셔야 프로젝트를 완성할수 있으니까요
