Karzin Lab

Project.다원 Ensemble_설계(8)

장비관리-화면 정리 및 시스템 개발 인터뷰

어제 졸린 나머지 화면이 1개 더(상태 변경) 나오면 될 줄 알았습니다만! 어제 제가 Modal로 만들어 놨더라구요!

아마 고민하다가 상태 변경은 Modal로 설계한 듯 합니다.

그래서 오늘은 좀 쉴까 하다가! 왠지 찝찝해서.. 화면쪽은 슬슬 마무리해버릴까 합니다.

이후 작업으로는 class diagram이라던가 아직 남은 diagram의 설계와 정리해야할 것 들을 마무리하면 개발 진행해도 될 것 같습니다!

화면 정리 (Sitemap 및 설계 화면)

이전에 만들어진 Sitemap을 좀 다듬어 주고, 설계된 화면을 Sitemap에 따라 맞춰서 정리해보았습니다.

다만, 화면의 설계가 완전히 다 끝난 건 아닙니다!

이제는 마지막으로 이 시스템을 사용을 할 장비담당자와의 인터뷰(프로토타임 시연)가 남아있습니다.

그래서 이번에는 장비담당자(결국 쓸사람은 저..)와의 인터뷰를 진행했습니다.

장비 관리 - 시스템 개발 인터뷰

Prototype은 직접 만들어서 테스트를 해야하지만, 머릿속에서 자신(?)에게 질문하며 머릿속에 있는 Prototype으로 시연을 진행했습니다. (누가 들으면 이중인격자인줄..)

사실 시스템 개발 인터뷰의 경우 양식은 보통 ppt로 안하는데..(보통은 워드나 한글. 저의 경우 워드를 선호 - 필요한 분 있으시다면 만들어서 언제 한번 본 블로그의 문서 서식-다운로드 게시판에 올려놓겠습니다.) 이미지로 뽑기 편한 ppt를 이용했습니다.

아래는 질문사항과 답변사항입니다.

질문 (설계자 - Karzin)

1.사용하면서 불편했던 점?

 • Prototype을 시연해보고 불편했던 사항은 무엇인가요?

 • 불편한 점은 어떻게 바뀌었으면 좋겠나요?

2.추가적으로 요구하고 싶은 기능?

 • 사용자의 경험 속 이러한 기능이 들어갔으면 좋겠다는 부분이 있었나요?

3.기타 궁금한 사항?

답변 (업무 담당자 - Karzin)

1. 상태 등록 화면에서 Modal이 Grid를 가리면 Grid의 현 상태를 보기 힘들 것 같습니다. 특히 화면이 큰 PC버전에서는 괜찮을 것 같으나, Mobile 버전에서는 Modal이 뜨면 이전 상태를 보기가 힘들 것 같아요. 이 부분은 개발할 때 고려해주세요.

2. 1) 장비 등록 부분에서 Mobile버전은 사진을 직접 찍어 업로드 할 수 있으면 좋겠습니다.

   2) 등록된 장비의 바코드 형식 혹은 QR-code를 출력할 수 있도록 해주세요.

3. 장비관리 코드 (장비 상태, 장비 구분, 장비 분류)는 어디서 입력하는 것인지요?

인터뷰 마무리

 - 결정사항 : 장비관리만의 공통코드를 등록할 수 있는 관리 Tab 생성 필요 (화면 ID : E-003-P/M)

 - 비고 1) 웹 뷰에서 모바일의 카메라/갤러리 제어가 가능한지 확인 필요.

 - 비고 2) QR-CODE의 생성(실험적) 고려

아무래도 시스템 개발 인터뷰를 확인하면 답변자(?)가 많은(??) 요구사항을 추가시켰지만 이제는 필수 요소가 아니라면 개발을 진행하며 고민해도 될 부분들일 것 같습니다.

결국엔 개발자도 사용자도 저이다보니.. 사실 QRCode를 이용한 관리는 굉장히 편리할 것 같아서 꼭 구축해보고 싶기도 해요. 스티커로 바로 출력해서 붙여만 놔도 장비 관리하는데 있어서는 무엇보다 편리할 것 같습니다.

(위의 예시는 테스트해보시면 저의 블로그 메인으로 이동하게 됩니다. ㅋ_ㅋ)

QRCode 생성 API는 찾아보면 몇몇 나오는 것 같습니다. 아무래도 연동도 크게 어렵지 않을 것 같습니다.

다만 테스트를 통해 내부망에서도 문제없이 쓸 수 있는지를 파악한 후 가능성이 있다면 하나의 기능으로 추가를 해야할 것 같습니다.

그나저나 제가 저한테 하는 인터뷰이다보니 빠진부분이 있을 것 같습니다. 역시 설계문서는 제 2,3자가 보고 느낀점을 서술해줘야 비로소 수정이 필요한 부분이 보일텐데 말이죠 ㅠㅠ

다음은 개발을 위해 추가적으로 필요한 설계문서들로 찾아뵙겠습니다.

감사합니다.

버전정보 (v1.0)

 - v1.0 2020.07.11 배포

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_설계(7)_장비관리-장비상세

Wireframe&화면설계서(3)

계속해서 장비관리입니다!

앞으로 화면 1개만 더 나오면 끝나겠네요!

벌써 설계서 PPT가 27장이 되었네요 ㅋㅋㅋ  으아 ㅋㅋㅋ

2시까지 블로그작성하기로했는데 설계하다가 정신차리니 2시 3분(지금시간) (...)

오늘은 좀 내용이 많습니다.

그럼 바로 시작하겠습니다!

Wireframe (장비관리-장비상세_tab1)

잘 기억하시는 분들은 저번 장비등록 화면과 거의 일치하다는 걸 알 수 있습니다.

사실 저장한 기록 그대로를 보여주고 있기 때문에 큰 변동사항은 없다 보시면 될 것 같습니다.

다만 한가지 추가된게 있다면 tab이겠네요.

Wireframe (장비관리-장비상세_tab2)

tab2는 tab1과는 살짝 다릅니다.

바로 grid가 들어간다는건데, 자세한 설명은 아래 화면설계서를 보시면서 진행하도록 하겠습니다.

화면설계서 - PC (장비관리-장비상세_장비정보)

기존 장비등록화면과는 tab외에는 크게 다른 부분은 없습니다.

다만 버튼면에서 잠금해제 버튼이 있는데, 이는 처음 페이지를 보여줄때에는 input box들을 수정할 수 없도록 disable된 상태로 보여줄 예정입니다.

이는 잘못된 저장의 오작동 방지를 위함으로, 잠금해제 -> 데이터 수정 -> 저장하기 버튼을 누름으로 데이터의 수정이 가능합니다.

저장하기 버튼 또한 잠금해제가 된 상태여야지 저장이 가능한 상태로 변경됩니다. (초기 저장하기 버튼도 disable 상태)

화면설계서 - PC (장비관리-장비상세_관리내역)

자! 아까 보셨던 Wireframe - tab2의 화면설계서입니다!

grid는 일전에 데이터베이스를 설계한 것 처럼 상태를 Log형식으로 쌓아둘 수 있도록 설계하였습니다.

다만, 폰에서는 grid를 직접 컨트롤하기에는 무리가 있어보여 modal로 데이터를 추가하는 형식으로 설계했습니다.

이 부분은 아래나올 Mobile버전을 살펴보시면 PC와 동일한 형식으로 되어있다는것을 확인할 수 있습니다.

이는 input box가 작은 grid에서는 Mobile같은 작은화면에서는 적합하지 않다고 생각하여 내린 결론이고, 추후 괜찮은 grid system이 있으면 변경될 수 있습니다.

화면설계서 - Mobile (장비관리-장비상세_장비정보)

아까와 마찬가지로 PC화면과 큰 차이도 없고, 기존 장비등록화면과도 큰 차이는 없습니다.

tab추가 외에는 음...ㅎㅎ

화면설계서 - Mobile (장비관리-장비상세_관리내역)

PC 버전과는 다르게 Modal의 모습이 조금 바뀌어보일 수 있으나, 기능적인 면에서는 동일합니다.

Modal에서 save를 누르면 바로 grid data에서 보이게 됩니다. (DB에도 저장)

사실 Mobile에서 grid를 지원하는 만큼 몇몇 테스트의 진행이 필요할 것 같습니다.

브라우저별 지원 정보라던가, 깨지는건 있는지 등등..

이이야... 게시글을 후딱쓴다고는 썼는데 역시나 늦어졌네요;;;

그만큼 잠자는 시간이 늦어지는건 뭐.. 어쩔수 없네요 ㅠㅠ

항상 설계를 진행하다보면 시간가는걸 잊네요 ㅠㅠㅠ

오늘도 나름 하긴했는데 조금 졸면서 한 것도 같습니다 ㅋㅋ;;

덕분에 추후에 변경사항이 생길지도 모르겠네요 ㅠㅠ

얼른 또 처리할거 처리하고 후딱 자러가야겠습니다.

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

버전정보 (v1.0)

 - v1.0 2020.07.10 배포

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_설계(3)_장비관리 ER-Diagram

어제 장비관리 프로세스를 작성을 하고, 머릿속에 있는동안 얼른 정리해버리자 해서 ER-Diagram을 작성했습니다.

ER-Diagram의 작성은 여느때처럼 PPT를 이용하였습니다.

미리 말씀드리지만, 개발중에 해당 설계문서는 어떤 사유로든 변경이 될 수 있습니다.

이는 개발하면서 문제가 있을법한 로직을 제거하거나, 조금 더 다듬어 나가면서 생길 수 있는 수정으로 확정이 아님을 미리 말씀드립니다.

설명은 다이어그램이 우선 보여져야할 것 같아 그림을 먼저 보시고 설명을 하겠습니다.

장비 관리 ER-Diagram

공통코드, 사원정보, 프로젝트 정보 테이블의 경우 아직 설계중인 단계이다보니 PK수준으로만 잡아두었습니다.

이 부분의 경우 추후 변경될 가능성이 굉장히 높습니다.

우선 왼쪽부터 오른쪽으로 천천히 훑어 나가겠습니다.

상태 정보

상태 정보는 장비의 상태를 계속해서 업데이트 해나가기 위한 테이블입니다.

해당 테이블은 추후 사용 가능성이 있어 일단 테이블의 PK를 장비 정보 테이블의 관리코드 PK로 통일하지 않았습니다.

또한 상태정보도 계속해서 변경이 가능하며, 상태 정보는 공통코드로 등록된 정보를 토대로 불러올 예정입니다.

(수리, 불용, 사용중 등)

일자는 변경된 일자를 나타냅니다.

추가로 상태정보 테이블에서는 담당자(사용자)가 변경되거나 관리자(유지보수)가 변경이 되어도 변경된 이력은 계속해서 남길 예정입니다.

변경 사유등도 상태정보로 남겨서 왜 변경이 되었는지 남기기 위함입니다.

장비 정보

장비 정보는 기본적인 장비의 정보를 나타냅니다.

장비 명, 모델 명, 제조사, 규격, 사용용도 등..

특히 규격과 사용용도는 TEXT타입으로 두어 규격이 바뀌더라도(예를들어 PC의 경우 램이 바뀐다던가의 업그레이드가 있을 수 있으므로) 수정이 가능하도록 하였고, 사용 용도 또한 어떤 용도로 사용할것인지 길게 작성하도록 TEXT타입으로 했습니다.

특이사항 컬럼은 음.. 그냥 특이사항 있으면 적으면 좋겠다 싶은 생각에 넣어보긴했는데, 굳이 사용은 안할거같으면 추후 제거예정입니다.

프로젝트는 현 장비가 프로젝트에 귀속이 되어있는 경우를 생각했습니다.

예를들어 장비를 한 프로젝트를 위해서만 구입을 했고, 프로젝트가 끝나면 불용처리를 해야하는 등의 특수한 경우라던가, 그냥 평범하게 프로젝트에서 쓸거다 싶은경우만으로도 프로젝트를 연결하여 어떤 프로젝트를 위한 장비인가를 나타내기 위함입니다.

파일의 경우 1:다로써 하나의 장비에 사진이 10장이든 20장이든 100장이든(그런경우는 드물겠지만) 등록을 할 수 있도록 하였습니다.

장비 정보에 등록되는 상태 정보는 항상 1:다로써 Log형식으로 쌓여나갈 것입니다.

그리고 구입 정보를 나눠 둔 이유는 다른쪽 문서에서 사용될 가능성이 있어 빼두었습니다. (구매 증빙자료등의 자료를 활용하기 위함)

구분과 분류는 장비의 카테고리를 나타낸다 보시면 될 것 같습니다.

구분은 하드웨어인지, 소프트웨어인지 기타인지를 나타낼 것이며

분류는 장비를 나누기 위한 대 분류라고 보시면 될 것 같습니다. (예로 모니터, 데스크탑, 서버, 워크스테이션 등)

구입정보

위에서 언급했다시피 구입정보는 추후 다른 문서에서 사용될 가능성이 높아 빼두었습니다.

구입년도를 빼 둔 이유는 구입년도로 필터링을 조금 더 빠르게 해볼까 해서 빼두었..(어려운건 아닌데 java나 javascript상에서 년도만 나눠서 보여주기 귀찮았습..(ㅡ,.ㅡ) )

구입일자, 구입처, 가격, 수량 이 모든 컬럼들은 기본적인 구입정보를 나타내며,

특이사항으로 구매증빙자료 = 파일 ID를 나타냅니다.

구매 증빙자료는 PDF, 이미지, HWP, DOC 등등 어떠한 구매 자료를 저장이 가능하도록 대응할 예정입니다.

(추후 실험적 요소로써 웹상에서도 PDF, HWP 등을 바로 열어 볼 수 있도록 할까 합니다. - 물론 괜찮은 opensource가 있다면..)

추가로 결제정보 ID는 나중에 결제된 문서의 ID를 연동할 예정입니다. (현재는 설계 시작도 못해둔 상태)

파일

해당 테이블은 공통적인 요소로 여러 부분에서 사용할 예정입니다.

공통코드등의 테이블은 뒷전인데 왜 파일테이블은 설계가 되었냐고 물어보신다면,

파일은 당장 사용할 예정이고, 공통코드는 text형식으로 입력을 해두고 추후에 컬럼타입을 바꾼다던가 하는 방식을 취해도 되기 때문입니다. (결코 귀찮은게 아니라 다 생각이 있어서 그렇게 한겁니...)

이름, 위치, 크기, 확장자, 등록일자는 크게 설명할 부분은 없을 것 같고,

한가지 특이사항이라면 사용유무입니다.

사용유무는 삭제를 했는지, 아니면 기본 저장상태인지를 나타낼 예정입니다.

유저가 삭제를 한 경우 DB에서는 이력으로 남지만, 스토리지에서는 해당 데이터는 제거됩니다.

이는 세팅에 따라 제거도 하지 않을 수 있기도 하구요. 혹은 15일등 특정 기간을 걸어 삭제 후 15일이 지나면 스토리지에서는 제거가 된다던가의 형식을 취할겁니다.

이렇게 한 이유는 가끔씩 잘못 삭제를 해놓고 "이전 파일이 필요한데.." 싶은 분들이 간혹 있더라구요. 

물리적으로 제거가 된다면 나중가서는 복구하기는 어려우니 말이죠.

이 글 작성한다고 11시가 좀 안되서 시작한거같은데.. 벌써 11시 53분이네요;;

(사실 작성은 한 11시 40분쯤 끝났는데, 작성된 게시글을 한번 더 보고 수정할거 수정하고 배포하려고 시간이 걸렸습니다..ㅎ...)

이제 ER-Diagram이 나왔으니 다음 시간은 Wireframe차례입니다!

그리고 그 다음은 바로 개발이 될지 Class-Diagram을 작성할지 모르겠네요.

버전정보 (v1.0)

 - v1.0 2020.07.05 배포

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com