사람함께에이전트▾
사람 — 직접 정하고 책임지는 비즈니스 규칙과 흐름. 직접 읽어보세요.
함께 — 개념은 알아두고, 세부 규칙은 에이전트가 따릅니다.
에이전트 — 에이전트가 따르는 규칙과 레퍼런스. 필요할 때 찾아보세요.
파일 규칙
폴더 이름은 파일이 어떤 비즈니스 영역에 속하는지 알려줍니다. 파일 이름은 그 비즈니스 영역 안에서 어떤 역할을 하는지 알려줍니다. 예를 들어 product.document.ts는 저장되는 상품 데이터를 설명하고, Product.View.tsx는 상품 데이터를 화면에 어떻게 보여줄지 설명합니다.
모듈을 작은 비즈니스 부서라고 생각하면 쉽습니다. product 모듈은 상품에 어떤 필드가 있는지, 어떻게 저장하는지, 사용자가 어떻게 요청하는지, 관리자 화면에서 어떻게 보여줄지까지 다룰 수 있습니다. 각 파일은 그중 하나의 역할을 맡습니다.
lib/product/
비즈니스 의미: 파일 접미사는 해당 모델에서 어떤 일을 담당하는지 설명합니다.
작게 시작: 모든 파일이 항상 필요한 것은 아닙니다. 비즈니스 기능에 필요할 때만 추가하면 됩니다.
모듈 파일
이 파일들은 비즈니스 모델의 데이터, 서버 로직, API 표면, 상태를 설명합니다. 상품, 주문, 사용자, 청구서, 예약 같은 기능을 만들 때 가장 자주 다루게 됩니다.
abstract 파일은 LLM만을 위한 파일이 아닙니다. 도메인 지식을 코드 옆에 두어 사람과 agent가 구현 파일을 수정하기 전에 비즈니스 불변 조건을 이해할 수 있게 합니다.
UI 접미사 다섯 개도 컴포넌트의 크기 다섯 단계가 아닙니다. 각각 다른 질문에 답합니다. 사용자가 한 레코드를 어떻게 편집하는지, 목록에서 한 레코드가 어떻게 보이는지, 단독 페이지에서 어떻게 보이는지, 페이지 구역이 어떻게 조립되는지, 그리고 모델이 제공하는 부가 동작이 무엇인지입니다. 각 행의 맨 앞은 그 파일이 클라이언트 경계의 어느 쪽에 있는지입니다:
파일설명
model.abstract.md
shared — 모듈 코드 옆에 두는 비즈니스 의도, 도메인 규칙, 워크플로우, agent 주의사항입니다.
model.constant.ts
shared — 상수, 상태값, 기본 옵션, 모델에서 공유하는 타입을 둡니다.
model.dictionary.ts
shared — 모델에서 쓰는 라벨, 필드 이름, 문구 키를 둡니다. 예: 가격 라벨.
model.document.ts
server — 저장되는 데이터 형태, 필터, 문서 모델 정의를 둡니다.
model.service.ts
server — 서버 측 비즈니스 로직을 둡니다. 예: 주문 생성, 쿠폰 적용.
model.signal.ts
shared — 페이지에서 호출할 수 있는 공개 동작, slice, endpoint, 내부 작업을 둡니다.
model.store.ts
client — 여러 화면에서 쓰는 클라이언트 상태 또는 모델 상태입니다. 예: 선택된 필터, 장바구니.
Model.Template.tsx
client — 생성과 수정 폼입니다. st.use.productForm()을 읽고 생성된 setter로 값을 씁니다.
Model.Unit.tsx
server — 목록이나 그리드의 한 항목(행, 카드 등)이며, 축약 형태인 LightProduct를 받습니다.
Model.Util.tsx
client — 도메인 UI 보조 컴포넌트이며, endpoint 동사에서 모델 명사를 뺀 이름(Refund 등)을 씁니다.
Model.View.tsx
server — 레코드 하나의 상세 화면입니다. 목록에서 불러오지 않는 필드까지 담은 전체 모델을 받습니다.
Model.Zone.tsx
client — 페이지 구역을 조립합니다. 스토어 데이터를 Load.Units나 Load.View에 넘기고 마크업은 Unit과 View에 맡깁니다.


클라이언트 경계는 판단이 아니라 접미사를 따릅니다. Template, Zone, Util은 언제나 1번 줄에 "use client"를 두고, Unit과 View는 절대 두지 않습니다. 그래서 Unit과 View는 서버에서 렌더링되고 JavaScript를 전송하지 않습니다.
이름 규칙
Akan 파일 이름은 두 가지 패턴을 사용합니다. 비즈니스 핵심 파일은 모델 이름을 lower camel case로 쓰고, UI 파일은 PascalCase로 씁니다.
이 규칙을 지키면 모듈을 눈으로 훑기 쉬워집니다. lib/product/를 열었을 때 product.* 파일은 비즈니스 로직이고 Product.* 파일은 UI라는 것을 바로 알 수 있습니다. 새 조회, 화면 컴포넌트, 서버 동작을 어디에 추가할지 빠르게 판단할 수 있습니다.
비즈니스 파일
UI 파일


모듈 폴더 안에서는 이 규칙을 벗어난 임의의 파일 선언을 금지합니다. 예를 들어 product.helper.ts나 ProductComponents.tsx는 product.service.ts, Product.Util.tsx, Product.Unit.tsx처럼 가장 가까운 허용 역할로 옮겨야 합니다.
Facet 파일과 Barrel
ui/와 webkit/ 아래 파일은 보통 @apps/myapp/ui, @libs/shared/webkit 같은 barrel 파일을 통해 export됩니다. import를 예측하기 쉽고 최적화하기 좋게 유지하려면, 한 파일에는 대표 export 하나를 두고 파일명과 export 이름을 맞추는 것을 권장합니다.
이 규칙은 비즈니스가 커질수록 특히 유용합니다. 스토어, 관리자 앱, 파트너 앱이 모두 ProductCard를 가져다 쓰더라도 실제 구현 위치를 자세히 알 필요가 없습니다.
✅ 권장
❌ 피하기
ui/: 재사용 가능한 화면 컴포넌트에 사용합니다. 예: ProductCard.tsx는 ProductCard를 export하는 것이 좋습니다.
webkit/: 브라우저/클라이언트 hook과 helper에 사용합니다. 예: usePaymentStatus.tsx는 usePaymentStatus를 export하는 것이 좋습니다.
Barrel Imports
페이지는 깊은 파일 경로 대신 패키지 진입점에서 비즈니스 이름으로 import합니다.
page/store/products.tsx
모듈별 차이
모든 폴더 타입이 모든 파일 타입을 쓰는 것은 아닙니다. database module은 전체 파일 구성을 가질 수 있고, service module은 동작 중심이며, scalar module은 재사용 값 정의 중심입니다.
폴더의 비즈니스 역할에 따라 파일 구성을 선택합니다. product는 저장하는 대상이므로 document와 store 파일을 가질 수 있습니다. _payment는 수행하는 기능이므로 보통 service와 signal 중심입니다. money는 재사용 값 형태이므로 작고 정의 중심으로 유지합니다.
파일
database
lib/product/
파일 12개
service
lib/_payment/
파일 7개
scalar
lib/__scalar/money/
파일 6개
비즈니스 파일
model.abstract.md
✓
✓
✓
model.constant.ts
✓
✓
model.dictionary.ts
✓
✓
✓
model.document.ts
✓
✓
model.service.ts
✓
✓
model.signal.ts
✓
✓
model.store.ts
✓
✓
UI 파일
Model.Template.tsx
✓
✓
Model.Unit.tsx
✓
✓
Model.Util.tsx
✓
✓
Model.View.tsx
✓
Model.Zone.tsx
✓
✓
✓이 모듈에 둘 수 있음이 모듈에는 둘 수 없음
이름이 달라지는 것은 abstract 파일 하나입니다. service 모듈은 폴더의 밑줄을 빼므로 lib/_payment/에는 payment.abstract.md를 둡니다.
자주 하는 선택
어떤 파일을 만들어야 할지 모르겠다면, 해결하려는 비즈니스 질문에서 시작하면 됩니다.
예를 들어 '고객이 주문을 볼 수 있나요?'는 View로 이어집니다. '고객이 주문을 취소할 수 있나요?'는 signal과 service로 이어집니다. '주문이 어떤 필드를 저장하나요?'는 document로 이어집니다.
질문설명
이 데이터를 저장하나요?
model.document.ts서버에서 처리하나요?
model.service.ts페이지에서 호출하나요?
model.signal.ts레코드 하나가 자기 페이지를 갖나요?
Model.View.tsx목록의 한 항목인가요?
Model.Unit.tsx사용자가 값을 입력하나요?
Model.Template.tsx도메인 UI 액션인가요?
Model.Util.tsx큰 화면 영역인가요?
Model.Zone.tsx