메모장 프로그램 기능 개요 및 주요 화면

1. 기능 개요

메모장 프로그램은 게시판 프로그램과 유사하지만, 개인적인 용도일 가능성이 높다.

메모는 짧을 수도, 길 수도 있다.

짧은 메모는 휴대전화와 컴퓨터에서 각각 복사하고 붙여넣기를 할 수 있고, 검색기능만 원활하다면 불편함이 없다.

긴 메모에서 발생하는 기능적 요구사항은 다음과 같다.

1.1. 자동저장 기능

메모를 길게 작성하게 되면 다음과 같은 이유 등으로 메모의 내용이 유실될 가능성이 발생한다.

• 중간에 실수로 뒤로가기 / 다른 페이지로 이동하는 버튼을 누르거나,
• 웹브라우져를 꺼버리거나,
• 서버에서 세션이 만료되거나,
• 예기치 않게 컴퓨터에서 전원이 나가거나,
• 기타 등등

PC 용 문서편집기를 능숙하게 사용하는 사람들 중 상당수가 Ctrl + s 를 습관적으로 누르는 경우가 많은데, 컴퓨터의 전원이 나가는 등의 이유로 오래동안 편집했던 파일을 순식간에 날려먹었던 악몽같은 기억 때문이다.

최근에는 대부분의 문서편집기에서 자동저장 기능을 제공하고 있고, 이에 대한 사용자 경험을 해치지 않는 한도에서 구현되어 있다.

1.2. MarkDown 및 Highlight(Line Numbering 포함) 기능

메모를 길게 작성하게 되면 서식 같은 것들이 필요해진다.

다만 전문적인 문서편집기가 아닌 한, 제목을 표시하는 수준이면 족할 것이고, 이 정도 기능을 제공하는 것이 MarkDown 이다.

이 기능은 필자가 github를 시작하면서 MarkDown Viewer 가 필요해서 구현했는데, 이 기술을 이용하면 단순하면서도 편리하게 프로그램 개발과 관련된 문서를 작성할 수 있다.

이런 방식은 프로그래머가 아닌 사람에게 생경한 방식이겠지만, 프로그래머라면 초심자들도 쉽게 익힐 수 있고, 여기서 구현하려는 메모장에서 쉽게 결과를 확인 할 수 있다.

1.3. 하위 게시물 작성 기능

메모를 매우 길게 작성하면 중간 중간 끊어서 작성할 필요가 생긴다.

하위 게시물 작성기능은 상세보기 화면에서 하위 게시물의 목록을 보여주는 한편, 하위 게시물을 추가할 수 있는 버튼을 추가하는 수준이다.

1.4. 이력관리 기능

메모를 길게 작성한다는 것은 수정도 많이 한다는 뜻이다.

이력관리 기능이 항상 유용한 것은 아니다. 의미없는 수정이력이 너무 많아지면, 이력관리를 하지 않는 것과 다를 바 없다.

문서가 완성단계 근처에 이르러서야 이력관리 기능은 유용해 진다.

1.5. 암호화 기능

암호화 기능은 패스워드를 입력받아 클라이언트에서 암호화/복호화를 하는 기능이고, 암호화 알고리즘은 AES 를 사용 할 것이다.

이렇게 하면 클라이언트와 서버가 암호화된 데이타를 주고받는 것은 물론이고, 서버에도 암호화된 데이타만 저장되기 때문에 이론적으로 패스워드를 알지 못하는 한 누구도 원본 데이타를 볼 수 없다.

암호화를 서버 쪽에서 하게 되면, 서버쪽 라이브러리를 거치면 복호화를 할 수 있고, 서버 쪽 담당자가 협조하기만 하면 원본데이타를 보는데 제약이 없다.

이런 방식은 보안이라는 측면에서 매우 우수할 수 있겠지만, 서비스에는 적합하지 않은데, 패스워드를 분실하면 안된다는 사용자의 책임이 지나치게 과도하기 때문이다.

이 기능은 재미삼아 구현하는 것이고, 만약 이런 기능을 서비스하게 되면, 패스워드를 찾아달라는 민원으로 업무가 마비될 것이다(수십년이 지나면 모르겠지만, 현재 기술로는 패스워드를 찾아줄 방법이 없다).

2. 주요 화면

2.1. 목록 기능

2.1.1. 기본 화면

목록 기능의 기본 화면은 다음과 같다.

위의 화면은 암호화가 해제(복호화)된 상태이다. 복호화된 게시물은 제목의 왼쪽에 방패 모양의 작은 아이콘이 붙는다.

2.1.2. 암호화된 게시물이 있는 경우

만약 암호화된 게시물이 있는 경우 암호 입력창이 뜬다.

2개의 입력창은 key 와 iv 를 위한 것이다. 입력된 값은 SHA-256 을 거쳐 AES GCM 암호화의 key 와 iv 값으로 각각 공급된다.

SHA-256 을 거친 값들은 웹브라우저의 session storage 에 저장되기 때문에 다시 입력할 필요는 없지만, 웹브라우저를 종료하거나 새탭이나 새창을 여는 경우 새로 입력해야 한다.

여기서는 취소 버튼을 클릭해서 암호화 된 상태에서 기능을 계속 이용할 수 있다.

2.1.3. 휴대전화 화면

목록 기능의 휴대전화 화면은 최소한의 항목만을 표시한다.

2.2. 상세보기 기능

2.2.1. 기본 화면

상세보기 기능의 기본 화면은 다음과 같다.

암호화된 게시물이라면 목록 기능에서와 마찬가지로 key 와 iv 를 위한 입력창이 뜨고, 목록기능에서와 마찬가지로 취소 버튼을 클릭해서 암호화 된 상태에서 기능을 계속 이용할 수 있다.

이 화면의 구성은 다음과 같다.

• 게시물의 상세한 내용
• 게시물의 변경 이력 : 제목을 클릭하면 저장된 내용을 조회 할 수 있다.
• 하위 게시물 목록 : 제목을 클릭하면 이 화면과 유사한 게시물을 조회할 수 있으며, 화면 아래쪽 오른쪽에 추가 버튼을 클릭하면 하위 게시물을 추가할 수 있다.

이 화면을 MarkDown 이 적용되었다. MarkDown 은 클라이언트 javascript 라이브러리를 사용하면, 게시물을 입력/수정 기능에서 MarkDown 여부를 선택할 수 있다.

2.2.2. Javascript 가 동작하지 않는 경우

상세보기 기능에서 javascript 가 동작하지 않는 경우의 화면은 다음과 같다.

javascript 가 동작하지 않는 경우 다음과 같이 기능의 제약이 있다.

• 복호화를 사용할 수 없다.
• MarkDown 이 동작하지 않는다.
• 게시물의 변경이력에서 저장된 내용을 조회할 수 없다.

2.2.3. 휴대전화 화면

상세보기 기능의 휴대전화 화면은 다음과 같다.

표시되지 않는 항목은 다음과 같다.

• label
• 변경이력과 하위 게시물에서 최종 수정 일자

2.3. 입력/수정 기능

2.3.1. 기본 화면

입력/수정 기능의 기본 화면은 다음과 같다.

암호화된 게시물이라면 목록 기능에서와 마찬가지로 key 와 iv 를 위한 입력창이 뜨지만, 목록기능에서와 달리 취소 버튼이 숨겨져 있기 때문에, 정확한 key 와 iv 를 위한 값을 입력하지 못하거나, 입력할 수 없는 경우(javascript를 사용할 수 없는 경우)에는 기능을 계속 이용할 수 없다.

2.3.2. Javascript 가 동작하지 않는 경우

입력/수정 기능에서 javascript 가 동작하지 않는 경우의 화면은 다음과 같다.

javascript 가 동작하지 않는 경우 다음과 같이 기능의 제약이 있다.

• 자동저장 기능을 사용할 수 없다.
• 암호화 기능을 사용할 수 없다.

2.3.3. 휴대전화 화면

입력/수정 기능의 휴대전화 화면은 다음과 같다.

표시되지 않는 항목은 다음과 같다.

• label (제목과 내용의 label)