노트를 만들 결심— 그런데 이제 포기한
LAYOUT
무슨 생각이었는지는 모르겠지만, 내가 생각하는 이상적인 노트가 세상에 없는 것 같아서 그냥 만들어보자는 생각을 한 적이 있다. 결과적으로 실패했고 원하는 것을 만드는 근처에도 못 가긴 했지만 에디터까지는 만든게 있어서 기록차 포스팅을 하기로 했다. 그 앱의 이름은 LAYOUT이었는데 대충 어떤 늬앙스인지는 알겠지만 당시 왜 그렇게 지었는지 당장은 생각이 나질 않는다.
노트 컨셉은 지금 생각해보면 현재 Tana 라는 앱과 유사한데, 기술 부족으로 이 컨셉을 프로토타이핑하지는 못했고 그냥 Facebook의 lexical을 이용한 에디터와 몇 가지 컴포넌트 만듦새를 구현하는데 그쳤다. 이걸 만드는 당시에는 바이브 코딩 이전이었기 때문에 한땀 한땀 만드느라 시간이 꽤 오래 걸렸지만, 방망이 깎는 노인 느낌으로 만드는 과정에서는 꽤 재미있게 작업을 했던 기억이다. 그게 벌써 4년 전
처음에는 브라우저에서 동작하는 형태로 구현하다가 중간에 Electron 프로젝트로 변경하면서 진행했고, 만드는 중에 그만두긴 했지만 나름대로 Typography의 무게감이라던가 만듦새라던가, 사용할 때 느껴지는 가벼운 느낌은 꽤 마음에 들게 나와서 중도하차한 프로젝트이긴 했지만 나름대로의 의미가 있는 작업이다.
Tech Stacks & Library
4년 전 스택이기 때문에 지금 보면 조금 올드한 스택일 수는 있다.
현재 스택은 대체로 AI 결정해서 현재에도 유효한 스택인지는 나도 모름..
• React & Electron
• Stitches (Deprecated)
• cmdk
• dexie
• lexical
• mobx
Features
• Basic Text Editor
• Typography
• Floating Toolbar
• Light & Dark Theme
• Spotlight
• Icon Picker
• Dialog, Toast, Context Menu, Tabs
Prototype
🔗 https://layout-mu.vercel.app/#/layout
당시 프로토타이핑 중이던 Web 배포 버전이 남아있어서 남겨둠. 데이터는 브라우저의 IndexDB를 사용하므로 서버로 전송되는 정보는 아무것도 없기 때문에 막 써봐도 된다. 최종 버전과는 컬러감이라던가 UI 디테일 등이 거친 상태의 버전이다.
Shortcuts & Typography
![[object Object]](https://wmkgigdczlwvhgylvtjh.supabase.co/storage/v1/object/public/86mlmt/3139aec409e980b982ffddf1fda43e91/spotlight_v3.gif)
![[object Object]](https://wmkgigdczlwvhgylvtjh.supabase.co/storage/v1/object/public/86mlmt/3139aec409e980b982ffddf1fda43e91/sidebar_v2.gif)
![[object Object]](https://wmkgigdczlwvhgylvtjh.supabase.co/storage/v1/object/public/86mlmt/3139aec409e980b982ffddf1fda43e91/iconPicker_vid.gif)
![[object Object]](https://wmkgigdczlwvhgylvtjh.supabase.co/storage/v1/object/public/86mlmt/3139aec409e980b982ffddf1fda43e91/components.gif)
