슬라이드쇼 서비스 on redgoose note

슬라이드쇼 서비스

Nest: Concept Category: Service 2021-06-24

기껏 슬라이드쇼 프로그램을 만들었는데 이제는 활용을 해야지..

이미지 슬라이드쇼 프로젝트는 그저 툴일 뿐이라서 실질적으로 사용하기 어려운감이 있다.
스토리지를 지원한다고 해도 다른 사람에게 공유할 수 없고, 사용하고 있는 브라우저에서만 쓸 수 있기 때문이다.

그래서 다른 사람들과 공유할 수 있는 수준으로 사용하려면 서비스 수준으로 만들어야 할것이다. 개인적으로 지속적으로 사용 가능하게 만들어서 나의 사진들을 따로 콜렉션화 하여 디스플레잉 하고 싶은데 툴만으로는 좀 어렵다.

일단 생각나는 것들을 끄적여 보자면..

  • 환경설정 잠금 및 커스터마이즈
  • 슬라이드 아이템 편집
  • 색 편집 (다크모드 고려해 봐야함)
  • 랜덤키를 생성하여 공유가 가능한 주소 만들기
  • 회원가입이나 로그인 없음
  • 슬라이드 공개 (만든 슬라이드를 공유할지에 대하여 선택한다.)

파일 업로드

이미지를 직접 올리게 해줄 수 있으면 정말로 좋지만 뭔가 약관이나 대처없이 업로드가 가능하게 하면 개인적으로 서버 인프라를 감당할 수 있는 능력이 없다.
서비스 사업으로 만들고 있는게 아니라 개인적으로 사용할 목적이기 때문에 일을 크게 벌릴 수 없다는 것이다. 그리고 어떤 이미지가 업로드 될지도 모르는 상태라서 대단히 조심스러운 부분이라고 생각한다. (야한 이미지 같은게 올라올게 뻔하기 때문에..)

그런다고 이미지를 서버에 올릴 수 없으면 슬라이드에 사용할 사진을 사용할 수 있는 방법자체가 없어진다.
그래서 무료로 이미지를 업로드하고 공유할 수 있는 서비스같은곳을 찾아서 이용할 수 있는 방법을 제공해줘야 할법하다.

슬라이드쇼 환경설정

환경설정은 보는 사람이 직접 설정할 수 있도록 열어두고 있는 편이다.

하지만 슬라이드쇼를 만드는 사람 의도로 환경설정을 고정시킬 수 있어야 한다. (다크테마를 꺼버린다거나 자동재생만 되게 한다거나..)
그럴때 환경설정을 직접 편집할 수 있도록 해야하는데 편집모드 화면이 필요해진다.
서비스에서 슬라이드 데이터나 환경설정 편집모드를 만들게 된다면 슬라이드쇼 툴과 UI가 두가지로 갈리게 되는데 기능이 추가되거나 변경된다면 두가지 버전에다 적용해야하는 번거로움이 생긴다.

그래서 슬라이드쇼 환경설정은 슬라이드쇼 툴에 맡기는게 어떨까 생각한다.
서비스에서 편집모드를 따로 만들고 편집모드로 슬라이스쇼에 진입하면 환경설정을 적용할때마다 데이터베이스에 저장한다.
편집모드로 진입하거나 저장할때 반드시 인증을 해야 할것이다.

그래서 툴에서 준비해 줘야하는게 있다.

  • 메뉴 구조의 변경이 필요하다. 기본적으로 제공되는 메뉴 왼쪽이나 오른쪽, 사이에 추가되는 커스텀 메뉴가 들어간다. 그래서 기본적으로 제공되는 메뉴는 type: 'menu'같은 형식으로 매직 키워드를 만들어두고 배열로 받는게 어떨까.. 참고) https://www.electronjs.org/docs/api/menu#examples 일렉트론은 role이라는 키값으로 시스템의 기능을 압축시켜서 사용한다.
  • 환경설정 저장하거나 복구할때의 후크가 필요하다. 기본적으로 로컬스토리지에 저장하는걸로 알고있는데 좀 확인해봐야할거 같다. 환경설정이 변경할때 tree값도 변경될때 어떻게 되는지 확인해봐야 할 필요도 있다.
  • storage 키값을 props에 추가
    로컬 스토리지를 기본적으로 사용하고 있다면 스토리지를 각자 다르게 담아서 사용할 수 있을것이다. (하지만 좋은 방법은 아닌거 같아 보인다.)

현재 슬라이드 툴 환경설정 저장 방식이 외부 컴포넌트에서 props.preferenceprops.tree로 사용되고 있다면 로컬스토리지에 저장하지 않고, @update-preference이벤트로 호출된다. 내가 미리 대비를 해놨구나.. ^ ~^

ps. 추후에 생각나는 것들이나 이슈들의 내용을 추가할 예정이다.

Comments

  • 컨텐츠 목록

    • 공유한 슬라이드 목록 (슬라이드를 선택하면 새창으로 이동)
    • 슬라이드 추가
    • 슬라이드 편집
    • 슬라이드 삭제
  • 만약 슬라이드 목록이 만들어진다면 관리자의 관리가 필요할 것이다.
    처음에는 관리자 기능없이 만들어지다가 나중에 관리자 기능을 추가해야 할것인가 좀 고민된다.

    관리자의 기능은 불량한 슬라이드를 삭제하는 기능까지만 생각해두었는데 다른것은 더이상 떠오르지 않는다.

    구글 인증이나 어시같은것으로 인증할 수 있으면 좋을거 같다.

  • 슬라이드 추가 플로우

    1. 서비스 페이지에 입장하면 목록이 나올것이다.
    2. 상단 네비게이션에서 슬라이드 추가 버튼을 누른다.
    3. 새창이 뜨거나 주소가 이동하면서 빈 슬라이드쇼 화면이 나온다.
    4. 슬라이드쇼 환경설정을 통하여 이미지를 추가하거나 설정을 한다.
    5. 별도로 만들어진 저장 버튼을 눌러서 저장한다.
    6. 작은 창이 뜨면서 아이디와 패스워드를 입력받는다.
    7. 저장이 완료되면 랜덤문자가 붙은 주소로 리다이렉트 된다.
  • 슬라이드 수정 플로우

    1. 서비스 페이지에 입장하면 목록이 나온다.
    2. 상단 네비게이션에서 슬라이드 관리 버튼을 누른다.
    3. 작은창이 열리면서 아이디와 비밀번호를 입력폼이 나온다.
    4. 아이디와 빌밀번호를 입력하면 검사를 하고 데이터가 있으면 그 데이터로 페이지가 새로 열리거나 주소를 이동한다. (그 주소는 랜덤문자로 이동한다.)
    5. 환경설정으로 이미지를 조정하거나 설정을 변경한다.
    6. 저장 버튼을 누르면 다시 아이디와 패스워드를 입력한다. (아마 아이디를 저장해놨다가 복원하는 기능도 있으면 좋을거 같다.)
    7. 저장이 완료되면 새로고침하거나 다시 리다이렉트 한다.
  • 슬라이드 삭제 플로우

    1. 서비스 페이지에 입장하면 목록이 나온다.
    2. 상단 네비게이션에서 슬라이드 관리 버튼을 누른다.
    3. 작은창이 열리면서 아이디와 비밀번호를 입력폼이 나온다.
    4. 아이디와 빌밀번호를 입력하면 검사를 하고 데이터가 있으면 그 데이터로 페이지가 새로 열리거나 주소를 이동한다. (그 주소는 랜덤문자로 이동한다.)
    5. 삭제 버튼을 누르면 비밀번호 입력을 요구하는 창이 열린다.
    6. 비밀번호를 입력하고 진행하면 검사후에 삭제를 하고 서비스 페이지로 되돌아간다.
  • 데이터베이스 테이블

    • key / int(11)
    • address / varchar(24)
    • title / varchar()
    • description / varchar()
    • body / text
    • id / varchar(24) / uniqe
    • password / varchar(42)
    • regdate / varchar()
    • editdate / varchar()

    일단 이정도만..

  • 새로운 슬라이드쇼 서비스 (노드버전)

    슬라이드쇼 서비스를 노드 서비스로 만들어볼만하다.
    그럼 db 컨트롤 부분을 노드로 코드작성해야할 법한데 이 부분은 새로운 시도라고 할 수 있다. 현재 php로 돌고 있는데 돌아가고 있는 모습을 보면 좀 부적절해 보인다.

    슬라이드쇼 모듈이 현재 vue로 작성되어있고 계속 수정되어야하기 때문에 서비스 자체를 vue로 돌리는게 나아 보인다.

    서비스 용도가 시각적으로 프리뷰를 위함이라서 SSR이 과연 유용할까 하는 생각도 든다.
    nuxt3까지 사용하기 부담되어서 그저 간단하게 구현하고 사용하고싶을 뿐이다.

    관리자 영역

    관리하기 인증화면에서 주소 항목에서 admin같은 단어로 입력하고 그에맞는 패스워드로 입력하면 비공개 데이터도 다 나오도록 하는 트릭이 필요해보인다.
    관리자 컨텐츠가 필요하다는 것이다. 흐음..

  • 비공개 슬라이드쇼

    비공개 슬라이드쇼 부분을 작업하다가 논리적인 오류에 부딪혔다.

    비공개 기능에서 패스워드는 수정권한이랑 맞물려있다. 그래서 비밀번호를 공유하면 안될거 같다.
    공유용 비밀번호를 만들어서 관리해야 한다면 만드는 입장에서 관리가 대단히 어려울 것이다.

    일단은 비공개는 단순히 비공개로 두자. 비공개로 두면 접근 못하도록 막아두고 비밀번호로 접근하면 수정이나 삭제까지 가능하도록 쿠키에 토큰 저장해두는 형식으로 구성해두는게 좋을거 같다.

    다만 삭제할때 다시 비밀번호를 입력하는 절차가 있는게 좋을지도..

    비공개 슬라이드쇼지만 일부 사람들에게 공개하고 싶을때..

    분명히 이런 패턴이 나올 것이다. 특정 사람들만 보여주고 싶을때..
    현재까지 생각해둔 방법은 공유주소 만들때 특정 토큰값을 만들어 /watch/sd2gs12wg?token=ang4fof32 형식으로 배포할 수 있을것이다.
    이렇게 되면 공개 주소용 테이블도 만들어야 할지도 모르겠다.

  • 비공개 슬라이드쇼 테이블

    높은 확률로 토큰 목록이 담긴 새로운 테이블이 만들어져야하는거 같다. 그래서 테이블 설계에 대하여 고민을 해봐야한다.

    key

    인덱싱이 되는 문자. 주소 파라메터에 사용되는 문자인데 과도하게 긴 문자를 사용하면 안될거 같다.
    어떻게 만들어지는지에 대하여 좀 고민이 필요해 보인다.

    salt 값 특정 부분을 잘라서 다른문자같이 만들 수 있을거 같다. 랜덤으로 자를 위치를 잡아도 되긴 하는데 과도한 작업 같기도 하고.. 아니면 자른 문자를 뒤집어서 저장해도 될것이다. salt값은 여러모로 쓸모가 많아 보인다.

    permission

    허용하는 기능을 기록하는 영역
    어떤 포맷으로 기록하고 사용할지는 좀 고민해볼 필요가 있다.

    watch,edit,delete 같은 모습으로 내용을 넣어도 될법하다.

    address

    토큰으로 사용하는 슬라이드 주소값

    regdate

    등록일

    expiry

    만료일. 일부러 만료시켜 비공개로 만들어버릴 수 있어 보인다. 일단 토큰을 못쓰게하는 장치로 사용할 수 있다.

  • 즐겨찾기 기능

    이 서비스가 회원가입이라는 기능이 없기 때문에 특정 사람에 대하여 정보를 보관할 수 없다.
    그렇다면 보관할 수 있는 방법은 브라우저 공간에다 보관하는 수밖에 없어보인다. 로컬스토리지나 인덱스db 같은 공간인데.. 로컬 스토리지가 무난할거 같다.

    • 슬라이드쇼 화면에서 별 아이콘을 누르면 즐겨찾기가 추가되거나 뺄 수 있다.
    • 즐겨찾기 메뉴를 누르면 즐겨찾기한 슬라이드쇼 목록이 나올 것이다.
    • 즐겨찾기는 로컬스토리지로 저장되고 주소 목록을 가져오기, 내보내기 기능도 마련되어야 할것이다.

    추가로 개발해야하는 API

    • 여러개의 주소를 보내주면 한번에 내보내주는 기능. 필요한 이유는 여러번 요청하는것보다 한번 요청하고 한번에 받는게 더 퍼포먼스적으로 좋을 것이다.
    • 스토리지 컨트롤 하는부분은 새로 점검해보자.
  • 즐겨찾기와 코인지갑과의 연결

    회원가입 기능은 따로 만들어 사용하기는 싫고(인증처리 너무 귀찮아..) 코인지갑을 연결해서 인증하는것이 좋을거 같아서 일단 끄적여본다. 작동 과정은..

    1. 슬라이드쇼 사이트에서 지갑연결 버튼을 누른다.
    2. 지갑연결 팝업이 뜨고 지갑을 선택하고 인증한다.
    3. 지갑의 정보에서 주소나 토큰값을 가져와서 db에서 정보를 찾아본다. (지갑 정보에서 어떤 요소를 사용할지에 대해서는 좀더 연구한 후에 결정할 수 있을것이다.)
    4. db 목록에 주소가 있으면 그걸로 정보를 가져온다.
    5. 데이터를 사용한다.

    관련 db 필드

    • wallet: 코인종류
    • address: 코인주소

    db 필드로 조회하는 요소는 좀 여러모로 고민해봐야 하는데 단순히 주소로만 조회하는 방식은 좀 허술하게 느껴지고 코인지갑에서 계속 유지되고 있는 토큰값이나 해시값이 있으면 그것도 같이 db에 저정할 수 있을것이다. slideshow 테이블에서 salt 필드와 비슷한 개념인듯..

    값 운영에 대해서는 좀더 고민을 해보자