개인정보-컴플라이언스-웹애플리케이션(1) - 피그마를 통한 전체 흐름 및 디자인

오늘은 대학교 교수님이 내주신 과제를 진행하기 위해서 우선 전체적인 사이트내용을 설명을 듣고 피그마를 통해 전체적인 흐름을 보도록 하겠습니다.

https://www.figma.com/design/26nIZOuZoQsWwZSwggus0h/%EA%B0%9C%EC%9D%B8%EC%A0%95%EB%B3%B4-%EC%BB%B4%ED%94%8C%EB%9D%BC%EC%9D%B4%EC%96%B8%EC%8A%A4-%EC%9B%B9%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98?node-id=0-1&p=f&t=zxcEfRy8pmffy2no-0

Figma

우선 사이트를 보면 크게 회원가입 기능, 자가진단 기능, 관리자 기능을 볼수 있습니다.

이 사이트에 자세한 설명을 해드리겠습니다.

우선 이용자는 회원가입을 통해 일반 유저 관리자를 선택할 수 있습니다.

일반유저를 선택하고 가입을 할 경우 정상적으로 가입이 됩니다.

하지만 관리자를 클릭하고 가입을 할 경우 슈퍼 유저(전체 책임 관리자)가 승인을 할 경우에만 가입이 됩니다.

이렇게 일반 유저를 가입할 경우 이용자는 메인 화면은 마이페이지 느낌으로 나옵니다. 그 화면에서는 유저들은 각각 10개개까지 자가진단할 시스템을 등록할 수 있습니다.

시스템을 등록할 경우 시스템을 선택하고 자가진단하기를 시작하면 정량문항과 정성문항이 나오게 됩니다.  

유저는 자문이 필요할경우 입력하고 넘어갈 수 있습니다.

자가진단을 하고 제출을 누르면 슈퍼유저는 해당시스템에 대해 자문이 필요한 시스템에 관해서 관리자를 지정하여 자문을 해줄 수 있습니다.

대략적인 사이트를 설명해 드렸습니다.

 

해당 사이트는 리액트(vite)와 node.js express를 통해서 개발을 하도록 하겠습니다.

다음글에는 ERD와 요구사항명세를 통해서 더욱 자세하게 소개하겠습니다.