feat: add term

public/terms/1000/1046.cognitive-load.json

@@ -0,0 +1,20 @@
+{
+	"id": 1046,
+	"slug": "cognitive-load",
+	"term": { "ko": "인지 부하", "en": "Cognitive Load" },
+	"aliases": ["인지적 부하"],
+	"summary": "사용자가 정보를 처리하고 인터페이스를 이해하며 결정을 내리는 데 필요한 정신적 노력의 양.",
+	"onelinerForNonTech": "앱을 쓸 때 머리를 얼마나 써야 하는지, 쉽게 말해 '얼마나 생각해야 하는지'를 나타내는 정도.",
+	"description": "UX/UI 디자인 목표는 사용자의 인지 부하를 최소화하는 것이다. 인터페이스가 복잡하거나 불필요한 정보가 많을 때 인지 부하가 증가하여 사용자의 오류율이 높아지고 이탈할 가능성이 커진다. 명확하고 단순한 디자인(Minimalism)이 인지 부하를 줄이는 데 유리하다.",
+	"tags": ["UX/UI", "디자인", "IT비즈니스"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1022, 1055, 1054],
+	"confusableIds": [1022],
+	"useCases": [
+		{ "role": "Design", "text": "복잡한 설정 화면에서 불필요한 옵션을 숨겨서 사용자의 인지 부하를 줄였습니다." },
+		{ "role": "PM", "text": "결제 프로세스 단계가 너무 많아 인지 부하가 높아지므로, 단계를 축소하는 방안을 논의해야 합니다." }
+	],
+	"keywords": ["cognitive-load", "인지부하", "단순성", "결정"],
+	"level": "intermediate",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1047.mental-model.json

@@ -0,0 +1,20 @@
+{
+	"id": 1047,
+	"slug": "mental-model",
+	"term": { "ko": "멘탈 모델", "en": "Mental Model" },
+	"aliases": ["정신 모형", "심적 모델"],
+	"summary": "사용자가 어떤 시스템이나 개념이 '어떻게 작동할 것'이라고 머릿속으로 가지고 있는 기대나 믿음.",
+	"onelinerForNonTech": "사용자가 앱의 특정 버튼을 보면 '이걸 누르면 이렇게 될 거야'라고 무의식적으로 예상하는 방식.",
+	"description": "효율적인 UX/UI 디자인은 사용자의 기존 멘탈 모델(예: 문서 아이콘은 파일, 돋보기 아이콘은 검색)을 따르는 것이 중요하다. 디자인이 사용자의 멘탈 모델과 일치하지 않으면 혼란이 발생하여 사용성이 떨어진다. 일관성 표준은 멘탈 모델을 유지하는 데 핵심적인 역할을 한다.",
+	"tags": ["UX/UI", "디자인", "IT비즈니스"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1022, 1055, 1046],
+	"confusableIds": [1022],
+	"useCases": [
+		{ "role": "Design", "text": "사용자의 멘탈 모델을 파악하기 위해 인터뷰를 진행하고, '저장' 아이콘은 플로피 디스크 대신 클라우드 아이콘을 사용했습니다." },
+		{ "role": "PM", "text": "새로운 기능의 작동 방식이 사용자의 멘탈 모델을 해치지 않도록 주의해야 합니다." }
+	],
+	"keywords": ["mental-model", "멘탈모델", "예상", "기대", "사용성"],
+	"level": "intermediate",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1048.eye-tracking.json

@@ -0,0 +1,20 @@
+{
+	"id": 1048,
+	"slug": "eye-tracking",
+	"term": { "ko": "아이 트래킹", "en": "Eye Tracking" },
+	"aliases": ["시선 추적"],
+	"summary": "특수 장비를 사용하여 사용자의 시선이 웹페이지나 앱의 어느 부분을 얼마나 오래 머무르는지 정량적으로 측정하는 UX 연구 기법.",
+	"onelinerForNonTech": "사용자가 화면을 볼 때 '눈동자가 어디를 따라 움직이는지'를 정확히 기록하여, 어떤 곳에 가장 관심을 두는지 파악하는 기술.",
+	"description": "히트맵 (Heatmap), 시선 경로 (Gaze Plot) 등의 데이터를 생성하여, 사용자가 인터페이스를 스캔하는 방식을 객관적으로 파악한다. 이는 시각적 계층이 의도대로 작동하는지, 혹은 중요한 정보를 놓치고 있는지를 검증하는 데 사용성 테스트를 보완하여 활용된다.",
+	"tags": ["UX/UI", "연구", "IT비즈니스"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1051, 1050, 1022],
+	"confusableIds": [1051],
+	"useCases": [
+		{ "role": "Design", "text": "아이 트래킹 결과, 사용자들이 CTA 버튼보다 주변 광고 배너에 시선을 더 많이 두는 문제가 발견되어 디자인을 수정했습니다." },
+		{ "role": "PM", "text": "핵심 콘텐츠에 대한 사용자들의 시선 집중도를 높이기 위해 아이 트래킹 연구 결과를 바탕으로 레이아웃을 개편했습니다." }
+	],
+	"keywords": ["eye-tracking", "시선추적", "히트맵", "ux연구", "정량적"],
+	"level": "advanced",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1049.ux-writing.json

@@ -0,0 +1,20 @@
+{
+	"id": 1049,
+	"slug": "ux-writing",
+	"term": { "ko": "UX 라이팅", "en": "UX Writing" },
+	"aliases": ["경험 글쓰기", "마이크로 카피"],
+	"summary": "사용자가 제품을 사용하는 과정에서 보게 되는 모든 텍스트(버튼 라벨, 오류 메시지, 툴팁 등)를 명확하고 간결하며 사용자 친화적으로 작성하는 행위.",
+	"onelinerForNonTech": "'확인' 버튼 대신 '네, 주문하겠습니다'처럼, 사용자가 다음에 어떤 일이 일어날지 정확히 이해하도록 모든 글자를 사용자 입장에서 작성하는 것.",
+	"description": "UX를 구성하는 핵심 요소 중 하나로, 텍스트를 통해 사용자의 인지 부하를 줄이고, 오류 방지를 돕는다. 브랜드의 톤앤매너를 유지하며 일관성 있게 작성하는 것이 중요하다. 마이크로 카피(Microcopy)라고도 불린다.",
+	"tags": ["UX/UI", "IT비즈니스", "디자인"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1022, 1046, 1054],
+	"confusableIds": [1022],
+	"useCases": [
+		{ "role": "Design", "text": "오류 메시지를 기술 용어 대신 사용자에게 복구 방법을 안내하는 친절한 UX 라이팅으로 전면 수정했습니다." },
+		{ "role": "PM", "text": "UX 라이팅 가이드라인을 도입하여 제품의 신뢰도를 높이고 사용자의 혼란을 줄였습니다." }
+	],
+	"keywords": ["ux-writing", "마이크로카피", "라이팅", "문구", "ux"],
+	"level": "beginner",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1050.visual-hierarchy.json

@@ -0,0 +1,20 @@
+{
+	"id": 1050,
+	"slug": "visual-hierarchy",
+	"term": { "ko": "시각적 계층", "en": "Visual Hierarchy" },
+	"aliases": ["시각 계층 구조"],
+	"summary": "인터페이스 디자인에서 크기, 색상, 대비, 위치, 여백 등을 조절하여 중요도에 따라 정보를 배열하고 사용자 시선을 유도하는 원칙.",
+	"onelinerForNonTech": "가장 중요한 정보(제목, 가격)는 가장 크고 눈에 띄는 색깔로, 덜 중요한 정보는 작고 연한 색으로 배치하여, '중요한 것부터 보게' 만드는 디자인 기술.",
+	"description": "시각적 계층은 사용자의 인지 부하를 줄이고, 페이지를 스캔할 때 가장 중요한 요소에 집중하도록 돕는다. 이는 UI 디자인의 핵심 목표이며, UX 흐름을 의도한 대로 유도하는 데 필수적이다. F-자 패턴 연구는 시각적 계층의 중요성을 뒷받침한다.",
+	"tags": ["UX/UI", "디자인", "프론트엔드"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1023, 1046, 1051],
+	"confusableIds": [1023],
+	"useCases": [
+		{ "role": "Design", "text": "CTA 버튼의 크기와 대비를 높여 다른 요소보다 시각적 계층에서 가장 높은 우선순위를 갖도록 조정했습니다." },
+		{ "role": "PM", "text": "시각적 계층이 무너져 사용자가 '구매하기' 버튼을 찾지 못하는 문제를 해결해야 합니다." }
+	],
+	"keywords": ["visual-hierarchy", "시각적계층", "대비", "색상", "우선순위"],
+	"level": "beginner",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1051.f-pattern.json

@@ -0,0 +1,20 @@
+{
+	"id": 1051,
+	"slug": "f-pattern",
+	"term": { "ko": "F-자 패턴", "en": "F-Pattern" },
+	"aliases": ["F-패턴"],
+	"summary": "사용자가 텍스트 위주의 웹페이지를 스캔할 때, 시선이 화면 상단부터 왼쪽으로 가로지르고, 중앙에서는 짧게 가로지르며, 아래로 내려가는 'F'자 모양을 형성하는 시선 이동 패턴.",
+	"onelinerForNonTech": "웹페이지를 처음부터 끝까지 꼼꼼히 읽지 않고, 제목과 왼쪽 줄만 빠르게 훑어보는 독서 방식.",
+	"description": "히트맵(Heatmap)과 같은 사용성 테스트 연구를 통해 발견된 패턴이다. 시각적 계층 디자인 시, 가장 중요한 정보(헤드라인, 메뉴)는 F자의 주요 경로(상단, 왼쪽 열)에 배치하여 사용자의 빠른 정보 획득을 돕는 데 활용된다. 모바일 환경에서는 'Z-자 패턴'이 더 흔하다.",
+	"tags": ["UX/UI", "연구", "프론트엔드"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1050, 1022],
+	"confusableIds": [1050],
+	"useCases": [
+		{ "role": "Design", "text": "사용자가 공지 사항을 놓치지 않도록 F-자 패턴의 첫 번째 가로줄에 배너를 배치했습니다." },
+		{ "role": "PM", "text": "F-자 패턴 분석 결과, 페이지의 오른쪽 하단에 배치된 광고는 효과가 매우 낮았습니다." }
+	],
+	"keywords": ["f-pattern", "f자패턴", "시선", "히트맵", "ux연구"],
+	"level": "intermediate",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1052.aesthetics-usability-effect.json

@@ -0,0 +1,20 @@
+{
+	"id": 1052,
+	"slug": "aesthetics-usability-effect",
+	"term": { "ko": "심미적 사용성 효과", "en": "Aesthetic-Usability Effect" },
+	"aliases": ["미적 사용성 효과"],
+	"summary": "사용자는 미학적으로 더 보기 좋은 디자인이, 실제 사용성이 낮더라도 사용성이 더 좋을 것이라고 인식하는 경향.",
+	"onelinerForNonTech": "보기 좋은 떡이 먹기도 좋다는 말처럼, '디자인이 예쁜 앱'은 실제 사용성이 조금 불편해도 '사용하기 좋다'고 느끼는 심리적 효과.",
+	"description": "이 효과는 UX/UI 디자인에서 심미성(Aesthetics)의 중요성을 강조하지만, 디자인만으로는 근본적인 사용성 문제를 해결할 수 없음을 시사한다. 사용자에게 긍정적인 첫인상과 인내심을 제공하여, 사소한 오류에 대한 관용도를 높이는 효과가 있다.",
+	"tags": ["UX/UI", "디자인", "IT비즈니스"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1022, 1023, 1046],
+	"confusableIds": [1023],
+	"useCases": [
+		{ "role": "Design", "text": "심미적 사용성 효과를 고려하여, 기능 업데이트 시 디자인 시스템의 비주얼 톤을 최신 트렌드에 맞게 개선했습니다." },
+		{ "role": "PM", "text": "새로운 기능의 심미적 사용성 효과를 극대화하여 사용자 만족도를 빠르게 높여야 합니다." }
+	],
+	"keywords": ["aesthetic-usability", "심미성", "미적", "사용성", "심리학"],
+	"level": "advanced",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1053.feedback-mechanism.json

@@ -0,0 +1,20 @@
+{
+	"id": 1053,
+	"slug": "feedback-mechanism",
+	"term": { "ko": "피드백 메커니즘", "en": "Feedback Mechanism" },
+	"aliases": ["사용자 피드백"],
+	"summary": "사용자의 행동(클릭, 입력, 전송 등)에 대해 시스템이 즉각적으로 응답하여, 시스템의 상태나 동작 결과를 사용자에게 알려주는 상호작용 요소.",
+	"onelinerForNonTech": "버튼을 눌렀을 때 '버튼이 들어가는 애니메이션'이나, 파일 전송 시 '현재 50% 진행 중'이라는 메시지를 보여주는 것.",
+	"description": "피드백은 사용성 원칙 중 '시스템 상태의 가시성'을 구현하는 핵심 요소이다. 지연이 발생할 때 로딩 스피너를 보여주거나, 오류 발생 시 명확한 오류 메시지를 제공하는 것이 중요하다. 적절한 피드백은 사용자가 시스템을 신뢰하고 다음 행동을 예측할 수 있게 한다.",
+	"tags": ["UX/UI", "프론트엔드", "디자인"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1022, 1054, 1046],
+	"confusableIds": [1054],
+	"useCases": [
+		{ "role": "Design", "text": "API 응답 지연이 예상될 때, 무한 스피너 대신 예상 대기 시간을 보여주는 피드백 메커니즘을 추가했습니다." },
+		{ "role": "PM", "text": "사용자에게 명확한 피드백을 제공하여, 버튼이 눌러졌는지 확인하기 위해 반복 클릭하는 행동을 줄였습니다." }
+	],
+	"keywords": ["feedback", "피드백", "시스템상태", "로딩", "상호작용"],
+	"level": "beginner",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1054.error-prevention.json

@@ -0,0 +1,20 @@
+{
+	"id": 1054,
+	"slug": "error-prevention",
+	"term": { "ko": "오류 방지", "en": "Error Prevention" },
+	"aliases": ["실수 방지"],
+	"summary": "사용자의 실수가 발생하기 쉬운 지점을 미리 파악하여, 실수가 원천적으로 불가능하거나 발생하더라도 쉽게 복구할 수 있도록 설계하는 UX 원칙.",
+	"onelinerForNonTech": "결제 버튼을 누르기 전에 '결제 금액이 맞습니까?'라고 다시 묻거나, 파일을 삭제하기 전에 '정말 삭제하시겠습니까?'라고 확인하는 것.",
+	"description": "오류 메시지를 명확히 하는 것(Error Message)보다, 오류가 발생할 가능성을 줄이는 것이 UX 의 핵심이다. 주소 입력 시 자동 완성 기능을 제공하거나, 위험한 행동 전에는 항상 확인 대화상자를 제공하는 등의 방법이 사용된다. 휴리스틱 평가의 중요한 원칙 중 하나이다.",
+	"tags": ["UX/UI", "IT비즈니스", "디자인"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1022, 1053, 1046],
+	"confusableIds": [1053],
+	"useCases": [
+		{ "role": "Design", "text": "날짜 선택 시 유효하지 않은 날짜는 아예 선택 불가능하게 만들어서 오류 방지 기능을 강화했습니다." },
+		{ "role": "PM", "text": "데이터 손실을 막기 위해 '저장' 버튼을 누르기 전에 자동으로 임시 저장하는 기능을 추가했습니다." }
+	],
+	"keywords": ["error-prevention", "오류방지", "실수", "안전", "ux원칙"],
+	"level": "beginner",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1055.consistency-standard.json

@@ -0,0 +1,20 @@
+{
+	"id": 1055,
+	"slug": "consistency-standard",
+	"term": { "ko": "일관성 표준", "en": "Consistency Standard" },
+	"aliases": ["일관성 유지", "Internal/External Consistency"],
+	"summary": "인터페이스 전반에 걸쳐 용어, 레이아웃, 액션, 시각적 요소가 동일하게 유지되도록 규정한 설계 원칙.",
+	"onelinerForNonTech": "앱의 모든 페이지에서 '뒤로 가기' 버튼은 항상 왼쪽 상단에 같은 모양으로 있어야 한다는 디자인 규칙.",
+	"description": "일관성은 사용자가 새로운 것을 배울 필요 없이 기존 지식(멘탈 모델)을 활용할 수 있게 하여 사용성을 높인다. 내부 일관성(앱 내 요소 일치)과 외부 일관성(다른 일반적인 앱과의 유사성)이 있다. 디자인 시스템과 아토믹 디자인은 일관성을 확보하는 핵심 도구이다.",
+	"tags": ["UX/UI", "디자인", "프론트엔드"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1047, 1021, 1044],
+	"confusableIds": [1047],
+	"useCases": [
+		{ "role": "Design", "text": "일관성 표준에 따라 모든 경고 메시지의 톤앤매너와 색상을 통일했습니다." },
+		{ "role": "PM", "text": "일관성 부족으로 인해 사용자가 새로운 페이지에 갈 때마다 혼란을 겪고 있어, 디자인 시스템 적용을 서둘러야 합니다." }
+	],
+	"keywords": ["consistency", "일관성", "표준", "디자인시스템", "멘탈모델"],
+	"level": "beginner",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1056.card-sorting.json

@@ -0,0 +1,20 @@
+{
+	"id": 1056,
+	"slug": "card-sorting",
+	"term": { "ko": "카드 분류", "en": "Card Sorting" },
+	"aliases": ["카드 소팅"],
+	"summary": "사용자들에게 웹사이트의 콘텐츠나 기능 목록(카드)을 보여주고, 사용자의 관점에서 가장 논리적인 그룹핑과 명칭을 정하도록 하는 UX 연구 기법.",
+	"onelinerForNonTech": "쇼핑몰의 수많은 제품 카테고리 이름을 종이에 적어주고, 고객들에게 '이것들을 어떻게 분류하고 어떤 이름을 붙이는 게 가장 쉬울까요?'라고 물어보는 실험.",
+	"description": "카드 분류는 정보 구조(Information Architecture, IA)를 설계하는 데 필수적이며, 메뉴 구조나 내비게이션의 사용성을 개선하는 데 사용된다. 사용성 테스트와 함께, 디자인 초기 단계에서 사용자의 멘탈 모델을 파악하는 데 큰 도움이 된다.",
+	"tags": ["UX/UI", "연구", "IA"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1031, 1047],
+	"confusableIds": [],
+	"useCases": [
+		{ "role": "Design", "text": "새로운 메뉴 구조를 설계하기 위해 50개의 기능 카드를 대상으로 카드 분류 테스트를 진행했습니다." },
+		{ "role": "PM", "text": "카드 분류 결과, 사용자들은 우리가 의도한 분류 방식과 완전히 다른 방식으로 정보를 그룹화하고 있었습니다." }
+	],
+	"keywords": ["card-sorting", "카드분류", "ia", "정보구조", "ux연구"],
+	"level": "advanced",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1057.ia-navigation.json

@@ -0,0 +1,20 @@
+{
+	"id": 1057,
+	"slug": "ia-navigation",
+	"term": { "ko": "IA Navigation", "en": "Information Architecture Navigation" },
+	"aliases": ["정보 구조 내비게이션", "메뉴 구조"],
+	"summary": "사용자가 웹사이트나 앱의 콘텐츠를 쉽게 찾고 이동할 수 있도록, 정보 구조를 기반으로 설계된 메뉴, 링크, 검색 등의 이동 시스템.",
+	"onelinerForNonTech": "건물의 '지도'인 IA를 바탕으로, '어디로 가야 할지'를 알려주는 건물 안의 모든 표지판, 안내판, 엘리베이터 시스템.",
+	"description": "내비게이션은 전역 내비게이션(Global Navigation), 지역 내비게이션(Local Navigation), 상황별 내비게이션 등 다양한 형태로 구성된다. 접근성과 일관성이 매우 중요하며, 잘못된 IA 내비게이션은 사용자의 혼란을 야기하고 목표 달성률을 크게 떨어뜨린다. 브레드크럼은 IA 내비게이션의 한 형태이다.",
+	"tags": ["UX/UI", "IA", "프론트엔드"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1031, 1029, 1056],
+	"confusableIds": [1029],
+	"useCases": [
+		{ "role": "Design", "text": "IA 내비게이션의 깊이가 너무 깊어 사용자가 길을 잃지 않도록, 메뉴 구조를 2단계로 단순화했습니다." },
+		{ "role": "PM", "text": "검색 기능의 활용도가 낮아, IA 내비게이션을 통해 주요 기능에 대한 직접 접근성을 높였습니다." }
+	],
+	"keywords": ["ia-navigation", "내비게이션", "메뉴", "ia", "정보구조"],
+	"level": "intermediate",
+	"updatedAt": "2025-11-30"
+}

public/terms/1000/1058.design-token.json

@@ -0,0 +1,20 @@
+{
+	"id": 1058,
+	"slug": "design-token",
+	"term": { "ko": "디자인 토큰", "en": "Design Token" },
+	"aliases": ["디자인 변수"],
+	"summary": "디자인 시스템에서 색상 값, 폰트 크기, 여백 등 시각적 속성을 이름으로 정의한 재사용 가능한 변수.",
+	"onelinerForNonTech": "앱의 모든 파란색을 'primary-color'라는 이름으로 정의해 두고, 나중에 파란색을 보라색으로 바꿀 때 'primary-color'만 바꾸면 모든 파란색이 한 번에 바뀌도록 하는 코드 변수.",
+	"description": "디자인 토큰은 디자인 툴과 실제 개발 코드(CSS, Sass, JavaScript 등) 간의 간극을 메워주는 역할을 한다. 디자이너가 토큰을 변경하면, 개발 환경의 코드가 자동으로 업데이트되어 UI의 일관성을 보장하고, 테마 변경(Theming)을 용이하게 한다. 아토믹 디자인 구현에 필수적이다.",
+	"tags": ["UX/UI", "디자인", "프론트엔드"],
+	"primaryTag": "UX/UI",
+	"relatedIds": [1021, 1044, 1055],
+	"confusableIds": [1041],
+	"useCases": [
+		{ "role": "Dev", "text": "모든 스타일 값을 디자인 토큰으로 대체하여, 디자이너가 피그마(Figma)에서 색상을 변경하면 자동으로 반영되도록 했습니다." },
+		{ "role": "Design", "text": "다크 모드 구현을 위해 'background-primary' 토큰의 값을 변경하여 모든 컴포넌트에 일괄 적용했습니다." }
+	],
+	"keywords": ["design-token", "토큰", "디자인시스템", "figma", "css"],
+	"level": "advanced",
+	"updatedAt": "2025-11-30"
+}