[중간평가] 시스템 구조도 작성

[wynter122]

중간평가에서 7분내의 pdf 발표 자료를 만들어야합니다. 본 이슈에서는, 현재 개발된 기능들 + 개발하기로 논의된 기능 위주로 시스템 구조도를 그려 발표에서 사용하고 앞으로 있을 개발에서도 참고하도록 합니다.

[wynter122]

현재까지 구현된 기능 및 전체 시스템 구조도 초안

간략하게 전체 시스템 구조도 및 기능별 flow를 문서화 하는 중입니다. 우선 정렬이나 여백, 글자 크기 등의 디테일한 이슈는 배제하시고, 배치 및 구성위주로 검토가 필요합니다.

• 모서리가 각진 직사각형으로 구성된 Page 요소들은 Figma 에서 디자인된 페이지 샘플 사진을 삽입하려고 합니다. @lucyya99 @grapefruit224 께서는 현재까지 구현이 완료 혹은 확정된 디자인된 페이지를 마련되어있는 블록에 배치해주시면 그대로 사용하겠습니다.

• S3, DB 등 타원으로 구성된 요소들은 기술 아이콘을 첨부할 예정입니다. 배치가 확정되면 일괄적으로 적용시킬예정입니다.

• 각 사진에서 제가 생각했을때 부족한 부분, 보완이 필요한부분을 빨간색으로 메모해두었습니다. 역량부족으로 인해 표현할 방식이 떠오르지 않습니다... 도와주시면 감사하겠습니다. 또한 이상하다고 생각되는 부분이 있으면 언제든지 말씀해주시기 바랍니다!

전체 시스템 구조도

1. 우선, 최대한 "기술" 사용이 아닌 "동작방식" 위주로 나타내고자 했습니다. 물론 Flutter, Django 등은 작게라도 표시하긴 해야 할 듯 합니다. 다만, 전체 시스템 구조도인데 제가 그린건 백단의 동작방식이 잘 나타나지 않는 느낌이 드는 것 같아 보완이 필요할지 의견 묻고 싶습니다.

2. 또한, 가상피팅에서 client request -> model 에 element 전달 하는 부분이 명확하지 않습니다. 물론 이 부분은 실제 구현상에서도 명확하지 않아 발생한 문제이긴 하니, 구현을 마치고 알맞게 보완해도 괜찮을 것 같습니다.

3. model이 하는 역할 중 Human Parsing 이 잘 드러나지 않습니다. 사용자 입장에서 어플리케이션을 사용하는 과정을 구조도로 나타내다보니, 주된 기능인 "가상 피팅" 위주로 구조도가 작성되었습니다. 따라서 Human Parsing이 일어나는 회원가입, 마이페이지에서 사진 수정 등의 묘사가 빠져있어서 Human Parsing 또한 나타내기 어려운 것 같습니다.

회원가입 및 로그인 (Account)

회원가입 기능에서 Human Parsing 이 일어난다는것을 보여주는 부분에서 추상화가 필요한 것 같습니다.

메인페이지 (가상피팅)

전체 시스템 구조도에서와 같은 문제로, client request -> model에 element 전달 하는 과정이 명확히 그려지지 않습니다. 또한, 이 부분에서도 Inference 부분을 추상화하는게 필요합니다.

마이페이지 - 회원 이미지 수정

회원가입과 마찬가지로 Human Parsing 부분에서의 추상화가 필요합니다.

우선 일차적으로 구성 및 배치에 관련해서 진행상황을 공유드렸으며, 팀원분들의 피드백 + 시각적 아이콘으로 교체하여 다시 공유드리겠습니다

[dh5473]

1. 장고나 플루터 등의 프레임워크를 자세히 설명할 필요는 없지만, 사용했다 정도는 꼭 들어가는 게 좋아보입니다.
2. 개인적인 관점일 수 있으나, 회원가입이나 로그인 같은 구조는 굳이 따로 상세하게 표현할 필요가 없는 것 같습니다.
3. 양방향 통신이 되는 곳은 화살표를 양쪽으로 그려주는 것이 좋아 보입니다. (모델의 Inference 전 요청 등)
4. 추상화가 무슨 의미인지 모르겠는데, 모델 부분은 그냥 모델이라 두어도 괜찮을 거 같습니다. 차라리 모델 파트를 따로 그리는 것이 더 좋아보입니다.

[wynter122]

추상화는 별거 아니고 저기서 제가 User Id, User img 경로 등 post 를 날릴때 필요한 요소를 상세히 적어두었는데, 저런걸 간략하게 나타낼 수 있는정도면 좋을 것 같아요. 에를들면 회원가입할때에는 실제로 많은 요소들이 전달되지만 "User 정보" 라고만 표현해두었습니다. 모델 파트를 따로 구조로 만드는것도 괜찮은데, 모델 파트를 따로 그릴때도 모든 요소를 표현할 수 없어서 어떻게 간단하지만 정확하게 표현이 가능할지를 추상화라고 말씀드렸습니다.

[wynter122]

구현 완료된 UI 및 아이콘 반영

메인 시스템 구조도

피드백주신대로 회원가입이나 로그인등은 시스템구조도에서 상세하게 표현하지 않으면서 전체 시스템 구조도라기보다는 메인서비스(가상피팅) 시스템 구조도라는 네이밍이 적절해보입니다. 기존에 세로 flow 로 작성했는데 UI 가 명확히 보이면서도 전체 흐름을 나타내기에 공간이 부족하여 가로로 구성을 전환했습니다.

• Client 박스 내부와 Server 박스 내부에 여백이 꽤나 거슬립니다. 구성을 약간 변경하거나, 채울수 있는 아이디어가 있으면 말씀해주세요
• 여전히 human parsing 에 대한 설명은 부족합니다. 추가적으로 모델의 작동방식을 그리면 좋을 것 같습니다.

기능흐름도

따로 구성을 수정한것은 없고 아이콘과 확정된 UI를 반영하였습니다

로그인, 회원가입

메인페이지

전체 시스템 구조도가 메인서비스 시스템 구조도로 변경되면서 메인 페이지 workflow가 다소 의미가 없어진 느낌이 들지만, 조금 더 구체적으로 작성가능해두고 필요할 때 사용하면 좋을 것 같습니다.

User Image 수정

[lucyya99]

깔끔하게 작성하느라 너무 고생하셨어요!! 저희가 갤러리까지 안될 가능성이 있어서 가로로 구성하신게 훨씬 좋은 것 같아요

1. 간략화 필요하다고 적어주신 부분은 [모델 input 정보]로 하면 좋을 것 같아요
2. Main Page에서 Gallery Selection 이후에 Save image at local이 맞나요..? 이미지를 선택하면 중간에 모델 거쳐서 결과 페이지를 바로 보내주는 걸로 생각했는데 다시 확인해주심 좋을 것 같아요
3. 그 중간에 물음표는 저번에 회의에서도 상의한 내용인 것 같은데, a. 플러터에서 가지고 있던 이미지 정보, 유저 정보를 보내준다 b. 서버에서 나머지 정보를 합쳐 모델 API에 보내준다 c. 모델 api에서 input 정보로 받아 사용한다 이렇게 세가지 과정으로 일단 생각하고 있고 맞는지 확인해주신 다음에 넣으면 될 것 같아요

[wynter122]

2. Main Page에서 Gallery Selection 이후에 Save image at local이 맞나요..? 이미지를 선택하면 중간에 모델 거쳐서 결과 페이지를 바로 보내주는 걸로 생각했는데 다시 확인해주심 좋을 것 같아요

사용자로부터 input 으로 받은 사진은 재사용하지 않으니 S3에 저장할 필요가없다고 생각해요. 모델은 이미지의 경로가 필요하기 때문에 로컬, 즉 서버 ec2의 볼륨에 사용자가 선택한 사진을 저장하고 해당 경로를 모델에 input으로 넣어준다는 의미입니다. 이건 돈혁님이 확인해주시면 될 것 같아요.

3. 그 중간에 물음표는 저번에 회의에서도 상의한 내용인 것 같은데, a. 플러터에서 가지고 있던 이미지 정보, 유저 정보를 보내준다 b. 서버에서 나머지 정보를 합쳐 모델 API에 보내준다 c. 모델 api에서 input 정보로 받아 사용한다 이렇게 세가지 과정으로 일단 생각하고 있고 맞는지 확인해주신 다음에 넣으면 될 것 같아요

이해하신 부분이 맞아요. 그걸 어떻게 압축시켜서 정확하게 표현하면 좋을지 고민중이에요!

[wynter122]

시스템 구조도 중간 완성본 공유

피드백 주신 사항들 반영해서 중간 완성본 공유합니다. Resource_architecture.zip

UI 작업이 완료되면 최종 완성해서 자료에 쓸 수 있을 것 같아요. @lucyya99 @grapefruit224 두 분은 구조도에서 필요한 UI Figma 디자인만 먼저 진행해주실 수 있을까요? 중간평가이기 때문에 나중에 수정되어도 괜찮은 부분이니 실제 서비스 화면 묘사에 너무 부담갖지 않으셔도 괜찮습니다!! 부탁드립니다😄

[dh5473]

수고하셨습니다! 저도 모델 구조도 공유드릴게요! 피드백할 거 있으면 해주세요

[dh5473]

2. Main Page에서 Gallery Selection 이후에 Save image at local이 맞나요..? 이미지를 선택하면 중간에 모델 거쳐서 결과 페이지를 바로 보내주는 걸로 생각했는데 다시 확인해주심 좋을 것 같아요

요건 현영님이 이해하신 게 맞습니당

[wynter122]

메인서비스_시스템구조도.pdf

메인서비스 구조도 UI 약간 수정하여서 추가했습니다. @dh5473 확인하시고 피피티에 반영하시면 될 것 같아요.