Project.다원 LikeKeyboard_개발내용


옛~~~날 학부시절 자료들을 찾아보니 만들어놓은 자료들이 꽤나 많아서 이것저것 찾아보다가!!!

원격 키보드 틀을 잡아 놓은 적이 있었더라구요.

분명 학부시절 (아마 방학때 였던듯)에도 만들려고 했는데 졸업작품이다 시험이다 여러모로 밀려서..ㅠㅠ

 

그러고보니 이름도 생각을 해놨었더라구요.(학부시절에 나는 시험말고 이런짓만 하고 있었던 것인가...)

 

아마 이름은 지금 보니 그냥저냥 나쁘지 않은 듯 하여 그대로 가볼까 합니다.

Project.다원 원격키보드 : LikeKeyboard (라키)

아마 이렇게 지은 이름은 키보드 같이! 라는 식으로 지은 것 같습니다 ㅋㅋ (맞는지는 그시절 나에게 물어야..)

 

이제야 생각나지만, 아마 이게 Project.다원의 가장 첫번째로 혼자 만든 기획-분석-설계-개발 시스템이었을겁니다. (미완성으로 끝났지만)

만든지도 오래됬고, 그때 이후로 컴퓨터 폴더 구석탱이에만 남아있었으니 (아마 학부시절 폴더들 쫙 까보면 별별거(혼자서 만든 기획, 분석, 설계, 개발 등등) 다 나올겁니다 ㅋㅋㅋㅋㅋ) 간만에 학부시절 아이템(?)들이나 구경해보자 한게 어쩌면 득이되었네요. 오늘도 이렇게 몇년전의 자신을 떠올리며 용기얻고갑니다 ㅋㅋㅋㅋㅋㅋ

 

말이 좀 옆으로 샜지만, 오늘은 많은 걸 다룰건 아니고,

예전버전 기획서를 조~끔 리메이크해서 다시 작성해봤습니다. ㅋ_ㅋ

리메이크 전과 후를 비교해가면서 보시죠. (정말 별 작업은 안했습니다. ㅋㅋ;;)


예전버전의 Project.다원 원격키보드 - LikeKeyboard

예전버전 LikeKeyboard

 

아마 이게 학부시절에 스타트 끊었던 Project.다원이었을겁니다.

학부시절이니까 지금으로부터.. 음... 4년전? 5년전? 쯤? 될겁니다. (상황에 따라 6년 전?)

그때부터 생각해뒀던건데.. 아마 위에서도 언급했다시피 편입하고 모든 과목을 전공으로 꽉 채워서 들어야만했고, 공부도 공부지만 2년 내에 졸업작품을 마무리해야한다는 사명감? 같은게 있어서 정신없어서 틈틈히 만든다는게 그때문에 아마 못했을겁니다.

이 기획서를 조금 잘 만져서 활용하자 싶어서 다시금 만질만질(???)해놨습니다.

 

웃긴건 누가 내 자신 아니랄까봐 그때도 나눔스퀘어Bold체를 사용했다는게... (소름)

 


새로운 버전의 기획서에 들어갈 LikeKeyboard

새로운 LikeKeyboard

바뀐건 별거 없습니다.

'다' 라고 적혀있던 로고는 한글로 '다원'으로 변경이 되었고,

'Project Dawon'에서 'Project.다원'으로 변경되었습니다.

사실 '다원' 부분에 기존에 적혀있던 '다'라는 글자는 다원의 첫글자만 따서 넣어둔거였는데.. 너무 촌스러워서 (...)

Project Dawon의 경우에도 순 우리말로 했으니 그 의미와 본질을 생각해서 'Dawon'이 아닌 '다원'이 맞다고 생각해 변경했습니다.

그리고 중요한 #2

이건 Project.다원의 2번째 개발 시스템이라는 거죠.

원래는 #1인 이유가 학부시절 처음으로 개인 프로젝트를 만들었던거라.. (비공식, Private)

지금은 공식으로 게시글도 올리고, 이제는 #1으로는 ERP Ensemble이 있으니 #2로 변경하였습니다.

 


LikeKeyboard - 개발 내용 v1

LikeKeyboard - 개발 내용 v1

흠.. 보면 아시겠지만 그때도 단색과, 미니멀리즘? 비스무래한 저만의 디자인을 고집했었습니다.

지금도 생각나지만 도대체 저런 PPT양식은 어디서 구해오니? 라고 교수님께 들었을때 제가 직접 만듭니다 라며 패기있게 말을 했었던 생각이 나네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

(믿거나말거나 교수님도 굉장히 맘에 들어하셨습니다.)

특히 저는 글자크기를 최대한 키우는걸 좋아하는데, 이유는 의외로 프레젠테이션을 띄워놓으면 안보인다고 하시는 분들이 많아요. 그래서 글자를 최대한 키울 수 있도록 노력합니다.

옛날 이 디자인 그대로 갈까 하다가, 아무래도 정성도 있고하니까 바꾸자해서 바꿨습니다.

(예전의 나의 느낌과는 다른 느낌으로!)

 

** Computer과 Android 픽토그램은 오픈된 이미지 소스를 이용했었습니다. 다만, 해당 소소의 출처가 명확하게 파악이 되질않아 사각도형에 img label로 대처를 하였고, 아래 개발내용v2에서는 변경을 하였습니다.

 


LikeKeyboard - 개발 내용 v2

LikeKeyboard - 개발 내용 v2

 

음.. 그냥 바꿨습니다 많이는 안바꾸고 뭐랄까 템플릿만 쪼오끔 바뀐정도?

 

자, 여기서 개발내용을 잠깐 설명하겠습니다.(갑자기?)

개발 내용을 자세히 보시면 Android폰이 서버 역할을, Computer이 클라이언트 역할을 하도록 잡혀있는데, 이는 오류가 아닌 제대로된 내용이 맞습니다.

왜 이렇게 했느냐? 학부시절의 저는 Android폰으로도 충분히 서버 역할이 가능하다 생각했었고,(지금의 폰성능을 보면 그이상도 가능하지않을까 싶네요) 그렇기에 실험적인 요소로 Android폰을 서버로 돌리려고 했었습니다.

뭐.. 그렇게 중요한건 아니지만, 아마 이 부분은 추후 Android폰에서 제어할 클라이언트들을 관리하려고 하지 않았을까 싶습니다.

그래서 실험적요소도 재밌고 뭔가 또 즐거운게 생길 것 같아서(??? 두근두근 ???????)

그대로 가기로 했습니다. (씬남!!)

 

** v1에서는 학부시절에 찾았던 오픈된 이미지를 사용했었으나, 해당 출처가 명확하지 않아 제거를 하고 변경했습니다. 


마지막으로 그시절 Project.다원의 로고

Project.다원

이건 기획서와는 조금 관련이 없을지도 모르겠지만,

저 학부시절 Project.다원의 로고였습니다 ㅋㅋㅋㅋㅋㅋㅋㅋ

지금도 어디선가 사용했었고, 나쁘지 않아서 그대로 긁어왔네요 ㅋㅋㅋㅋ

저 디자인이 그때거였구나 ㅋㅋㅋ 재밌네요 ㅋㅋㅋㅋㅋㅋㅋ

 

아마 특별히 문제되지 않는 이상은 이대로 진행될 것 같습니다.

 


아무래도 학부시절 저의 폴더들은 노다지인 것 같습니다.

언제 한번 기회봐서 제가 작업한 졸업작품이나 과제하면서 만들었던 설계서 같은 것도 보여드리면 좋겠는데, 다음기회를 노려보도록 하죠. (언젠가는..)

 

 

버전정보 (v1.0)

 - v1.0 2020.07.13 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 

 


Project.다원 Ensemble_분석(5)

장비관리-요구사항분석(Event List)


Wireframe까지 완료가 되었을때는 이미 어느정도의 요구사항은 정립이 되어 있을겁니다.

사실 이전에 고객은 '제안요청서'를 통해 요구사항을 어느정도 명시를 해두었을겁니다.

미리 제작은 되어있었어야하나.. 고객도 저이고 개발자도 저이다보니.. 빼묵었네요 ㅠ.. (일해라!! 나 자신!)

저의 경우 Wireframe을 만들면서 바로 화면설계서까지 만들어버려서 요구사항을 정리할 틈이 없었는데,

Event List를 정리하면서 요구사항까지 같이 정리하자 해서 정리했습니다. (사실 Event List 정리 안하고 있었으면 요구사항분석서도 만들지는 않았을 것 같..)

오늘 할 작업은 설계된 화면설계서를 토대로 작성이 된 요구사항 분석서(Functional Requirement) 겸 Event List입니다.

 

이정도 나오면 이제 Class Diagram정도만 나오면 개발이 시작되어도 될 것 같네요. (사실 없어도 뭐.. 개발은 가능하지만...)

다만, Sequence Diagrame도 있으면 좋겠지만.. 이건 기능별로 나중에 시간날때 정리해둬야겠네요. (Sequence Diagram 작성하다보면 또 다음주가 되어버려서....)


요구사항분석 (1/2)

장비관리 - 요구사항분석 1

주황색으로 처리된 항목은 지금은 개발이 불가능한 부분을 나타냅니다.

프로젝트나 구입정보 연동 부분은 다른 화면이 개발이 되어야 연동작업을 할 수 있기 때문에 얼른 다른 화면도 설계-개발을 해야겠네요 ㅎㅎ

여기서는 뭐 그렇게 특별한 건 없고, 그저 화면에서 일어나는 Event들에 대한 내용을 담고 있다고 보시면 됩니다.

 

요구사항분석 (2/2)

장비관리 - 요구사항분석 2

위처럼 사용자 및 관리자 연동 부분은 아직 유저관리 화면이 나오지않아 연동을 할 수 없는 부분입니다.

일단 해당 기능은 막아놓고 개발작업을 진행할 예정입니다. (혹은 텍스트로 받아 저장하던가..)

어차피 ID를 입력하거나 사람이름을 입력하거나.. 그저 Column의 Type만 변경해주면 되니까 문제될 건 없겠지요.

 

여기서 특별한 부분이라면 하단의 초록색 항목들입니다.

초록색항목은 추후 추가될 예정 내역을 정리해보았습니다.

뭐.. 제가 고객이고, 개발자이기 때문에 가능한 부분이지만, 제가 원하는 기능을 더 추가해본겁니다 ㅋㅋㅋ

등록할 장비의 이미지를 어느정도 수정(가공)을 해서 등록을 하고 싶다는 생각이 있었기 때문에 넣었습니다.

(약 0.1퍼센트 정도의 조금의 책임감과 99퍼센트 정도의 귀차니즘으로 이미지 수정 기능을 만드는 이 클라스..)

 

 

*** 현재 요구사항 분석에는 QRCode는 제외되어 있습니다.

(이 부분은 개발을 진행하며 테스트를 해봐야할 것 같습니다.)

해당 부분은 아무래도 몇가지 테스트가 필요해서 제외해두었습니다.

나중에 테스트가 완료되고 내부망에서도 큰 문제 없이 사용할 수 있다는 조건만 통과된다면

다시 한번 정리하도록하겠습니다!

 


아직도 해야할게 산더미 같군요...ㅋㅋ...

일단은 다음 게시글은 Class Diagram을 작성할 생각입니다.

그리고 Class Diagram 그리면 바로 개발 진행해볼까 생각중입니다.

 

혹시라도 개발 정보가 궁금하시다면 일전에 작성한 게시글을 확인해주세요. (아래 링크 참조)

 - Project.다원ERP_개발정보(개발언어, 장비, 예정내역) : https://karzin.tistory.com/130?category=793727

 

Project.다원ERP_개발 정보(개발언어, 장비, 예정내역)

다원ERP_개발 정보 (개발언어, 장비, 예정내역) Project Infomation Project Name : 다원ERP 기획 : Karzin 분석 : Karzin 설계 : Karzin 개발 : Karzin 디자인 : Karzin 유지보수 : Karzin 개발 정보 Develop Lan..

karzin.tistory.com

 

 

버전정보 (v1.0)

 - v1.0 2020.07.12 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_설계(8)

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


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

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

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

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


 

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

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

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

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

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

 

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


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

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

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

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

 

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

 

질문 (설계자 - Karzin)

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

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

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

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

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

3.기타 궁금한 사항?

 

답변 (업무 담당자 - Karzin)

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

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

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

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

 

인터뷰 마무리

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

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

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


 

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

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

QRCode 예시 (출처 : 네이버 QR코드 - https://qr.naver.com/)

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

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

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

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

 

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

감사합니다.

 

버전정보 (v1.0)

 - v1.0 2020.07.11 배포

 

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

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

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

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

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

 

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


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

Wireframe&화면설계서(2)


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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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


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

화면설계서 - 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 (장비관리 - 장비등록)

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

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

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

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


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

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

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

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

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

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

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

 

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

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

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

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


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

화면설계서 - 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



 


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


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

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

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

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

 

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

장비 관리 ER-Diagram

장비 관리 ER-Diagram 작성자 Karzin

 

공통코드, 사원정보, 프로젝트 정보 테이블의 경우 아직 설계중인 단계이다보니 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






설계 (2)



공부해야할건 많고 시간은 부족하다보니 정리할 시간 쪼개기도 힘드네요 ㅠㅠ


오늘은 저번시간에 분석한 사원의 ER-Diagram을 그려왔습니다.


[사원의 ER-Diagram, 출처 : karzin]


사실 몇몇은 ER-다이어그램으로 정리하면서 수정을 했습니다.


아무래도 정리하면서 다시 생각하게 되는 부분이 몇몇 있다보니 수정을 했는데,

앞으로도 계속해서 수정이 될 것 같습니다.


다만, 최대한 틀을 깨지 않는 선에서 수정을 해나갈예정입니다.


특히 사원-게시판에 관련된 부분은 현재 다이어그램에서 빠져 있습니다.


이 부분은 까먹어서 뺀게 아니라, 일부러 뺐습니다.


아직까지는 게시판에 대한 정리가 많이 부족해 게시판에 대한 분석 / 설계를 먼저 한 후에 사원 테이블과 붙여보려고 합니다.


이 부분에 대해서는 계속해서 분석 / 설계를 하면서 추가 수정해나갈 예정입니다.



현재는 사원에 대한 내용들만을 종합해둔 상태입니다.


다음 시간부터는 게시판에 대해 분석을 해볼 예정입니다.


감사합니다.


버전정보

 - v1.0 2018.10.02 배포

 - v1.1 2020.06.12 다원ERP -> Project.다원ERP로 변경



다원 원격 마우스

분석/설계 (1)



다원 원격 마우스 분석 / 설계 (1).


이번 분석 / 설계에는 가장 기본적인 내용인 


개발 동기, 개발 내용, 개발 목표에 대해 작성이 되었습니다.



개발 동기


스마트폰은 계속해서 진화를 해가고 있습니다.


덕분에 우리들은 새로운 모델에 익숙해지는데에 많은 시간을 쏟기도 하고 있습니다.


사실 급격히 진화해가는 모습은 굉장히 좋지만, 여기서 안타까운 점이 몇몇 생기곤 합니다.


그 중 저는 사용 후 남아버린 스마트폰에 대한 안타까움을 해결하고 싶었습니다.


분명 비싸게 준 스마트폰일텐데 유용한 재활용 방법은 없을까 해서 고민하게 되었습니다.


그리고 문뜩 집에서 남아 굴러다니는 스마트폰을 컴퓨터의 마우스로 활용하는 방법은 어떨까란 생각이 들어 프로젝트를 진행하게 되었습니다.



개발 내용


앞서 보셨던 컨셉의 내용처럼 스마트폰(어플)과 컴퓨터를 연결하여 스마트폰에서 컴퓨터의 마우스를 원격으로 조작하는 방식입니다.


전제 조건으로는 공유기를 사용하여 스마트폰과 컴퓨터가 연결이 된다는 점이며,


기본적으로 통신은 wifi 소켓통신을 이용할 예정입니다.



본 어플은 다음의 세가지 기능을 지원할 예정입니다.


 1. 노트북의 마우스패드 형식 (트랙패드)

   - 가장 널리 사용하는 해당 방법은 최대한 노트북의 마우스 패드와 비슷한 형식을 취할 예정입니다.

 2. 조이스틱 형식

   - 조이스틱 형식을 이용하여 몇몇 게임에 있어서는 스마트폰을 이용한 원격 게이밍이 가능하도록 할 예정입니다.

 3. 자이로 센서를 활용한 형식 

   - 닌텐도 Wii와 비슷하게 스마트폰을 흔들거나 이동시키면 이동하는 형식입니다. 




개발 목표


저의 기본적인 개발 목표는 언제나 코딩능력의 향상과 코딩시 틀에 갖힌 사고보다는 창의력을 앞서 새로운 코드를 짜는 것을 목표로 하고있습니다.


쉽게 말해 공부가 프로젝트를 진행함에 있어 저의 가장 큰 목표입니다.


그래도 그 중 해당 어플 개발에 있어서는 높은 정확성과, 끊김없는 통신을 목표로 두고 개발해 나갈 예정입니다.


물론, 쉽다고 할 수 없는 개발 내용들이지만, 조금씩이라도 개발을 해 나가며 최대한의 완성도를 낼 수 있도록 노력할 예정입니다.



다음시간엔 분석/설계(2)에서 뵙겠습니다.


감사합니다.

+ Recent posts