프로젝트 구상 ⑤ : IA, 와이어 프레임 작성하기

목차

• 시작하며
• IA란?
• 내가 작성한 IA
• 와이어 프레임이란?
• 내가 작성한 와이어 프레임
• 마치며

 

---

시작하며

저번 포스팅에서 플로우차트(Flowchart)를 작성하면서 힌트를 얻어 IA를 작성했었다. 하지만 다른 사람들이 작성한 것들과 비교하니 뭔가 결이 다른 느낌이 들었다. 그래서 다시한번 곰곰히 생각하면서 정보를 도식화 하기위해 노력하며 작성했다..

 

---

 

IA란?

많은 곳에서 IA(Information Architecture)에 대해 이야기하고 있고, 그들의 대략적인 공통점은 정보를 구조화하여 여러 형식의 문서로 작성하는 것이라는 것이었다.

 

대개 서비스의 페이지 별 메뉴 목록을 기준으로 구조화하는 것이 일반적이다.

 

개인적으로 유저가 서비스를 이용하게 되면 메뉴를 직접 보고 원하는 서비스를 향해 이동하게 되는 것을 생각했을 때 '내가 서비스를 설계하면서 사용하려했던 메뉴 목록을 구조화하여 뎁스(depth)구조의 엑셀로 만들어보면 되겠다'라는 생각이 들었다.

 

---

 

내가 작성한 IA

사실 IA를 작성하다가 전체를 갈아엎었다. 이유는 플로우차트(Flowchart)를 작성하고 어느정도 감을 찾았다 생각하여 플로우차트 자체를 전부 구조화 해버렸기 때문이다.. (아래는 실패본)

 

내가 작성한 IA - 1

저걸 작성하면서 처음에는 '아 그래도 뭔가 틀이 잡혀가는 느낌이다' 라는 생각을 하며 기분 좋게 작성했었다. 하지만 다른 사람들이 만든 IA 예시들을 보면서 뭔가 내 것이랑은 다른 느낌이 들었고 '어차피 IA는 정해진 틀이 있는게 아니니까' 라는 생각을 하기도 했었다.

 

하지만 보면 볼수록 뭔가 이건 아닌듯한 느낌이 들었고 '전체를 갈아엎더라도 찜찜한 느낌은 없애고 가자' 라는 생각으로 'IA 작성법' 이라는 주제로 검색하기 시작했다. 계속 검색하다가 기획자 데이먼님의 블로그와 직접 IA를 작성하시는 유튜브 영상을 참고하면서 큰 도움을 얻었다. 

인포메이션 아키텍처 설계, 어렵지 않아요!

 

내가 작성한 IA - 2

 

위 처럼 메뉴목록을 구조화하는 방식으로 바꾸는김에 공수 + 일정까지 작성해보았다.

 

IA + 일정

 

---

 

와이어 프레임이란?

사실 와이어 프레임 정의는 그렇게 어렵진 않은 것같다. 이름 그대로 웹 사이트를 시각묘사한 것이라고 받아들였다.

 

간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것

 

---

 

내가 작성한 와이어 프레임

나는 저번 포스팅때 사용했던 whimsical 사이트에서 와이어 프레임을 작성했는데 최대한 플로우차트(Flowchart)를 작성하면서 생각했던 느낌을 반영하려고 함과 동시에 그래도 내가 구현할 수 있게는 하려고 노력했다. 디자인은 부트스트랩 프레임워크를 사용하려고 하고있고 기술스택은 바꾸면서 완성시킬 계획이 있기 때문이다.

 

첫 페이지 와이어 프레임

 

위는 첫 페이지를 만든 것인데 원래 회원이 아니라도 글 목록은 노출시켜 방문자에게 흥미를 돋게하는 전략(?)을 보려고 했지만, 뭔가 규모가 커지고 시나리오가 복잡해지는 감도 있어서 나중에 기능 추가건으로 해보면 어떨까 하는 생각에 일단 무조건 로그인을 해야 서비스를 이요할 수 있게 했다.

 

 

로그인 후에 메인페이지에서 사이드바를 통해 메뉴를 볼 수 있게 했다.

 

전체 샷

 

---

 

마치며

드디어 IA를 작성하고 일정까지 만들었다. 일정상 오늘부터 작업을 시작하게 되어있다. 왜냐면 어제 작성을 완료했기 때문이다. 이제부터 진짜 페이지를 만들거나 기능을 만드는 코딩을 할 것이다.. 이제 코딩을 할 수 있다...ㅎㅎ

 

감사합니다!!