IA와 인덱스
프로젝트 기획을 하면서 개발자가 고민해야 하는 것은 핵심 기능을 사용자에게 전달하기 위해 고민할 것은 아래와 같다고 생각합니다.
- 사용자에게 어떤 정보가 담기 화면을 보여줄 것인가?
- 사용자에게 어떤 정보를 요구할 것인가?
즉, 화면마다 어떤 Get, Post API가 필요한지 파악하는 것이 중요하다고 생각합니다.
이는 백엔드 개발자에게도 중요하다고 생각합니다.
동일한 기능을 수행하는 API라도 화면의 정보에 따라 요청, 응답에 필요한 정보가 달라질 수 있기 때문입니다.
만약 요청에 대한 응답의 일부가 이미 화면에 있는 상황이라면 응답에는 해당 정보들을 제외할 수 있을 것입니다.
이렇게 화면을 잘 파악하여야 API를 효율적으로 설계할 수 있기에 백엔드 개발자에게도 화면 파악은 중요하다고 생각합니다.
그렇기에 이번 글에서는 개발자가 화면의 정보를 잘 파악하기 위해 이번 프로젝트에 도입하였던 방법들을 소개하려 합니다.
IA(정보 구조도)
프로젝트를 진행하며 화면이 많아질수록 화면을 모두 파악하는 것은 점점 힘들어집니다.
그래서 이번 프로젝트에는 화면을 파악하는 데 도움이 될 수 있도록 IA를 도입하였습니다.
IA는 정보 구조도로 웹, 앱 구축 시 필요한 화면과 메뉴의 정보 구조를 설계 및 정의하는 문서입니다.
내가 사용한 IA
저는 전문적으로 기획을 공부한 것은 아니기에 정석적인 IA를 작성한다기보다는 제가 기획가 개발에 편할 수 있도록 조금 변경하여 IA를 작성하였습니다.
그렇기에 플로우차트, 화면목록과 같은 다른 기획 문서들의 특징도 함께 있다고 생각합니다.
현시점(2023.08.05)에 Hiit 프로젝트를 위해 작성 중인 전체적인 IA는 아래 사진과 같습니다.
핵심 기능이 나오자마자 바로 위와 같은 IA를 그릴 수 있었던 것은 아니고 우선 아래처럼 가벼운 스케치를 통해 큰 화면 구성을 잡았습니다.
이후 "A화면에는 B정보가 필요하니 C와 같은 요소가 필요하겠다"와 같은 생각을 하며 IA를 작성하였습니다.
IA 구성 요소 정의
IA를 작성하는 초기 단계에서는 IA 구성 요소를 정의도 함께 하였습니다.
위에 정의한 구성 요소는 이전에 함께한 팀의 IA 구성요소에 제가 이번 IA를 작성하며 필요한 요소를 추가하며 구성하였습니다.
몇몇 프로젝트를 경험하며 협업 시 가장 중요한 것은 프로젝트에 대한 이해도를 함께하는 것이라는 생각을 하게 되었습니다.
그러한 이해도를 함께 하기 위한 도구 중 하나가 위와 같이 공통의 약속을 정하는 것입니다.
위의 IA 구성 요소 정의도의 경우 IA를 사람이 동일하게 파악할 수 있도록 도움을 주기 위해 작성하였습니다.
이전에는 이러한 약속을 정하는 것이 무엇을 정해야 하는지, 어떻게 정해야 하는지 알 수 없어 항상 시도는 하지만 흐지부지 그러한 약속을 지키지 못하였습니다.
그런데도 이번에 이러한 약속을 다시 시도한 이유는 그동안의 경험을 통해 어떤 약속을 해야 하는지 어느 정도 감이 왔기 때문입니다.
( 아마 회사에서 협업 경험을 원하는 것도 이러한 약속을 잘 파악하고 지킬 수 있는 사람인지 확인하기 위해 원하는 게 아닐까요…?)
인덱스와 구글 스프레드 시트
IA를 작성하며 IA에 작성되는 내용 역시 하나의 약속이 필요할 것 같다고 생각하였습니다.
IA를 보시면 각 요소가 서로 영향을 주는 요소들이 있음을 확인할 수 있습니다.
이렇게 서로 영향을 준다면 특정 요소를 수정하면 그 영향이 해당 요소 말고 다른 요소들에도 전파될 수 있다는 것을 의미합니다.
그래서 의미를 가진 인덱스를 도입으로 서로 영향을 줄 수 있는 요소들에 공통된 테그를 부여하여 관리하고 싶었습니다.
그리고 이를 구글 스프레드시트에 작성 후 이를 피그마와 연동하여 모든 요소를 전역변수처럼 관리하는 시스템을 적용하였습니다.
우선 위의 사진처럼 화면의 인덱스를 만들 때 조합할 테그를 고민하여 작성하였습니다.
이렇게 작성한 테그를 조합하여 아래와 사진처럼 각 화면 그리고 요소들에 인덱스를 부여해주었습니다.
이렇게 규칙을 가진 인덱스를 부여한다면 테그의 의미를 바꾸거나 필요한 경우 추가하는 것을 통해 변경 사항을 효과적으로 관리할 수 있을 것이라 생각합니다.
그리고 이렇게 작성한 정보를 피그마의 플러그인인 Google Sheets Sync를 통해 피그마 요소들과 연동하였습니다.
이때 연동을 위해 피그마의 요소를 위의 사진처럼 변경해야 하는 공수가 발생하였습니다.
하지만 "//시트이름//#컬럼명" 규칙을 따른다면 피그마의 어떤 요소에서든 그 정보를 연동하여 사용할 수 있기에 관리 포인트가 하나가 된다는 장점이 변경 공수보다 크다 판단하고 모든 요소를 위와 같이 수정하였습니다.
실제로
이러한 노력을 통해 개인적으로는 화면의 정보를 이전보다 잘 파악 할 수 있었습니다.
하지만 이는 저만의 생각일 수 있으니 다른 분들도 눈으로 직접 확인할 수 있도록 링크를 남깁니다.
마치며
최근 최강야구를 보며 "야구는 후회를 관리하는 게임이다 우리의 삶이 그렇듯이"라는 엔딩 멘트를 보았습니다.
개발도 똑같지 않을까요?
누군가는 저의 글을 보고 "아 이렇게 해볼걸"하며 후회하고
저도 읽어주시는 분들의 댓글과 글을 적기 위한 조사를 통해 "이렇게 할걸"하는 후회를 할 수 있는 Hiit 시리즈가 되었으면 좋겠습니다.
감사합니다.
