Notebook
  • 0. 소개
  • 1. 프로젝트 개요
  • 2. 개발/배포 환경
    • 2-1. 개발 라이브러리
    • 2-2. ERD
  • 3. Notebook
    • 3-1. 소스 코드/히스토리 확인하기
  • 4. 화면 구성
    • 4-1. 프로토타입/모바일
    • 4-2. 프로토타입/웹
    • 4-3. 화면 구성/웹
    • 4-4. 화면 구성/모바일
  • 5. 이슈 리포트
    • 5-1. Django & Python
    • 5-2. Android
    • 5-3. Machine Learning
  • 6. 개선점
Powered by GitBook
On this page
  • 1. 로그인 화면
  • 2. 메인-업로드한 사진이 없을 경우
  • 2-1. 메인-업로드한 사진이 있을 경우
  • 3. 파일 업로드
  • 3-1. 파일 업로드-파일, 공유 여부 선택
  • 3-2. 파일 업로드-로딩중
  • 4. 파일 로드 성공 페이지
  • 5. 상세페이지
  • 6-1. 반응형 웹-max-width 1120px
  • 6-2. 반응형 웹-max-width 991px
  • 6-3. 반응형 웹-max-width 767px
  • 6-4. 반응형 웹-max-width 575px
  • 7. 오류 페이지

Was this helpful?

  1. 4. 화면 구성

4-3. 화면 구성/웹

HTML5, CSS3, JavaScript, Bootstrap으로 실제 구현된 Notebook 웹 화면입니다.

Previous4-2. 프로토타입/웹Next4-4. 화면 구성/모바일

Last updated 5 years ago

Was this helpful?

1. 로그인 화면

2. 메인-업로드한 사진이 없을 경우

2-1. 메인-업로드한 사진이 있을 경우

3. 파일 업로드

하단의 + 버튼을 눌러 파일을 업로드 합니다.

3-1. 파일 업로드-파일, 공유 여부 선택

3-2. 파일 업로드-로딩중

Simple(Machine Learning)의 경우 10초 정도의 시간이 소요됩니다. Dense(Machine Learning)의 경우 10분 정도의 시간이 소요됩니다.

4. 파일 로드 성공 페이지

모달창을 닫을 경우, main 페이지로 redirect 됩니다.

5. 상세페이지

  • 추출 된 문장을 스크롤하여 선택할 수 있습니다.

  • 음량 버튼을 누르면 문장을 읽어줍니다. -Chrome 내장 TTS 사용으로, 크롬 환경에서만 음성 서비스가 가능합니다.

6-1. 반응형 웹-max-width 1120px

6-2. 반응형 웹-max-width 991px

6-3. 반응형 웹-max-width 767px

6-4. 반응형 웹-max-width 575px

7. 오류 페이지

/login/
/
/
/
/
/
/
/
/
/
404 페이지