화면 구상

구상

1. Frontend 구상

• 수식 편집
  • 키보드 입력 / GUI 입력 / 손글씨 입력
  • LaTex 편집 지원
  • 스타일 속성 편집
  • Clear 기능 구현
• 템플릿 지원
  • 다양한 템플릿 지원
  • 최근 사용한 수식 및 즐겨찾기 수식 지원
• 편집 확장
  • 다중탭 지원 가능
• 출력
  • 이미지로 저장
  • 이미지 파일 주소 저장 (NCP 클라우드 저장 -> 주소로 반환)
  • 텍스트 형태로 저장 (latex)
  • 서버에 저장 (Option)
  • 브라우저 커서 위치에 적용 가능 (찾아보기)
• 부가 기능
  • 최근 사용한 수식을 잠시 저장하는 기능 (session-storage)
  • Redo, Undo 기능 구현
  • 그래프 차트 (라이브러리 이용), 손글씨 인식
  • SNS 공유 (보류)

2. Backend 구상

• 네이버 소셜로그인
• 유저별 자주 사용하는 수식을 즐겨찾기를 통해 저장하는 기능? (DB)

3. 화면 구상

• 우선 page로 만들고 나중에 Modal로 구현
• 목표
  • 네이버 수식편집기는 일회성이 강함.
  • 자주 쓰는 수식 및 수식 보관함을 통해 유저별로 수식을 관리하며, 지속적으로 사용 가능한 수식편집기를 만드는 것이 목표
  • 사용자에게 편리한 UI/UX 제공
  • 크롬 확장프로그램을 이용한 배포
• 느낌 : rgb(4, 207, 92), rgb(255, 255, 255)

[헤더]

• 다음 수식 편집기를 바탕으로 수식 메뉴 ( 대표 수식 + 상세수식(드롭다운) )
• 로그인 및 클리어 버튼

[왼쪽 사이드바]

• 다중 페이지 탭 구현
• 탭이 많아질 경우 스크롤바 생성

[메인 내용]

• 탭으로 나누어 일반(Tex) 입력과 그리기로 나눔 (Tab UI로 구현)
• 일반(Tex) / 그리기
  • 왼쪽 컴포넌트
    • 상위에 GUI로 수식을 입력하고 출력하는 창
    • 하위에 상위의 GUI와 연동되어 MathML로 수식을 입력하고 출력하는 창
    • 로그인 여부에 따라서 즐겨찾기에 추가 버튼이 활성화/비활성화
  • 오른쪽 컴포넌트
    • 수식 사전 ( 네이버 기준 )
    • 로그인을 했을 시 즐겨찾기에 등록된 수식을 사용 할 수 있음.
    • 로그인 여부에 따라서 즐겨찾기 버튼 활성화/비활성화
• 그리기
  • 라이브러리를 이용하여 손글씨를 Latex문법으로 변환
  • 변환 버튼 추가
• 서식 변환 버튼
  • 크기 변환
  • 색상 변환
  • 정렬 (왼쪽, 가운데, 오른쪽)

[오른쪽 사이드바]

• 이미지로 저장 버튼
  • jpg 확장자로 저장
  • 필요시 ncp Object Storage 이용
• 텍스트로 저장 버튼
  • 내용 : Tex 형태로 저장
  • 확장자 : txt로 저장
• 화면에 적용 버튼 (부가)
  • 방법을 좀 더 연구해야함