Karzin Lab

Project.다원 Ensemble_개발(14)_장비등록 - 공통코드 연동작업

오늘은 그나마 집에서 일을 했기에 저녁 밥먹고 샤워좀하고 프로젝트 개발을 시작했습니다. 굳!

(쪄죽지만 일은 해야하므로 땀 흘리며 어찌저찌 마무리 ㅋㅋ..)

내일은 또 내일의 일을 하기 위해 오늘 정해놓은 일은 마무리 되었고!

8시쯤부터 프로젝트를 끄적이기 시작했습니다.

지금 시간 11시 57분인데, 4시간? 정도 프로젝트만 잡았는데 공통코드 연동작업 하나만 마무리 해뒀네요 ㅋ..

일단 같이 보시죠!!

장비등록 - 공통코드 연동작업 (장비등록 화면)

 - 장비등록 - 구분

구분은 하드웨어 / 소프트웨어 혹은 추후 기타 등을 선택할 수 있습니다.

구분의 변경(선택)에 따라 분류의 값이 바뀌게 되는 형식입니다.

예)

하드웨어라면 모니터 ...(등) 으로 변경

소프트웨어라면 OS ...(등) 으로 변경

 - 장비등록 - 분류

장비등록의 분류는 위에서 설명한것처럼 구분을 변경(선택)함에 따라 그 값이 변경되게 됩니다.

위 스크린샷에서는 구분을 하드웨어로 예를 들었고, 분류가 모니터, 데스크탑, 노트북, 프린터 등의 값을 선택할 수 있습니다.

분류의 경우 관리자가 아닌 사용자가 직접 추가적인 등록이 가능하도록 할 생각입니다.

이 경우 분류 하위 코드만 건들 수 있도록 설정해줘야하는 작업이 필요하겠지만, 뭐.. 그리 어려운건 아니므로..

- 장비등록 - 상태

장비가 현재 어떠한 상태인가를 나타내기 위한 값입니다.

사용, 수리중, 수리완료, 폐기, 미사용 상태가 있으며, 상태에 대한 설명으로는

사용 - 장비를 사용중인 상태

수리중 - 장비에 문제가 생겨 장비를 수리한 상태

수리완료 - 장비를 수리했으나, 사용자에게 인수되지 않은 상태

폐기 - 장비가 고장나거나, 문제가 생겨 폐기한 상태

미사용 - 장비를 사용할수 있지만, 현재는 사용하지 않고 있는 상태

입니다.

그럼 공통코드에서 어떤 형식으로 저장이 되었을지 궁금하다구요?

보여드리겠습니다 ㅋ_ㅋ

장비등록 - 공통코드 연동작업 (공통코드 화면)

 - 공통코드 - 구분

위 장비관리 화면의 맨 첫번째 구분에 대한 코드입니다.

중분류의 코드명 [구분]을 선택하면  소분류에서 그 값들이 나오는 것을 확인할 수 있습니다.

 - 공통코드 - 분류

위 장비관리 화면에서 두번째 분류에 대한 코드입니다.

소분류에서 [분류]에 대한 값들을 확인할 수 있는데, 현재는 영어(monitor 등)로 되어있지만, 이는 변경 될 수 있습니다.

 - 공통코드 - 상태

위 장비관리 화면에서 세번째 상태에 대한 코드입니다.

아무래도 이 부분은 제가 만든 상태값이므로 원하지 않다면 관리자는 자신의 입맛대로 추가하거나 삭제할 수 있을거 같네요.ㅎ

흠.. 아실분들이야 아시겠지만.. 이거(공통코드 연동) 가지고 4시간 걸렸다고하면 말이 안되죠.. 네..

코드를 selectbox에 뿌려주는거야 뭐.. 몇 분이면...(퍽)

사실 뒷단에서는 좀 더 여러작업을 했습니다.

1. 공통코드를 검색하고나면 검색된 code값을 select id를 넘겨주면 알아서 selectbox의 값을 변경하게 해주는 로직을 짜놔서 앞으로 공통코드 연동하기는 훨 수월해질 것 같습니다.

 - 재활용성 고려해서 개발했기 때문에 어느 화면이든 공통코드를 연동한다! 싶으면 그냥 function 하나가지고 가져다 쓰면 끝! (이런 쉬운 방법이!)

2. 서버-클라이언트의 주고 받는 값의 정보를 조금 변동했습니다. (Request, Response)

3. 공통코드를 보면 지금 UI단에서는 보이지는 않지만, 추후 외국어를 지원하기 위한 정보를 담고 있습니다. (지금은 무조건 한국어로만 들어가지만..) 

 3.1. 사실 공통코드의 아이디는 고유하지 않습니다. (충격과 공포!) 사유는 위와 엮이므로 3.1. 으로...

4. 더워서 좀 (사실은 많이) 누워있었습니다. (ㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

5. 심심해서 android/iOS 개발 방안을 미리 구상하고 있었습니다. (벌써부터 김치국)

 5.1. 예정이지만 android의 버전 8.0부터, iOS 버전 13.0부터 어플을 지원할 예정입니다.

 5.2. 전에도 이야기했지만 태블릿은 android는 제가 가진 태블릿이 없어 개발 예정은 일단 보류이고, iPadOS만 13.0버전으로 따로 개발할 예정입니다.

스포일러?

ㅋㅋ.. 게시글을 빨리 쓰는 만큼 오늘은 좀 일찍 잘려고합니다 ㅎ

내일부터 다시 회사에서의 한 주가 시작이되고(저는 이미 시작했지만..), 그만큼 또 비어있는 월요일의 구멍을 메꿔야하기 때문에 바쁠 예정이거든요 ㅋㅋ..

모두들 일찍일찍 주무시고 좋은 꿈 꾸시길 바라겠습니다.

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

버전정보 (v1.0)

 - v1.0 2020.08.18 배포

 - v1.1 2020.08.18 문장 추가 및 수정

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_개발(8)_메뉴 디자인 변경

결국은 날잡아서 메뉴 디자인 새로 고쳤습니다.ㅋㅋㅋㅋㅋㅋ

평소부터 맘에 안들었지만,

그 왜.. 그런거 있잖아요? 꼭 공부하려고보면 책상이 더럽게 느껴져서 다 치우고 느지막하게 공부 시작하게 되는..

그런겁니다... (무슨말인지 하나도 모르겠..)

어쨌든 오늘은 메뉴 디자인을 변경했습니다.

그런 느낌.

간단하면서 깔끔하고 보기좋고 이쁜 그런 디자인. (?!?!?!?!?????)

제 눈에는 깔끔해지긴했는데 다른분들이 보기에는 어떨진 모르겠네요ㅠㅠ

새로 변경된 메뉴 디자인

(최고 관리자는 우리집 막내였다고 합니다. 저는 그저 개발자!ㅋㅋ)

이번 디자인은 버튼이라던가 그림자 효과가 보이는게 좀 있지 않나요?

사실 저는 플랫 디자인을 굉장히 좋아하는데, 이번에는 머티리얼 디자인으로 작업을 해야할 것 같아서 머티리얼 디자인으로 진행을 해봤습니다.

추후 기회가되면 따로 설명을 해볼까 하지만, 플랫 디자인은 생각보다 디자인은 정말 깔끔하지만 구별의 모호성이 가장 큰 문제라.. 사용자의 입장에서 헷갈릴 수 있다는 점이 문제죠.

이런 시스템에서는 깔끔한건 좋지만, 기능이 중요하기 때문에 어떤게 버튼인지 구분이 안되는 상황은 문제시 될 것 같아서 여러부분에서 고민을 많이 했네요.

최대한 깔끔하게 하려고 노력하긴 해봤는데, 이거저거 코딩작업해보고 비교해가면서 적용한게 이정도네요.

개인적으로 bootstrap이용하면서 최대한으로 깔끔하게 뽑은거같습니다. (이전에는 워낙 지저분하게 덕지덕지 붙여놔서..)

일단 적용은 했지만, 아직 다른 화면들의 컨텐츠는 조금 수정이 필요할 것 같네요.

참, 모바일 버전으로 보면 이런 느낌이 됩니다. (아래 참조)

위는 컨텐츠, 아래는 메뉴를 눌렀을때네요.

참고로..

기존에는 이랬지요.. (링크)

ㅋㅋㅋ 촌스러웠지요..

그리고 귀찮아서 구현하지는 않았었지만, 메뉴에서 Ensemble Navigation이라 보이는 부분에는 원래 유저 정보를 넣을 생각이었습니다.

그래서 위를 조금 비워둔 상태였구요 (이눔의 귀차니즘..)

이 부분은 설계서에는 없을건데, 그 이유가 로그인 관련쪽을 설계하면서 넣을 예정이었거든요. (업데이트 형식으로)

어차피 해야할거 미리 넣어서 진행하자 싶어서 넣어두었습니다. ㅋㅋ

추가로 아직 컨텐츠까지는 디자인을 변경하지 않아서 아직 해야할 일이 많이 남아있네요 (아래 이미지 참조)

뭐.. 이 부분은 DB연동하면서 어차피 이거저거 테스트하면서 변경될건 변경되고 할테니

차차 진행해야겠습니다.

또 어떻게하면 깔끔하고 이쁜 디자인으로 할지 고민도 좀 해보구요 ㅋㅋ

정~~~말 별거아녔는데 시간잡아먹었네요.

왜 그렇게 딱 맞아떨어지는 디자인이 바로바로 안나오는지..

애초에 저는 디자이너는 아니고 취미로 그림 그리거나 디자인하는 정도(중학생까지 미술과외를 받았건만..)라서

정말 디자인 잘하시는 분들이 보면 굉장히 별루일 것 같네요. (ㅠ,ㅠ)

그래도 좋은점이라면 혼자 디자인과 개발을 하다보니 그냥 맘에 안드는거 있으면 훅훅 바꿔버리는 ㅋㅋㅋㅋ

보통이라면 디자인 <-> 개발 커뮤니케이션이 중요하기도하고 그로인해 걸리는 시간적인 코스트도 많이 있을 법 한데 그런 부분이 확실히 사라지니까 너무 좋습니다. (설마 제가 저와 커뮤니케이션하지는 않을테니까요ㅋㅋ)

누군가 창작의 고통은 아프다더만..

창작을 해서그런지 눈이 침침하고 무릎이 아프네요. (그건 아마 비가와서 그렇....)

다음주부터는 DB연동으로 넘어갈 것 같네요. (뭔가 일주일씩 역할이 나뉘는 느낌)

좋습니다. 좋습니다..

오늘도 고생 많으셨고, 굿밤되시기 바랍니다!

(어! 8월 1일에 게시하려했는데, 개발에 빠져있다가 2일이 되어버렸네요. 흑흑.. 별수 없죠 뭐..)

버전정보 (v1.0)

 - v1.0 2020.08.02 배포

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_개발(7)_장비 상세 화면 개발

흠.. 오늘로써 설계 문서에 맞춰서 일.단.은. 화면단의 개발은 끝났습니다.

이제 버그 수정과 디자인이 썩 맘에 들지않아 더 깔끔하게 다듬어주는 작업이 남아있기는 한데, 이건 천천히 작업하는걸로 하고, 내일부터는 이제 DB 데이터와 연동하는 작업을 들어가볼까합니다. 

근데 벌써 1시 41분이네;; 오늘도 빠르게! 보여드리고 넘어가도록 하죠!

Wireframe & 화면설계서 (링크)

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

화면설계서 (장비관리-장비상세_tab1)

개발 화면 (장비관리-장비상세_tab1)

아직 DB연동이 안되어 있어 세세한 데이터의 정보까지는 처리하지 않았습니다.

이 부분 확인하시어 일단은 프레임만 보시면 될 것 같습니다!

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

화면설계서 (장비관리-장비상세_tab2)

개발 화면 (장비관리-장비상세_tab2)

흠흠.. Modal도 그렇고 좀 다듬어야할게 한둘이 아니네요.

2시까지 마무리작업을 생각했으니, 오늘은 일단 여기까지~

아무래도 문제는 디자인!

좀 더 공을 들이면 깔끔하게 뽑을 수 있을 거 같습니다.

(일단 지저분한 저 파란색 테마는 좀 빼도록 하고, 테두리랑에서도 파란색을 제거를 ㅡㅡ,, <- 참고로 저는 파란색 엄청 싫어합니다. 빨강x검정이 진리...지만 여기서 그런짓했다가는 싸대기맞을듯싶네요 ㅋㅋㅋㅋㅋㅋㅋ)

디자인은 차츰차츰 해소해나가야죠. 어차피 틀은 어느정도 잡아뒀다고 생각해서 디자인 쯤이야..^^

(??????????? 어디서 나오는 자신감인가.. 난 졸려죽겠.....)

빠르게 작성했다고 생각했는데 벌써 1시 56분...ㅋ 내일(? 이아니라 오늘)을 위해서 얼른 취침하러 가봐야겠습니다!

아! 그러고보니 오늘도 비가 많이 온다고 하는 모양이니 조심하시고, 침수피해 없으시기 바라겠습니다.

비도 맞으면 감기걸릴 수 있으니 꼭 우산 챙기셔서 건강도 조심하시구요!!

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

버전정보 (v1.0)

 - v1.0 2020.07.31 배포

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_개발(6)_장비 목록 화면 개발

오늘따라 엄청 졸리네요;; 이제 목요일 들어가서 그런가..? 잘 모르겠네요;; 

음.. 오늘도 커피 5잔정도 마신거같은데 이러네요;;ㄷㄷㄷ

간만에(올해 설날 이후로 간만에 길게 쉰거같은데..) 휴식기간을 가지다가 다시 업무와 프로젝트 그리고 공부를 또 열심히(?????) 병행하는게 몸이 못따라오는건지.. 어쩐건지..;;

일단은 버그 생각 않고 장비목록 화면만 빠르게 뽑아내고 좀 쉬어야지 싶어서 빠르게 진행했습니다.

아마 추후에 고쳐야할게 많을 듯 싶네요...ㅠㅠ

그냥 어떻게 진행되었는지만 화면 뽑아낸것만 보여주고 바로 취침하러가겠슴다 ㅠ;

wireframe & 화면설계서 (링크)

Wireframe

화면설계서

장비목록 화면 개발 내역

대충 만들어서 그런가 만들고나서 이거저거 눌러보니 벌써부터 보이는 버그가..

일단 필요한 화면 얼른얼른 쳐내고 DB와 연동하는 작업 진행하면서 다듬어가야겠네요 에궁..

(그나저나 디자인이 파랗파랗한게 영 맘에 안드네.. 날잡고 디자인도 그냥 다시 잡아줘야겠네요 ㅋㅋㅋㅋㅋㅋㅋㅋ)

일단은 아까 맨 위에 써놓은 것처럼 오늘은 정말 너무 너무 피곤해서 먼저 자러가보겠습니다;;; (ㅠㅅㅠ)

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

버전정보 (v1.0)

 - v1.0 2020.07.30 배포

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_개발(5)_장비 등록 화면 개발

휴식을 갖기 전에 열심히 베이스를 깔아놔서 그런지 화면 개발은 화면 하나당 하루(대략 1~2시간 정도)정도 잡으면 될 것 같네요. (휴일이었으면 하루면 다 만들 듯..)

일단 기능적인 요소를 제거하고 front와 back단 조금 잡아주는 부분까지만을 1~2시간 정도로 잡고 있습니다. 사실 하나 완성되면 그 이후는 더 금방 끝날것도 같지만..

오늘은 그런 의미에서 개발 진척된 부분 가지고 나와봤습니다!

우선 개발 진행되고 있는 장비 등록을 보여드리기 전에! 잊으셨을 수 있으니, Wireframe과 화면설계서를 한번 보여드리고 진척사항을 설명하도록 하겠습니다.

여기서는 설계단의 자세한 설명은 생략하고 이미지만 보여드릴 예정입니다.

혹시라도 설계관련 자세한 사항은 아래 링크를 통해 장비등록의 Wireframe과 화면설계서를 보시는걸 추천드립니다.

Wireframe & 화면설계서 (링크)

Wireframe

화면설계서 - PC 버전

화면설계서 - Mobile 버전

설계서를 토대로 개발 진행된 사항 - PC 버전

어찌보면 Prototype이라고 하기에는 아쉬운 수준의 미완성적인 개발된 내역입니다.

처음 몇몇 Component들 잡아주는 부분이 시간이 걸렸을 뿐이지, 아마 이후부터는 개발에 좀 더 속도가 붙지 않을까 싶습니다.

일단 input box 안에 들어간 내용들은 직접 입력해본 내용물입니다.

화면설계서와 비슷하게 만드려고 노력은 했지만, 역시나 디자인이 조금 아쉽기는 하네요.

이 디자인은 조금씩 다듬어가면서 계속해서 업그레이드 해나갈 예정이니 지금은 아쉽더라도 기능을 붙여가면서 조금씩 만져봐야겠습니다 ㅋㅋ

설계서를 토대로 개발 진행된 사항 - Mobile 버전

모바일에서는 지금은 이러한 화면을 보여주고는 있는데, 해당부분은 실제 테스트를 통해서 변경될 수 있는 부분이 많이 있을 듯 합니다.

아무래도 사용하면서 불편한 부분들도 몇몇 보일텐데 그러한 부분들은 점차 해결해나가야할 것 같습니다.

음! 그러고보니 모바일버전에서 메뉴를 누르게되면 어떤 느낌인지 궁금하실 수 있는데 이 부분은 아래와 같은 느낌입니다! 퍼런색으로 다 칠해놨더니 조금 아쉬운 부분이 많아서 ㅋㅋㅋㅋ 심심할때마다 디자인은 계속 변경해봐야겠습니다 ㅋㅋㅋ

첫 화면이 드디어 뽑히게 되어 아마 이후 화면들은 금방금방 뽑아낼 수 있을 것 같습니다. (칼국수!?_)

그만큼 첫 화면이 중요한게 아무래도 틀이 잡혀가는데 시간이 생각보다 많이 들어서.. 역시 시작이 조금 걸릴뿐이지 이후는 별다른 기능의 Component들만 아니라면 금방금방 뽑혀 나올 것 같습니다.

화면만 대충이라도 나와주면 DB연동작업(특히 Back-end단)이 한창 시작될 것 같네요.

뭐.. Component 중에서도 제가 좀 손을 봐야하는 부분이 몇몇 있기는 한데.. 이것저것 하나씩 잡고 진행하다보면 어느정도 작업이 마무리 되어가지않을까 생각합니다.

일단 오늘은 이정도에서 마무리하고, 기능검토 게시글도 같이 작성중이던게 있어서 그 부분까지만 작성하고 취침하러 가봐야겠네요 ㅋㅋㅋ

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

버전정보 (v1.0)

 - v1.0 2020.07.29 배포

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

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

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

Project.다원 Ensemble_개발(3)_템플릿 제작 진행

음.. 어제 좀 피곤했던일이 있어서 많은 진척은 없지만, 템플릿을 깔짝 손봤습니다.

아무래도 Bootstrap 기반으로 만들다보니 Bootstrap의 느낌이 나네요. (그런 느낌?!)

1. Front단 - 템플릿 제작 진행 중

 - PC에서 봤을 때

 - Mobile에서 봤을 때

아마 메뉴부분은 저번에 만든 Wireframe을 기반으로 만들어보겠지만, 아마도 조금씩 변동사항은 생길것같네요.

메뉴 구성 Wireframe 부분은 아래 게시판으로 이동하시면 볼 수 있습니다. (링크)

아무래도 밑바닥부터 개발을 디자인과 병행하여 진행을 하다보니 여기서 시간이 좀 걸리지않을까 싶습니다.ㅠㅠ

2. Back단 - Class 골격 잡기 진행 중

현재 VO Class는 다 만들어진 상태이고,

Controller / RestController의 구조잡기가 한창입니다.

아마 DB연동하는 부분의 Class(Service, Mapper)는 조금 나중에 진행이 될 듯 합니다.

VO객체는 뭐.. Getter/Setter 만들어 주는거 말고는..

요즘 잠을 더 줄였더니 엄청 피곤하네요;;;

어제 불토라고 늦게까지 코딩이랑 공부랑 조금했더니 아마 그게 문제가 된 듯 합니다 ㅋㅋㅋ;;;;;

개발하는 내내 피곤한 상태라서 아마 내일은 조금 쉬고올까 합니다.

(간만에 컴퓨터 안하는 날?!)

오늘은 이르지만 좀 일찍 잠을 청해야겠습니다.

다음 시간에는 제가 RestController 부분에 넣어보고 싶은 기능이 있어 기능검토좀 들어가볼까 합니다.

속도면을 조금 올려줄 수 있을 방법같은데 어떨지 모르겠네요.

버전정보 (v1.0)

 - v1.0 2020.07.19 배포

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

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

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

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

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

Project.다원 Ensemble

Karzin

abbeea@naver.com

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