[팀블로그] 개편이야기-2

어드민 화면 제작 경험에서 고려한점

셀렉트어드민을 통해 사용자는 관리자 화면을 제공함

• 관리자 화면의 관리자 화면(편집,설정)이 존재하는 상황
• 어드민 목록, 어드민 화면, 어드민 설정 사이의 흐름이 불편함 (고객 혼란, 주소 공유 어려움등 발생)
• 해결하기 위해 레이아웃 일치 (선택 메뉴, 어드민 화면, 어드민 설정)

여러가지 디자인 요소가 섞여있어서 정리가 필요함

• Bootstrap, Tailwindcss, Tailwind UI등 통일감을 주지못한 상황
• 편집자는 작업환경이기때문에 시각적 피로도가 낮고 통일감, 안정감 있는 레이아웃이 필요
• 일정상 프로젝트 편집화면만 우선 개편하고, 사용자 화면까지 디자인 통일 (기본 고객사 문제가 없기위해 더 전략이 필요)

가끔씩 단발성 페이지가 필요한 사용자층과 엄청 제대로 어드민 시스템을 만드는 사용자 층의 충돌

• 기존에는 YAML 파일 단위로 왼쪽 파일목록, 오른쪽 에디터를 표시해줌
• 파일 단위이기 때문에 메뉴, 페이지 단위나 순서까지 직접 관리하는 장점. 그러나 다른사람이 넘겨받을때는 프로젝트 구조를 파악하기 어려움
• 여러명 협업 환경에서는 하나씩 파일을 아래에 덧붙여가거나 날짜로 만들게 됨. 메뉴단위 파일보다는 협업 충돌을 막기위한 URL을 확보하고 수정하는 느낌.
• 편집, 테스트, 미리보기까지는 문제없지만 메뉴 순서, 메뉴 정책은 다같이 수정하기 어려움
• 파일이 100개가 넘어가는 순간 손대기 어려워짐. Git 연동을 하더라도 근본적 해결이 어려움

셀렉트어드민이 가장 이상적으로 생각하는 1인, 2인 이상, 50명 팀까지 고려.

• 디자인은 너무 많은 문제를 한꺼번에 해결할수없음
• Ideal한, 이상적인 사용자를 떠올려야함
• 이미 있는 사용법(폴더, 오른쪽 클릭, 드래그) 계승하기
• Figma도 매일쓰는 사람, 가끔쓰는 사람있듯 셀렉트어드민도 편집자(개발자) 접속률은 극과극

어려운 개념을 쉽게 하지말고 없애자

• 파일 단위는 명확하지만 100개 넘는 파일의 순서, 충돌을 고려하는건 너무 어려움. 어드민 특성이 자잘한 화면이(복제, 레거시 유지) 늘어남.
• 현재는 결과물을 위해 다음 과정 거침: 편집, 파일, 설정입력(메뉴, 페이지, Path, Block), 저장 또는 미리보기
• 개선된 결과는: 페이지, 설정입력(Block), 저장 또는 화면 열기
• 페이지 순서, 이름, 권한 설정, 로그 조회는 개발자가 아닌 사람이 가능하도록 전면 UI로 개편
• 개발자는 화면 설정(코드)만 고치도록 시각적 분리
• 기존 미리보기는 메뉴/탭이 안보이고 화면만 보였는데 아예 작동하는 Draft를 보도록 개선 (다른 탭이어도 Live reload 도입하여 자동 새로고침)
• 기존엔 코드가 왼쪽, 미리보기는 오른쪽이었으나, 듀얼모니터, 왼쪽 오른쪽 분리등) 코딩 환경 구성하도록함

1인 개발자도 필요한 협업, 편의 기능들

• 본인 스스로도 작업한 결과물을 까먹을때 있음. 혼자서도 메뉴와 파일을 잊어버리고 찾아 헤맴.
• 메뉴 이름, 코드에 주석, ENV 메모, IP 메모등 지원
• 페이지 그룹을 만들어서 배포함(published), 공유함(shared), 비공개(private, draft) 상태를 나누도록 개선
• 쉽게 지우기(move to trash) 기능 개선.
• Deployments 기능 개선. 기존 페이지 수정시 복제해서 수정하는 일이 빈번함. 히스토리가 보여도 저장단위가 너무작아서 확인이 어려웠음. Commit 단위로 changes를 보도록 변경

이동이 빠르고, 전체 화면을 채우는 에디터

• 로컬 IDE, 텍스트에디터(vim, emacs)가 아닌 웹페이지에서 코딩하는 경험은 고민이 많았음. 셀렉트어드민은 monaco(Visual Studio Code)를 이용하여 최대한 비슷하게 노력.
• 완전 로컬개발 vs 완전 클라우드개발 고민 끝에 클라우드 개선하기로 결정. CLI deploy 기능을 통해 추후 보완 가능. (vercel, cloudflare, fly.io등 공통 경험)
• 아무생각없이 로그인해서 어드민 자잘한 것 고쳐주는 클라우드 경험을 포기할수 없었음
• 편집에만 집중할수있도록 모든 요소 다 제거. 사실상 vscode 보다도 더 단순한 화면

자동완성, 문서는 어떻게 가야할까?

• 여러가지 시도를 해옴 (AI 생성, 문서 개편)
• 숙달된 개발자는 셀렉트어드민을 즉흥적으로 쏟아냄. 아무것도 안도와주는게 더 빠름.
• 그러나 학습곡선 가운데 있다면 문서를 항상 띄워놓고 봐야함.
• 문서를 더 Recipe 단위로 개선하기로함. Copy-and-Paste는 정말 매력적인 사용법이라고 판단.

제품 변경은 1차로 배포하고 ‘어드민 구축 본질'에 대해 고민하기로 함. 다음편