이번 주에는 지난주에 구현한 회원가입 및 로그인 기능을 실제 서비스에서 사용할 수 있는 수준으로 완성하고, NMCloud 클라우드 메인 페이지 및 파일 관리 기능의 기반을 구현하는 것을 목표로 개발을 진행하였다.
회원가입 및 로그인 기능을 완전히 구현하였으며, 회원가입 완료 이후 사용자의 비밀번호 분실 상황에 대비하기 위한 복구 키 안내 기능을 추가하였다.
또한 로그인 또는 회원가입 이후 클라우드 메인 페이지로 이동하는 과정에서 페이지 전체를 새로고침하지 않고 화면을 전환하는 SPA 방식의 화면 전환 효과를 구현하였다.
클라우드 메인 페이지에서는 사용자 정보와 저장 공간 사용량을 표시하고, 파일 업로드 과정에서 암호화 및 업로드 상태를 사용자에게 표시할 수 있도록 구현하였다.
현재는 MongoDB에 실제 파일 자체가 아닌 파일에 대한 메타데이터 및 정보만 저장하도록 구성하였으며, 클라우드 메인 페이지에 접속할 경우 서버 API를 통해 MongoDB의 파일 정보를 가져와 클라이언트에서 해독한 후 화면에 표시하도록 구현하였다.
2. 개발 내용
2.1 회원가입 및 로그인 기능 완전 구현
지난주에 구현한 회원가입 및 로그인 기능을 서버 및 데이터베이스와 연동하여 실제 사용자 계정을 생성하고 로그인할 수 있는 형태로 완성하였다.
회원가입 과정에서 입력값에 대한 유효성 검사를 수행한 후 정상적으로 회원가입이 완료되면 사용자 정보를 저장하고, 이후 로그인 과정에서 해당 정보를 이용하여 사용자를 인증하도록 구현하였다.
이를 통해 단순한 UI 수준의 회원가입 및 로그인 기능에서 벗어나 실제 서비스에서 사용할 수 있는 사용자 인증 흐름을 구축하였다.
2.2 IndexedDB를 이용한 클라이언트 키 정보 저장
회원가입 또는 로그인 과정이 정상적으로 완료되면 클라이언트 측의 IndexedDB에 암호화 관련 정보를 저장하도록 구현하였다.
현재 IndexedDB에는 다음과 같은 데이터를 저장하도록 구성하였다.
평문 공개키
암호화된 비밀키
Master Key Crypto 객체
평문 공개키는 클라이언트에서 필요한 암호화 작업에 사용할 수 있도록 저장하고, 비밀키의 경우 암호화된 상태로 저장하여 브라우저의 로컬 저장 공간에 평문 비밀키가 직접 남지 않도록 구성하였다.
또한 이후 암호화 및 복호화 과정에서 사용할 수 있도록 Master Key를 Crypto 객체 형태로 관리하도록 구현하였다.
이를 통해 서버에 모든 암호화 관련 키를 저장하는 방식이 아니라, 클라이언트 측에서도 필요한 암호화 정보를 관리할 수 있는 구조를 구축하였다.
2.3 비밀번호 분실에 대비한 복구 키 안내 기능 구현
회원가입이 정상적으로 완료된 이후 사용자가 비밀번호를 잃어버렸을 경우를 대비하여 복구 키(Recovery Key) 안내 기능을 추가하였다.
NMCloud의 특성상 사용자의 암호화 데이터에 접근하기 위한 정보가 손실될 경우 파일 복구가 어려울 수 있기 때문에, 회원가입 완료 시 사용자에게 복구 키의 중요성을 안내하고 별도로 보관할 수 있도록 안내 메시지를 표시하도록 구현하였다.
2.4 SPA 방식의 화면 전환 구현
로그인 또는 회원가입이 성공하여 클라우드 메인 페이지로 이동할 때 페이지 전체를 새로고침하지 않고 화면을 전환하는 방식을 구현하였다.
화면 전환 과정에서 기존 화면을 보라색의 바다와 같은 애니메이션으로 덮은 후, 애니메이션이 진행되는 동안 HTML 내용을 새로운 페이지의 내용으로 변경하고 화면이 전환되도록 구성하였다.
이를 통해 일반적인 페이지 이동과 달리 하나의 웹 애플리케이션에서 자연스럽게 화면이 전환되는 SPA(Single Page Application) 형태의 사용자 경험을 구현하였다.
(화면이 끊겨보이는건 녹화가 잘못된겁니다.)
3. 클라우드 메인 페이지 구현
3.1 사용자 이메일 표시
클라우드 메인 페이지에 접속하면 로그인한 사용자의 이메일 정보가 화면 오른쪽 상단에 표시되도록 구현하였다.
이를 통해 현재 어떤 계정으로 NMCloud를 이용하고 있는지 사용자가 확인할 수 있도록 구성하였다.
3.2 저장 공간 할당량 및 사용량 표시
화면 오른쪽 하단에는 사용자가 현재 사용할 수 있는 전체 저장 공간 할당량과 현재 사용량을 표시하도록 구현하였다.
사용량은 단순한 숫자뿐만 아니라 게이지 형태의 UI로도 표시하여 사용자가 현재 저장 공간을 얼마나 사용하고 있는지 직관적으로 확인할 수 있도록 구성하였다.
4. 파일 업로드 기능 구현
4.1 파일 업로드 방식 구현
클라우드 메인 페이지의 파일 탭에서 사용자가 파일을 업로드할 수 있도록 기능을 구현하였다.
파일 업로드는 다음 두 가지 방식으로 수행할 수 있도록 구성하였다.
파일 탭의 업로드 버튼을 통한 파일 선택
파일을 직접 화면으로 드래그 앤 드롭하여 업로드
사용자가 보다 편리하게 파일을 업로드할 수 있도록 두 가지 입력 방식을 지원하도록 구현하였다.
4.2 파일 암호화 및 업로드 상태 표시
파일 업로드를 시도할 경우 화면 중앙 하단에 현재 파일 처리 상태를 표시하는 모달 UI가 나타나도록 구현하였다.
파일의 상태에 따라 다음과 같은 내용을 사용자에게 표시하도록 구성하였다.
파일 암호화 중
파일 업로드 중
파일 업로드 완료
이를 통해 파일 업로드 과정에서 현재 어떤 작업이 진행되고 있는지 사용자가 확인할 수 있도록 하였다.
5. MongoDB 기반 파일 정보 저장 구현
현재 단계에서는 실제 파일 자체를 저장하는 기능에 앞서, 파일과 관련된 메타데이터를 MongoDB에 저장하는 기능을 구현하였다.
파일을 업로드할 때 파일에 대한 정보를 서버로 전달하고, 해당 정보를 MongoDB에 저장하도록 구성하였다.
현재 MongoDB에는 실제 파일 데이터가 아닌 파일을 관리하기 위해 필요한 파일 정보 및 메타데이터가 저장되는 구조로 구현되어 있다.
6. MongoDB 데이터 조회 및 클라이언트 표시 구현
클라우드 메인 페이지에 접속할 경우 클라이언트에서 MongoDB에 직접 접근하는 것이 아니라, 서버에 구현된 파일 정보 조회 API에 요청을 보내도록 구성하였다.
전체적인 데이터 처리 과정은 다음과 같다.
클라우드 메인 페이지 접속
↓
클라이언트에서 서버 API 요청
↓
서버에서 MongoDB에 파일 정보 요청
↓
MongoDB에서 파일 정보 반환
↓
서버 → 클라이언트로 데이터 전달
↓
클라이언트에서 데이터 해독
↓
파일 정보를 화면에 표시
7. 이번 주 개발 결과
이번 주 개발을 통해 NMCloud의 사용자 인증부터 클라이언트 암호화 정보 관리, 클라우드 메인 페이지, 파일 정보 관리까지의 기본적인 서비스 흐름을 구축하였다.
현재까지 구현된 전체적인 흐름은 다음과 같다.
회원가입 / 로그인
↓
사용자 인증 완료
↓
IndexedDB에 암호화 관련 정보 저장
┌──────────────┼────────────────┐
평문 공개키 암호화된 비밀키 Master Key
Crypto 객체
↓
회원가입 시 복구 키 안내
↓
SPA 방식 화면 전환
↓
클라우드 메인 페이지
├── 사용자 이메일 표시
├── 저장 공간 사용량 표시
└── 파일 목록 표시
↓
파일 업로드
↓
파일 암호화
↓
업로드 상태 표시
↓
파일 정보 MongoDB 저장
↓
API를 통한 파일 정보 조회
↓
클라이언트에서 해독
↓
화면에 파일 표시
주요 개발 성과
회원가입 기능 완전 구현
로그인 기능 완전 구현
회원가입 및 로그인 성공 후 IndexedDB 데이터 저장 구현
IndexedDB에 평문 공개키 저장
IndexedDB에 암호화된 비밀키 저장
IndexedDB에 Master Key Crypto 객체 저장
회원가입 완료 후 복구 키 안내 기능 구현
SPA 방식의 페이지 전환 애니메이션 구현
로그인한 사용자의 이메일 표시 기능 구현
클라우드 저장 공간의 할당량 및 사용량 표시 기능 구현
저장 공간 사용량 게이지 UI 구현
파일 선택을 통한 파일 업로드 기능 구현
Drag & Drop 방식의 파일 업로드 구현
파일 암호화 상태 표시 기능 구현
파일 업로드 상태 표시 기능 구현
MongoDB를 이용한 파일 메타데이터 저장 구현
서버 API를 통한 파일 정보 조회 기능 구현
MongoDB에서 가져온 파일 정보를 클라이언트에서 해독 후 화면에 표시하는 기능 구현
8. 다음 주 개발 계획
다음 주에는 현재 구현되어 있는 파일 정보 관리 기능을 기반으로 실제 파일 업로드 및 다운로드 기능을 구현할 예정이다.
우선 현재 MongoDB에 저장하고 있는 파일 정보와 실제 파일 데이터를 연계하여, 사용자가 파일을 업로드했을 때 실제 파일이 서버 또는 파일 저장소에 저장되도록 구현할 계획이다.
이후 저장된 파일을 사용자가 다시 받을 수 있도록 파일 다운로드 기능까지 구현하여 기본적인 클라우드 파일 관리 기능을 완성할 예정이다.
또한 실제 파일 업로드 및 다운로드 과정에서 발생할 수 있는 다양한 상황을 고려하여 예외 처리를 보다 세밀하게 추가할 예정이다.
예를 들어 다음과 같은 상황에 대한 처리를 추가할 계획이다.
파일 업로드 실패
파일 다운로드 실패
네트워크 오류
허용되지 않은 파일 형식
파일 크기 제한 초과
저장 공간 부족
중복 파일 처리
서버 응답 오류
암호화 및 복호화 과정에서 발생하는 오류
추가적으로 업로드되는 파일이 이미지 또는 동영상인 경우 해당 파일의 썸네일을 별도로 생성하고, 생성된 썸네일 역시 암호화하여 원본 파일과 함께 관리할 수 있도록 구현할 예정이다.
이를 통해 클라우드 메인 페이지의 파일 목록에서 이미지나 동영상 파일을 단순한 파일명으로만 표시하는 것이 아니라 썸네일을 함께 표시하여 사용자가 파일의 내용을 직관적으로 확인할 수 있도록 구성할 계획이다.
마지막으로 개발 일정에 여유가 있을 경우, 지금까지 구현한 NMCloud의 주요 기능들이 실제로 어떤 방식으로 동작하는지 보여줄 수 있는 기능 시연용 예시 페이지를 제작할 예정이다.
해당 페이지에서는 NMCloud의 핵심 기능과 데이터 처리 과정을 사용자가 직접 확인할 수 있도록 구성하여, 졸업작품 발표 및 시연 과정에서 서비스의 동작 원리와 구현된 기능을 효과적으로 보여줄 수 있도록 하는 것을 목표로 한다.
답글 남기기