Skip to content

Commit 15ca16c

Browse files
committed
update post
1 parent dc73ecf commit 15ca16c

File tree

9 files changed

+181
-61
lines changed

9 files changed

+181
-61
lines changed

content/posts/프로젝트/괴담집/괴담집 프로젝트에 Prisma와 Supabase 설정하기.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags:
55
- prisma
66
- supabase
77
createdAt: 2025-07-06 12:55:16
8-
modifiedAt: 2025-07-08 08:25:36
8+
modifiedAt: 2025-07-20 14:07:40
99
publish: 프로젝트/괴담집
1010
related:
1111
- "[[괴담집]]"
@@ -51,6 +51,7 @@ Claude는 SQL의 View를 활용하여 Strapi로 관리되는 테이블중 필요
5151
##### SQL 문을통해 View 생성하기
5252

5353
![sql view 생성](_assets/attachments/괴담집/sql-view-create.png)
54+
5455
Claude의 도움을 받아 필요한 객체의 형태를 가져올 수 있도록 View를 생성할 수 있는 SQL 문을 만들었고 해당 문을 Supabase의 SQL Editor에 붙혀넣고 실행하여 View를 생성하였다.
5556

5657
- 에셋을 가져오기 위한 SQL 문
Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
tags:
3+
- project
4+
- goedamjip
5+
- dev
6+
createdAt: 2025-07-18 12:54:33
7+
modifiedAt: 2025-07-22 14:32:30
8+
publish: 프로젝트/괴담집
9+
related:
10+
- "[[괴담집]]"
11+
series: ""
12+
---
13+
14+
# 괴담집 프로젝트의 Asset 필드 정리하기
15+
16+
![괴담집 에셋 필드](_assets/attachments/괴담집/strapi-asset-fields.png)
17+
18+
프로젝트를 개발하던중 에셋을 저장한 구조에 대해 불편함을 느끼기 시작하였다. 현재 프로젝트에서 에셋이 가장 중요한 역할을 하고있기 때문에 후에 다양한 효과의 추가와 관리를 위해선 좀 더 확실한 분류와 정리가 필요하다는 생각이 들었다.
19+
20+
## 개발중에 느낀 불편함과 문제점
21+
22+
Prisma를 통해 에셋들을 가져올때부터 실제로 음향을 적용하여 테스트하고 strapi를 통해 새로운 효과를 추가혈때 모든 과정에서 불편함들을 느꼇다.
23+
24+
### Asset을 가져올때의 문제점
25+
26+
처음 Gemini를 활용하여 고민을 하였고 에셋들을 `SOUND`,`AMBIENCE`,`VISUAL`,`TEXT`,`PAUSE` 5가지의 카테고리로 분류하였다.
27+
소리 음향의 경우 `Howler.js`를 통해 로드를 하게 되는데 지금은 소리에 관련된 배경음과 효과음 두개가 나눠져 있어 에셋을 가져와서 필터링하는데에 코드가 좀 길어진다.
28+
29+
먼저 모든 에셋들에 대한 정보를 가져오고 이후에 필터링을 거쳐서 사운드와,효과음에 해당하는 효과들만 필터링하여 넘거야 한다.
30+
31+
만약 `SOUND``AMBIENCE` 두개를 합치면 에셋을 가져올때부터 필터링이 가능하기 때문에 더 깔끔해질것으로 생각된다.
32+
33+
### 겹치는 필드들
34+
35+
처음 Gemini와 대화하여 만들게된 필드중 에셋들에 대한 설명을 담고있는 필드를 살펴보면 display_name, description, usage_guide, keywords 총 4개의 필드를 통해 에셋에 대한 설명을 하고 있다. 이 설명들은 사용자나 개발자가 아닌 ai가 새로운 프롬프트를 만드는 RAG로서 사용하려는 목적이기 때문에 만들게 되었다.
36+
37+
하지만 문제는 필드의 역할이 모호하고 겹치는 부분이 있어 사람이 새로운 에셋을 추가하려고 할때 내용을 어떤식으로 추가해야하는지 겹치는 부분때문에 확실하지 않다는 것이다.
38+
39+
description 하나로 통합하고 tag를 사용해 ai의 이해를 도울 생각이다.
40+
41+
### 에셋들의 세부 사항
42+
43+
음향들을 가져와서 실제로 사용하면서 각각 음향들의 사용 성격이 달라 좀 불편했다.
44+
예를 들어 어떤 심장소리의 경우 두근 두근 거리는 소리가 충분히 길게 이어져 소리를그냥 한번 재생하면 충분했지만 다른 소리의 경우 짧게 두근 거리는 소리가 한번이라 코드를 통해 5번을 반복하게 하는등 고정을 시켜야 했다. 하지만 이렇게 되면 에셋을 확인하면서 코드를 하나씩 수정해주어야 하기 때문에 일이 두배가 될수 있다. 따라서 json을 담은 하나의 필드를 만들고 그 안에 에셋을 저장하면서 에셋을 확인하고 해당 에셋이 반복이 필요한지 아니면 특정 구간만 사용해야 하는지등에 대한 설정을 하게 된다면 코드를 불편하게 수정할 필요가 사라질 것이다.
45+
46+
## 어떻게 바꿀것인가
47+
48+
먼저 카테고리를 수정하여 SOUND, VISUAL, TEXT 3가지로 나누고 불필요한 필드를 삭제하고 다시 작성할 것이다.
49+
50+
또한 properties라는 json 필드를 만들어 유연하게 다른 속성들을 추가할 수 있도록 할 예정이다.
51+
52+
### 필드
53+
54+
불필요한 모든 필드를 삭제하고 단순하게 `이름`,`카테고리`,`파일`,`설명`,`태그`로만 나눌것이다.
55+
56+
### 그룹화
57+
58+
서브카테고리를 삭제하고 태그에 그룹화할수 있는 요소를 추가함으로서 대체한다.
59+
60+
### 설명 작성법
61+
62+
1. 소리의 주체: 무엇이 내는 소리인가?
63+
64+
- 소리의 근원을 명확히 밝힌다.
65+
- 예시: 문,발걸음,괴물,기계,바람
66+
67+
2. 소리의 특성: 어떻게 들리는 소리인가?
68+
69+
- 소리의 질감, 높낮이, 길이, 빠르기 등을 묘사하는 형용사를 사용한다.
70+
- 예시: 날카로운, 묵직한, 울리는,젖은, 마른, 느린, 빠른, 끊어지는
71+
72+
3. 상황과 환경: 어디서 어떤 상황에서 들리는 소리인가?
73+
74+
- 소리가 발생하는 공간적, 상황적 배경을 제시한다.
75+
- 예시: 텅 빈 복도에서, 비 오는 창밖에서, 숨 막히는 정적 속에서, 격렬한 싸움중에
76+
77+
4. 감정적 효과: 듣는 이에게 어떤 감정을 유발하는가?
78+
79+
- 이 소리가 이야기에 기여하는 감정적, 심리적 효과를 설면한다.
80+
- 예시: 불안감, 긴장감, 충격, 공포, 소름, 슬픔
81+
82+
- 좋은 예시 vs 나쁜 예시
83+
- 나쁜 예:
84+
"문 삐걱거리는 소리."
85+
(→ 너무 단순하여 AI가 어떤 상황에 써야 할지 충분히 알 수 없다.)
86+
- 좋은 예:
87+
"(주체) 낡고 무거운 나무 문이 (특성) 신경을 긁는 듯 '끼이이익'하고 (상황) 정적 속에서 아주 느리게 열리는 소리. 듣는 이에게 (감정) 숨 막히는 긴장감과 불길한 예감을 준다."
88+
89+
### 태그 작성법
90+
91+
#### 중분류
92+
93+
- 역할: 이 에셋이 어떤 맥락과 목적으로 사용되는지 정의한다.
94+
95+
##### 청각 효과 분류
96+
97+
1. 충격과 파괴 (Impact & Destruction)
98+
- 역할: 갑작스러운 사건, 점프 스케어, 파괴적인 상황을 표현한다.
99+
- 태그 예시: impact, crash, slam, break, explosion
100+
101+
2. 움직임과 접근 (Movement & Approach)
102+
- 역할: 인물이나 미지의 존재가 움직이거나 다가오는 것을 묘사한다.
103+
- 태그 예시: footstep, movement, run, approach, slither
104+
105+
3. 심리적 반응 (Psychological Response)
106+
- 역할: 등장인물의 내면적인 공포, 불안, 긴장 등 심리 상태를 표현한다.
107+
- 태그 예시: heartbeat, breathing, whisper, psychological
108+
109+
4. 환경음과 자연 (Environment & Nature)
110+
- 역할: 이야기의 배경이 되는 자연 환경이나 날씨를 묘사한다.
111+
- 태그 예시: nature, weather, rain, wind, animal
112+
113+
5. 기계와 도시 (Mechanical & Urban)
114+
- 역할: 문명과 관련된 기계 장치나 도시의 소음을 표현한다.
115+
- 태그 예시: machine, device, urban, technology, electronic
116+
117+
6. 초자연적 존재 (Supernatural Presence)
118+
- 역할: 괴물, 유령 등 비현실적인 존재나 기이한 현상을 나타낸다.
119+
- 태그 예시: creature, monster, supernatural, eerie
120+
121+
7. 물체 상호작용 (Object Interaction)
122+
- 역할: 특정 물건이나 재질이 만들어내는 소리를 표현한다.
123+
- 태그 예시: material, object, metal, wood, liquid
124+
125+
8. 음악 및 톤 (Music & Tone)
126+
- 역할: TENSION_MUSIC처럼 명확한 멜로디나 화성이 있는 배경음악, 또는 톤에 가까운 효과들을 따로 관리한다.
127+
- 태그 예시: drone, music, ambience
128+
129+
##### 시각 효과 분류
130+
131+
1. 화면 전체 효과 (Full Screen Effects)
132+
- 역할: 화면 전체에 영향을 주어 상황의 긴박감이나 상태 변화를 표현한다.
133+
- 태그 예시: fullscreen, shake, flash, invert
134+
135+
2. 오버레이와 이미지 (Overlays & Images)
136+
- 역할: 화면 위에 이미지를 덧씌워 시각적 정보를 직접적으로 전달한다.
137+
- 태그 예시: overlay, image, splatter, handprint
138+
139+
3. 필터와 왜곡 (Filters & Distortion)
140+
- 역할: 화면의 색감이나 형태를 왜곡하여 비현실적인 느낌을 준다.
141+
- 태그 예시: filter, distortion, glitch, grain
142+
143+
##### 텍스트 효과
144+
145+
1. 등장과 퇴장 (Entrance & Exit)
146+
- 역할: 텍스트가 나타나고 사라지는 방식을 제어한다.
147+
- 태그 예시: appear, disappear, fade, reveal
148+
149+
2. 움직임과 변형 (Motion & Transform)
150+
- 역할: 텍스트의 위치나 형태를 바꾸어 동적인 느낌을 준다.
151+
- 태그 예시: motion, shake, float, jitter
152+
153+
3. 스타일과 강조 (Style & Emphasis)
154+
- 역할: 텍스트의 색상, 밝기 등 스타일을 바꾸어 특정 내용을 강조한다.
155+
- 태그 예시: color, glow, style, blur
156+
157+
#### 소분류
158+
159+
- 역할: 소리의 구체적인 원이니나 특징을 명시한다.
160+
161+
##### 청각 효과 분류
162+
163+
- 역할: 소리의 구체적인 원인이나 특징을 명시한다.
164+
- 태그 예시: 문 (Door), 발걸음 (Footstep), 심장박동 (Heartbeat), 비 (Rain), 전화기 (Phone), 괴물 (Creature)
165+
166+
## 백터DB
167+
168+
이후에 백터DB를 적용하는데에도 변경된 형식이 더 잘어울린다.
169+
벡터DB를 적용하기 위해서는 현제의 워크플로우를 변형하고 개편해야 한다.

content/posts/프로젝트/괴담집/괴담집-Asset 필드 정리하기.md

Lines changed: 0 additions & 50 deletions
This file was deleted.

public/link-map.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"0.inbox/가상DOM의 원리.md": "자원/React/가상DOM의 원리",
3-
"0.inbox/괴담집-Asset 필드 정리하기.md": "프로젝트/괴담집/괴담집-Asset 필드 정리하기",
3+
"0.inbox/괴담집 프로젝트의 Asset 필드 정리하기.md": "프로젝트/괴담집/괴담집 프로젝트의 Asset 필드 정리하기",
44
"3.resource/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기.md": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",
55
"3.resource/Windows/Windows에 환경변수 설정하기.md": "자원/Windows/Windows에 환경변수 설정하기",
66
"3.resource/Windows/Windows에서 AutoHotkey를 활용해 esc를 눌러 영문으로 전환하기.md": "자원/Windows/Windows에서 AutoHotkey를 활용해 esc를 눌러 영문으로 전환하기",

public/meta-data.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111
"publish": "자원/React"
1212
},
1313
{
14-
"urlPath": "프로젝트/괴담집/괴담집-Asset 필드 정리하기",
15-
"title": "괴담집-Asset 필드 정리하기",
14+
"urlPath": "프로젝트/괴담집/괴담집 프로젝트의 Asset 필드 정리하기",
15+
"title": "괴담집 프로젝트의 Asset 필드 정리하기",
1616
"summary": "",
1717
"image": "",
1818
"tags": ["project", "goedamjip", "dev"],
1919
"series": "",
2020
"createdAt": "2025-07-18 12:54:33",
21-
"modifiedAt": "2025-07-18 16:00:59",
21+
"modifiedAt": "2025-07-22 14:32:30",
2222
"publish": "프로젝트/괴담집"
2323
},
2424
{
@@ -656,7 +656,7 @@
656656
"tags": ["project", "goedamjip", "prisma", "supabase"],
657657
"series": "",
658658
"createdAt": "2025-07-06 12:55:16",
659-
"modifiedAt": "2025-07-08 08:25:36",
659+
"modifiedAt": "2025-07-20 14:07:40",
660660
"publish": "프로젝트/괴담집"
661661
},
662662
{

0 commit comments

Comments
 (0)