Karzin Lab

Project.다원 Ensemble_설계(4)_장비관리 Wireframe(0) (SiteMap 추가!)

오늘은 약속대로 ER-Diagram의 다음 작업인 Wireframe입니다!

음.. 11시에 시작은 했는데 (집 도착해서 밥먹고 씻고 준비하면 대략 이런시간..ㅋ) 아마 12시는 넘어서(내일) 업로드 될 것 같네요.ㅠㅠ 아쉽..

Mobile에 대한 Wireframe은 많이들 하지만 WebSite는 하는걸 본적이 없다! 하시는 분들 있을 수 있어요.

그 이유 중 하나는 WebSite가 아무래도 조금은 개발하기가 쉽고, 변경이 빠르기 때문은 아닐까 싶습니다. (뭐.. 이건 생각에 따라 다를지도 모르겠네요.) 추가로 아마 포화상태인 시장도 있다고 생각은 합니다.

느낌은 Mobile은 한번 fix되면 그 이후는 변경이 어렵다고 생각을 한다면, WebSite의 경우 조금 고객과 소통을하며 변경이 많이 일어난다는 느낌입니다.

뭐.. 이건 각자 경험에 따라 다르겠지만, 보통 Mobile의 경우 한번 fix된 Wireframe을 토대로 UI를 그리고 개발을 시작하는 느낌입니다. (음.. 글쎄요.. 이 부분은 느끼는 분들에 따라 다르지 않을까 싶습니다만..)

뭐 추가로 말한것처럼 포화상태인 시장도 한 몫을 하긴 하죠. 워낙 WebSite를 템플릿을 미리 구축한 회사들이 빠르게 개발을 진행해주는 만큼 사용자는 Wireframe보다는 대화를 하며 fix를 시키는 방향으로 나아가는건 아닌가 싶습니다.

다만 이는 조금은 기획쪽에 카테고리가 더 들어간다는 생각은 합니다.

이유는 사용자가 원하는 유저 인터페이스(UI)의 기능을 기획자는 어떻게 담을것이고, 어떻게 자신의 내공을 축적시키는지에 따라 Wireframe만으로도 충분한 프로토를 전달할 수 있다는 점에서입니다.

여기서 어? 당신! 개발자 아냐? 왜 기획을 해! 라는 말씀 나올수도 있는데, 기획도 개발의 일부라 생각합니다. (저만의 생각일지도 모르겠지만..)

그래서 저는 기획을 위한 기획 관련 서적도 읽어보고, 설계를 위한 소프트웨어 공학, 그리고 좀 더 다방면으로 바라보기 위한 안목을 기르려 노력하고 있습니다. 어플 한가지를 보고 사용할때에도 여러면에서 이 디자인은 이런면에서 좀 아쉽고, 유저 인터페이스(UI)부분에서 이런 부분이 아쉬우며, 이런건 이렇게 바뀌었으면 좋겠다라는 재밌는 생각들을 하곤 합니다.

또 별 이상한 소리를 내기 시작했으니, 다시 한번 오늘의 주제대로 장비관리 Wireframe의 설계를 시작하겠습니다.

우선 Wireframe을 보기 전에 장비관리의 SiteMap을 한번 보도록 합시다.

한 화면에 다 담으려하다보니 아무래도 너무 복잡해질 것 같다는 생각에 결국에는 SiteMap을 설계하게 되었습니다.

SiteMap 설계하는 김에 그냥 URL도 같이 설계했습니다.

SiteMap 

위에 SiteMap을 보면 장비 등록과 목록을 나눴습니다. 나누게 된 이유를 우선 말씀드리자면, 한가지 경우를 상정했습니다. 바로 Mobile이죠. 저는 Ensemble의 모든 개발은 PC뿐이 아닌 Mobile도 대응이 되도록 설계를 하고 개발을 하려합니다. 때문에 Mobile에서 편리하게 바로 장비등록만 할 수 있도록 생각을 했습니다.

(뭐,.. 추후에 장비관리 application을 만들면 되지만, application이 지원되지 않는 예전 폰 혹은 태블릿이라던가에서는 웹사이트 접속을 통해 모바일의 지원을 할 예정입니다.)

특이사항으로 상태변경이 점선인 이유는 바로 Modal이기 때문입니다.

기본 장비 상세정보에서는 Log등의 정보도 보여줄 예정이지만, 상태변경시에는 Modal로 숨겨져 있던 창을 열어 컨트롤을 할 수 있도록 할 예정입니다.

(참고로 이 모든 기능은 계속해서 언급했다시피 application에서도 지원을 할 예정입니다.)

자, 이번엔 기다리시던 Wireframe의 시간입니다!

Wireframe - 메뉴구성

에구.. 메뉴구성 하나에 너무 몰두해버렸네요.

11시에 자리에 앉아 설계만 잡는다는게 게시글에 말 주저리쓰고 SiteMap 설계하고 Wireframe-메뉴구성 딸랑하나..

아무래도 시간이 시간인 만큼(현재 시각 오전 1시 44분)

2편을 준비해야겠습니다.

(내일 회사갈 준비도 있고, 개인적인 공부시간도 또 필요하다보니.. 잠은 보통 3시~4시 잡니다 ㅋㅋㅋㅋ 기상은 8시.ㅋ)

아무래도 저의 나쁜부분이네요 한개 설계할때 집중해서 파고드는게 ㅋㅋㅋ

얼른얼른 쳐내고 다음 부분으로 넘어가야하는데 마음에 들때까지 가지고 있다보니..ㅋㅋㅋㅋㅋ

다음 Wireframe_2에서는 오늘 못한 장비 등록, 장비 목록, 장비 상세, 상태 변경을 다뤄보겠습니다.

그리고 그 다음 컨텐츠는 아마 화면설계서가 될 것 같아요.

화면설계서는 아무래도 Wireframe과는 조금 다르다보니 어떤부분이 다른지를 나타낼 수 있을 것 같습니다.

(사실 자세한 설명이 들어가는거 빼고는 별 다른게 없어 보이는 게...)

버전정보 (v1.2)

 - v1.0 2020.07.07 배포

 - v1.1 2020.07.07 내용 수정 (오타)

 - v1.2 2020.07.08 제목 수정 (Wireframe(1) -> Wireframe(0))

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com