[Design] 기초 디자인 구현도

[heojae]

대주재 : FIRA 기초 디자인을 구상해보고 싶다.

소주제 : Figma 를 활용하여, 기초 디자인을 구현하겠다.

필요한 기능

아래 기능들을 각각의 페이지로, 디자인 할 필요가 있다.

• Login (관리자 로그인)
• Run Demo - CHECK RESULT ( 모델이 처리한 결과를 보여주는 화면 )
• Run Demo - FIX DATA (잘못 고쳐진 이미지를 수정하여서, 저장하는 화면)
• Model Version - 학습한 모델을 버젼을 나누어서, 다른 모델들을 선택할 수 있는 화면
• Dataset Save - FIX DATA 에서 수정된 이미지들을 저장해서, 그것을 Dataset 에 따라, 웹으로 보여주는 화면

---

시안 디자인 Demo

아래 디자인들을 FIGMA 를 통해서, 디자인 되었습니다.

아래 디자인들은 단순히, 시안이며, 실제로 구현할 때에는

antd or semantic ui 등등을 통해서, 바꾸어서 구현될 예정입니다.

• Login Page

접기/펼치기 버튼


• Run Demo (Check Result(Infernce) ) Page

접기/펼치기 버튼


• Run Demo (Fix Data ) Page

접기/펼치기 버튼


• Model Version Page

접기/펼치기 버튼


• Model Version

접기/펼치기 버튼


---

---

시안 다자인 내부 구조

위와 같이 시안 디자인을 구현하는 것도 좋았지만,

나중에 html 로 나타낼 때, className 과 같은 부분등 체계적으로 설계를 해놓으면, 좋겠다고 생각하여, 아래와 같이 생각을 하며, 구현하였습니다.

물론, 대략적인 div className 구현도라서, 추후 변경 될 수 있습니다.