Karzin Lab

Project.다원 Ensemble_설계(6)_장비관리-장비목록

Wireframe&화면설계서(2)

오늘은 낮에 커피를 한잔만 마셨더니 엄청 피곤하네요;;

아무래도 카페인이 부족한 모양입니다.ㅎ;;

그래서 빠르게! 오늘 할 수 있는 부분만 정리하고 일찍 잠 좀(...) 자려고 합니다! (그러는 지금 시간은 0시 4분...)

아마 오늘 한 부분은 졸면서, 또 일단 주먹구구식으로 한 부분도 있어서 추후 변경될 부분이 많이 있을 것 같습니다.

무엇보다 이것저것 요구사항이 늘어지다보니 타협이 잘 안되더라구요. (자신이 자신한테 많은 요구사항을 던지다니..)

그래도 개발을 진행하기 위해서는 미뤄지면 안된다는 생각에 후딱 정리해보았습니다.

Wireframe (장비관리-장비목록)

이 프로젝트에서의 저의 역할은 아무래도 기획자인 동시에 설계자이고 개발자이기 때문에 요구사항을 제가 직접 밀어(?) 넣을 수 있습니다. 그렇다보니, 장비 목록을 오픈마켓들과 같은 느낌으로 이미지와 정보를 한 눈에 볼 수 있는 화면을 요구사항으로 생각하게 되었습니다. 그래서 설계시에도 많은 고려를 했구요.

지금 Wireframe만 보고는 조금 판단이 어려울 수 있으나, 아래 화면설계서를 보시면 어딘가 살짝 오픈마켓과 같은 느낌을 받을 수 있을 것 같습니다.

화면설계서 - PC (장비관리-장비목록)

이제 설명 3번을 눈으로 보고 있다보면 오픈마켓의 화면과 비슷한 느낌을 받으실 수 있습니다.

이로써 장비를 관리하는 관리자 입장에서는 어떤 장비인지 이미지를 통해 확실하게 확인을 할 수 있지 않을까 싶습니다.

또 각 상태별로 이미지를 신호등 색으로 보여줌으로써 어떠한 상태인지도 확인이 가능하게 하도록 생각중입니다.

추가적인 부분이지만, 아마 detail한 규격이나 사용용도도 Tooltip 형식등을 통하여 확인을 할 수 있도록 하려고 생각중입니다.

다만, 현재 화면설계서와 앞으로 나올 디자인된 UI와의 갭이 생길 수 있어 이 부분은 추후 다시한번 고려해볼 생각입니다.

화면설계서 - Mobile (장비관리-장비목록)

마지막으로 모바일버전의 장비목록입니다.

여기서는 상태가 안보이는 모습으로 보이는데, 모바일로 볼 수 있는 정보는 PC보다는 적게 만들어볼까 합니다.

(PC보다는 적은양의 정보 - 대신 중요한 정보는 더 부각되어 볼 수 있도록)

어차피 목록은 목록일뿐 더 detail한 정보가 보고 싶다면 큰 화면으로 볼 수 있는 PC나 상세정보페이지에서 봐야하는게 맞다고 생각하고 있습니다.

어쩌면 PC와 Mobile에 차이를 두고 정보의 양을 제한한다는 점은 조금 위험한 생각일 수 있으나, 보이는 화면의 크기가 다르고, 물리적인 제약이 따를 수 밖에 없는 만큼 고려하고 있는 부분입니다.

(추후 Mobile용 Application을 만든다면 Mobile로 Web에 접속하는 빈도는 낮아지지 않을까 싶기도 하구요.)

마무리를 달려왔지만 벌써 시간은 0시 30분이네요. ㅋㅋ;;

요즘 자전거를 못타서 그런가 오히려 더 피곤한 느낌이.. (오히려 운동을 안하는데 더 피곤한???)

음.. 아무래도 오늘은 여기까지만 작성하고 마무리로 공부 쪼~금 하다가 바로 잠들어야겠습니다.

오늘도 고생 많으셨고 부족한 글 읽어주셔서 감사합니다.

버전정보 (v1.1)

 - v1.0 2020.07.09 배포

 - v1.1 2020.07.09 누락된 제목 수정, 문장 수정

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_설계(5)_장비관리-장비등록

Wireframe&화면설계서(1)

역시 저는 설계하다보면 괜한거 하나하나까지 꼼꼼히 따져가면서 하게되네요;;; 역시 귀찮은 성격,,,(?!?!?)

아니나다를까 설계를 하다보니 또 늦어졌습니다. ㅋㅋㅋ..

오늘은 앞에 게시글 쓰고 바로 설계 진행했는데.. 벌써 1시 22분..

아무래도 저도 직장인이고, 제가 해야할 공부도 산더미같다보니 블로그 관리는 새벽 2시 이전까지만 하기로 했습니다!

(근데 벌써 1시 23분이 지나가고 있...)

그래서 지금까지 한 부분이 마침 장비등록부분이라서 진행된 부분까지만을 업로드 하겠습니다.

Wireframe (장비관리 - 장비등록)

Wireframe은 보통 화면설계서보다 이런식의 화면구조다 라는걸 잡아주는거라고 저는 생각하고 있습니다.

개인적으로는 이게 있으면 어느정도 고객(혹은 설계자)의 생각을 파악할 수 있어 개발자 입장에서는 굉장히 편하게 설계-개발이 진행된다고 생각하고 있습니다.

뭐.. 보통은 보기가 어렵다는게... (ㅠㅠ)

이유는 아래 화면설계서를 보면서 말씀드리겠습니다.

화면설계서 - PC (장비관리 - 장비등록)

자, 우선! 화면설계서를 유심히 보시면 Wireframe과 큰 차이가 없다는것을 확인할 수 있습니다.

큰 차이가 있다면 실 데이터가 들어갔고, 그만큼 뼈대가 확실히 잡혔다는 느낌을 받으실겁니다.

그리고 저의 경우 화면설계서에 연동될 데이터베이스의 정보를 함께 넣어주는데 이게 있으면 개발하는 입장(내가 되거나, 혹은 같이 일할 상대)에서는 어떤 데이터가 연동되면 좋을지 머릿속에 더 정리가 잘 되는 편이라서 넣고 있습니다.

사실 설명은 큰 의미는 없지만, input과 select와 같은 상자 외에 유저가 사용함에 있어 이건뭘까? 싶은 부분에 설명을 넣어주면 개발자 입장에서도 '이런 ux구나'라고 쉽게 판단이 되어 최대한 자세히 작성은 하려고 노력합니다. 

뭐.. 화면설계서야 이미 설명등이 있다보니 어느걸 설명해드려야할지는 모르겠네요 ㅎㅎ

마지막으로 뜬금없지만 여기서 눈치가 빠르신분들은 양식이 바뀌었다는 걸 느끼실겁니다!

예! 맞습니다. 양식을 바꿨습니다.

좀 더 한눈에 보기 편하게 하려고 PPT의 구조를 바꾸기 위해 설계를 해서(...) 화면설계서 양식을 또 만들어 보았습니다.

(이정도면 설계광일지도... 아님 그냥 변태거나..) (!?!?!?!?!?!?)

화면설계서 - Mobile (장비 관리 - 장비 등록)

단, Wireframe은 이런식의 화면이 이루어질 것이다 라면, 화면설계서는 detail해야합니다.

더 많은 것을 보여주고, 개발함에 있어 부족함이 없이 설계를 해야합니다.

Wireframe이 보여지지 않는 부분이 있다고 하더라도 화면설계서는 그 이상의 모든 부분을 전부 설계해줘야합니다.

그래야 개발이 가능하니까요.

(의외로 개발자는 작은 새장은 보더라도 하늘을 보지 못하는 경우가 많아서.. - 제 개인 경험입니다 ㅎ..)

자, 모바일의 경우 Web에서 접속하면 저런 모양일겁니다.

하지만, 추후 Application으로 개발이 진행되면 또 새로운 화면설계서가 나오겠죠.

그때는 Android나 iOS의 이쁜 플랫디자인이 나올 것 같습니다.

워낙 말이 많은 성격이다보니 이것저것 다 설명을 하고는 싶지만, 제 자신과의 약속은 지켜야죠! (글 쓰다 보니 1시 44분)

다음시간은 지금시간에 끝내지못한 Wireframe과 화면설계서를 계속 진행할 것 같습니다. (아직 3개 더 남았습니다..)

저는 보통 분석/설계는 설계하는 사람이 많이 늦어지면 개발하는 사람도 그만큼 늦어지거나 부담을 많이 갖기 때문에 미루지를 않는데.. ㅠㅠ

회사도 있고, 저도 공부를 하는 입장이고, 또 사람이다보니 잠은 자야겠고.. 여러모로 아쉽긴 하네요 ㅠㅠㅠ

(어찌됬든 분석/설계/개발 다 제가 하지만..ㅋㅋㅋ)

오늘도 고생 많으셨습니다~

버전정보 (v1.1)

 - v1.0 2020.07.08 배포

 - v1.1 2020.07.08 문장 수정

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Persona - 효율적인 UX디자인을 위한 시작

저는 학부시절 소프트웨어 공학을 굉장히 좋아했었습니다.

뭐.. 이전부터 멍때리는 시간이 있으면 무언갈 분석하거나 그려가면서 설계하는게 취미(??)이긴 했는데

그런시간을 많이 주어주는 소프트웨어 공학은 저에게 있어 즐거움 중 하나였지요.

오늘은 분석/설계 단계에서 사용할 수 있는 Persona(퍼소나 혹은 페르소나)에 대해서 적어볼까 합니다.

어쩌면 가장 즐거운 시간이 되겠네요.

Persona?

우선 Persona가 무엇인지에 대한 궁금증이 있을겁니다.

Persona는 쉽게 말해 나의 시스템을 사용해 줄 가상의 사용자라고 생각하시면 될 것 같습니다.

우리는 개발을 하다보면 분석/설계 단계에서 실 사용자가 될 고객들과 인터뷰를 하게됩니다.

이 인터뷰를 토대로 고객이 원하는 정보를 모아 새로운 요구사항 분석서(기술서)를 작성하기도 합니다.

하지만, 실 사용자와 인터뷰가 어렵거나, 인터뷰를 해야할 사용자가 너무 많거나 하는 경우와

실 사용자와 인터뷰를 하기 전 사전 정보 조사로 Persona를 사용하면 효과적입니다.

사전 정보조사를 통해 Persona를 생성을 하면 인터뷰시 조율이 더 편리할 수 있다는 점을 노리는겁니다.

가상의 사용자를 통해 미리 만나본 고객은 이러한 요구를 가지고 있으며, 이런 요구를 어떠한식으로 답을 해줄 수 있는지를 미리 예측을 해보다보면 실제 인터뷰시에도 많은 부분 도움이 된다는 것입니다.

효과적인 Persona

그렇다면 효과적으로 Persona의 구축방법은 무엇일까요?

위에서 말했다시피 Persona는 분석/설계단계에서 고객과의 조율이나, 수 많은 사용자를 상대로 인터뷰를 할 수 없는 경우에 사용한다고 말했습니다.

자, 우리는 위 문장에서 답을 찾을 수 있습니다.

쉽게 생각하면 실 인터뷰를 진행할 고객과 비슷한 Persona를 만드는 것입니다!

또는 수 많은 사용자들 중 많이 사용을 할 사용자분들을 타겟팅하거나, 특정 사용자(시스템을 사용할 신규 유입자나, 사용이 불편하실 수 있는 사용자분들)분들을 만들어 인터뷰하는것입니다.

Persona를 이루는 항목들

그렇다면 Persona가 만들어지기 위한 항목들은 무엇이 있을까요?

예를 들어 실사용자와 인터뷰를 한다고 합시다.

우리는 실사용자와의 인터뷰에서 다음과 같은 항목을 얻을 수 있습니다.

 - 사용자의 프로필 (외형, 이름, 연령대, 성별, 직장, 직급, 성격 등)

 - 사용자가 시스템을 사용할 이유

 - 시스템에 바라는 점 (신규)

 - 기존 시스템과 비교해 현 시스템에 바라는 점 (업그레이드 시)

 - 시스템의 장단점

위는 실사용자와의 인터뷰를 통해 얻을 수 있는 항목들입니다.

그럼 Persona는? 맞습니다. 실사용자처럼 생각을 하고 가상의 사용자를 만드는거기 때문에 위와 동일한 항목들을 가집니다.

다만 우리가 저기서 얻지 못한다면 외형이 있을 수 있으나, 이 외형은 가상의 인물을 토대로 하는 것 이기 때문에 저작권이 없는 사진을 가져다가 작성을 하면 됩니다.

Persona의 예시

우선 인터뷰를 위한 시작입니다.

자, 우리가 여기 사용자를 위한 ERP를 만들었다고 칩시다.

사용자는 이 신규 ERP를 사용하면서 나오는 피드백을 줄것입니다.

(이미지는 저작권 등의 문제로 제가 만든 픽토그램으로 대체하였습니다.)

Persona1

 - 이름 : 전하윤

 - 나이 : 26

 - 성별 : 여성

 - 직급 : 사원

 - 부서 : 인사과

 - 성격 : 꼼꼼하고 매사에 정직하게 임함, 다만 가끔씩 빼먹는게 있음.

 - 사용자는 회사에서 인사담당을 하고 있어 ERP의 인사관리 시스템을 사용해야함

 - 시스템에 바라는점 : 

  -> UI가 깔끔했으면 좋겠고, 사용시 많은 부분 편리했으면 좋겠습니다.

  -> 가끔씩 인사등록시에 필요한 정보를 빼먹는 경우가 있는데 이런 부분들을 조금 정리해서 빼먹지 않게 해주세요.

 - 사용 후 장점 : 

  -> UI가 너무 깔끔해 보는 즐거움이 있었습니다.

  -> 인사 등록 시 꼭 필요한 필드를 다르게 보여줌으로써 저도 편리하지만, 신규 직원이 들어와도 알기 편해서 너무나 좋습니다.

 - 사용 후 단점 :

  -> 여전히 프로세스의 어려움이 있습니다.

Persona2

 - 이름 : 김수현

 - 나이 : 48

 - 성별 : 남성

 - 부서 : 홍보부

 - 직급 : 부장

 - 성격 : 무엇이든 문서를 남겨야 편하다는 생각을 가짐, 항상 직원들을 생각함

 - 사용자는 회사에서 출장을 자주 다니며, 출장정보의 등록등을 위해 ERP 시스템을 사용해야함.

 - 시스템에 바라는 점 : 

  -> 나의 권한이 미치는 직원들의 출장정보를 수시로 볼 수 있으면 좋겠습니다.

  -> 결재된 문서들을 워드형태의 문서로 다운받을 수 있으면 좋을 것 같습니다.

  -> 단순히 이쁜 디자인보다 사용의 편리성을 원합니다.

  -> 요즘 트랜드에 맞춰 핸드폰이나 태블릿에서도 사용할 수 있었으면 좋겠습니다.

 - 사용 후 장점 : 

  -> 결재된 문서를 워드형태의 문서로 다운받을 수 있어 너무나 좋습니다.

 - 사용 후 단점 :

  -> 이쁘지만 편리한지 모르겠습니다.

Persona Worst Case

모든 Persona가 유효한 것만은 아닙니다.

간혹 시스템을 사용하지도 않거나 전혀 상관없을 법한 가상의 인물을 만들어 인터뷰를 하는 경우가 있습니다.

우리는 이런 경우를 피해야만 합니다.

왜일까요? 물어볼 필요도 없이 의미없는 행위이기 때문입니다.

시스템을 사용하지도 않을 사람의 인터뷰를 받아 어떠한 의미가 있을까요?

예시로 다음은 Worst Case에 대한 Persona를 보여드리겠습니다.

Persona3

 - 이름 : 박중헌

 - 나이 : 900살

 - 성별 : 남성

 - 부서 : 국자감

 - 직급 : 간신

 - 성격 : 집착이 강함, 죠스바를 좋아함.

 - 사용자는 도망을 자주 다니며, 요령있게 보기싫은 자들을 피해다님.

 - 시스템에 바라는 점 : 

  -> 내 손으로 시스템을 만들고 키워 이 세상을 내 시스템의 발 아래, 그 시스템을 발 아래, 그리하여 천하를 내 시스템 아래 둘 것이다. (?!?!!!)

  -> 테마 색상은 보라색으로 하거라

 - 사용 후 장점 :

  -> 그게 딱 그 시스템의 가치이다. (대략 만족하셨다고..)

 - 사용 후 단점 : 

  -> 파국이다. (버그가 많다고..)

뭐, 위는 엄청 극단적인 예이긴 하지만, 조금 와닿으면 좋겠다는 생각으로 예시를 들어봤습니다.

학부시절에 배웠고, 그걸 활용하고 있는 지금으로써는 한번쯤 정리하자는 생각을 가지고는 있었으나,

바쁘다는 핑계만 들이대고 많이 늦어져버린건아닌가 싶습니다. (누가 늦었다 생각했을때가 빠른법이라고 말했습...)

후..

그래도 박중헌은 조금 극단적인 예시는 아닌가 싶기는 한데..ㅋㅋㅋ

한번쯤 웃고가세요. 긴 글 읽으면 졸리기도 하고.

버전정보 (v1.1)

 - v1.0 2020.07.07 배포

 - v1.1 2020.07.08 오타 수정

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

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

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

Karzin

abbeea@naver.com