[Claude] 태그 - 시리얼

7월 1일 Notion 3.6 업데이트로 HTML 블록이 정식 출시됐습니다. 노션 페이지 안에서 ROI 계산기를 돌리고, 주간 보고 대시보드를 펼치고, 심지어 테트리스를 칠 수 있다면 어떨까요? HTML 블록은 임베드가 아니라, 노션 안에서 바로 동작하는 미니 앱입니다.

이번 글에서는 직접 써 보며 정리한 만드는 방법, 실전 활용, 한계와 우회법을 영상과 함께 정리했습니다.

HTML 블록이란?

웹사이트와 앱의 대부분은 HTML, CSS, JavaScript로 만들어집니다. HTML 블록은 이 세 가지를 노션 페이지 한 칸 안에 넣을 수 있게 해 주는 새 블록 유형이에요.

HTML, CSS, JavaScript — 코딩 몰라도 괜찮아요

HTML 블록 설명을 보면 HTML, CSS, JavaScript(줄여서 JS)라는 단어가 자주 나옵니다. 개발자가 아니어도 역할만 이해하면 충분합니다. 집을 짓는다고 생각해 보세요.

HTML은 뼈대입니다. “여기에 제목이 있고, 여기에 입력 칸이 있고, 여기에 버튼이 있다”처럼 무엇이 어디에 있는지를 정합니다. 노션으로 치면 블록의 종류와 순서를 정하는 것과 비슷합니다.

CSS는 꾸미기입니다. 글자 크기, 색상, 여백, 둥근 모서리, 카드 배경색처럼 어떻게 보일지를 담당합니다. 노션에서 텍스트 색을 바꾸거나 콜아웃 스타일을 고르는 것과 같은 역할이에요.

JavaScript (JS)는 움직임입니다. 버튼을 누르면 숫자가 계산되고, 필터를 클릭하면 목록이 바뀌고, 게임 캐릭터가 움직이는 것처럼 사용자 행동에 반응하는 부분입니다. HTML이 “계산기 틀”이라면, JS는 “실제로 계산해 주는 엔진”입니다.

세 가지가 합쳐져야 계산기, 대시보드, 퀴즈 같은 인터랙티브 UI가 완성됩니다. 직접 코드를 작성할 필요는 없습니다. Notion AI, Claude, Cursor에게 “부가세 계산기 만들어줘”라고 말하면 AI가 HTML·CSS·JS를 알아서 작성해 줍니다. 우리는 결과물이 잘 동작하는지 확인하고, 필요하면 “색을 더 진하게”, “입력 칸 하나 더 추가해줘”처럼 수정을 요청하면 됩니다.

슬래시 메뉴에서 /HTML을 입력하면 블록을 만들 수 있습니다. 계산기, 퀴즈, 조직도, 화이트보드, 미니 게임, 프로세스 다이어그램처럼 클릭·입력·드래그가 필요한 것을 페이지 안에 바로 넣을 수 있습니다. 블록 너비를 조절할 수 있고, 팝업 모드로 전환하면 전체 화면에 가깝게 볼 수도 있습니다.

요금제 안내도 미리 알아두시면 좋습니다.

기능	이용 가능 범위
HTML 블록 보기·사용	모든 요금제 (무료 포함)
HTML 블록 AI로 생성 (Notion AI)	Business, Enterprise
다른 사람이 만든 HTML 공유·배포	모든 요금제

HTML 블록 자체는 무료 플랜에서도 됩니다. Notion AI로 “만들어줘” 하는 건 Business 이상이에요. Notion AI가 없으면 Claude + Notion MCP로 노션에 직접 생성하거나, Claude·Cursor로 코드를 만든 뒤 업로드하면 됩니다.

만드는 방법 3가지

1. Notion AI로 만들기

노션 페이지에서 /HTML을 입력한 뒤, AI에게 원하는 기능을 한국어로 구체적으로 설명하면 됩니다. Notion AI로 만들면 노션 기본 디자인 시스템이 자동 적용돼서, 주변 블록과 자연스럽게 어울립니다.

핵심 프롬프트 한 줄 — 이 문구가 없으면 코드만 출력되고 HTML 블록이 생성되지 않습니다.

HTML 임베드 블록을 생성한 후 실행해줘

수정은 노션 안에서 코드를 직접 편집하는 방식이 아닙니다. “숫자 포맷을 원화로 바꿔줘”, “입력 항목 하나 더 추가해줘”처럼 AI에게 다시 요청하거나, HTML 파일을 다운로드해서 편집한 뒤 재업로드하는 방식으로 진행합니다.

2. Claude · ChatGPT · Cursor로 만들기

Notion AI가 없거나, 이미 Claude·Cursor 워크플로우에 익숙하다면 외부 AI로 HTML을 만든 뒤 노션에 올리면 됩니다.

AI에게 HTML/CSS/JS 단일 파일로 생성 요청
브라우저에서 미리보기 확인
.html 파일로 저장
노션 HTML 블록에 업로드

복잡한 HTML, 브랜드 디자인 시스템, 여러 버전을 관리하는 작업은 Cursor가 특히 편합니다. 프로젝트 폴더에 design.md를 두고 참조시키면 납품 품질을 반복 생산하기 좋습니다.

3. 노션 MCP + Claude로 만들기

Claude 등 외부 AI에 Notion MCP를 연결하면, HTML 블록을 노션 페이지에 직접 생성할 수 있습니다. 파일을 다운로드했다가 다시 업로드하는 단계 없이, AI가 MCP를 통해 노션 안에 HTML 블록을 만들어 줍니다.

Claude(또는 MCP를 지원하는 AI)에 Notion MCP 연결
만들고 싶은 위젯을 설명하고, “@페이지명”으로 삽입할 노션 페이지 참조
“HTML 임베드 블록을 생성한 후 실행해줘” 문구 포함
AI가 MCP로 HTML 블록을 생성 → 노션 페이지에서 바로 확인

Notion AI 없이 Business 플랜 이상이 필요한 “노션 안에서 AI 생성” 흐름을 쓰기 어려울 때, MCP + Claude 조합이 특히 유용합니다. @design.md, @프로젝트 DB처럼 노션 페이지를 참조시키면 Notion AI와 비슷하게 맥락 있는 HTML 블록을 받을 수 있어요.

다만 MCP로 HTML 블록을 생성할 수 있다는 것과, HTML 블록이 DB와 실시간으로 연동된다는 것은 별개입니다. MCP 생성도 결과물은 생성 시점 스냅샷이며, DB가 바뀌어도 HTML은 자동 갱신되지 않습니다.

실전 사례 — 컨설팅 주간 HTML 보고

이번 영상의 메인 시연은 실제 컨설팅 프로젝트 DB와 할 일 DB를 참조해 주간 업무 보고를 HTML로 받는 워크플로입니다.

준비물

@design.md — 디자인 가이드 페이지
@컨설팅 프로젝트 DB — 프로젝트 현황
@할 일 DB — 이번 주 할 일

프롬프트 예시 (영상 자료 prompts_gift.md 1-B와 동일)

[디자인 가이드 문서]와 [프로젝트 DB], [할 일 DB] 데이터를 기반으로 주간 업무 보고서를 구현하는 단일 HTML 코드를 작성해 줘. 대괄호 부분은 실제 문서와 데이터베이스로 연결해서 사용할게.

출력 형식: 외부 파일 참조 없이 하나의 HTML 안에 CSS와 JS를 모두 포함할 것
Notion 최적화: Notion HTML 블록(Embed)에 삽입 시 정상적으로 렌더링 및 작동할 것
데이터 처리: 참조한 DB 데이터를 스냅샷 형태로 HTML 내부에 직접 포함시켜 화면에 렌더링할 것
UI/UX 설계: 데이터 특성을 분석하여 KPI, 필터, 카드 배치 등 세부 레이아웃을 가장 효과적인 대시보드 형태로 구성할 것
디자인 시스템: 참조한 디자인 가이드 문서의 스타일 규칙을 엄격하게 적용할 것
안내 문구: 보고서 내에 "이 보고서는 DB 스냅샷 기준이며, 실시간 연동되지 않습니다."라는 문구를 명확히 표시할 것
출력 제한: 부가적인 설명 없이 완성된 HTML 코드만 출력할 것

결과물에는 KPI 4카드, 프로젝트별 현황, 할 일 필터(완료/진행/마감임박)가 포함됩니다. Status 필터를 클릭하면 상태별로 목록이 바뀌지만, 이 상태는 내 브라우저에만 저장됩니다.

PDF 추가 팁 — 노션 기본 차트·대시보드는 PDF로 내보내면 레이아웃이 깨지는 경우가 많습니다. HTML 블록으로 대시보드를 만든 뒤 Agent에게 “PDF 만들어서 이 페이지에 넣어줘”라고 요청하면, 같은 페이지에 HTML(인터랙티브) + PDF(공유·인쇄용)를 함께 둘 수 있습니다.

HTML 템플릿 재활용 — 레이아웃 고정의 정석

노션 HTML 블록은 디자인을 블록 안에서 직접 수정할 수 없습니다. AI에게 “템플릿 유지, 데이터만” 요청해도 레이아웃이 조금씩 달라질 수 있어요.

디자인이 마음에 들면 아래 흐름으로 레이아웃을 100% 고정할 수 있습니다.

노션에서 HTML 파일 다운로드
weekly_report_template.html처럼 코드로 보관 (Git 등)
매주 Cursor에서 REPORT_DATA만 DB 스냅샷으로 교체 — CSS·HTML 구조는 유지
브라우저 미리보기 → 노션 재업로드

Agent로 매주 재생성하는 방식(1-E)은 빠르지만 레이아웃이 변할 수 있고, 템플릿 DATA 갱신(14) 방식은 픽셀 단위로 레이아웃을 고정할 때 씁니다.

design.md — 디자인 일관성 유지

워크스페이스에 design.md 페이지를 만들어 두고 “@design.md 참고해서 만들어줘”라고 요청하면, 색·폰트·카드 스타일이 매번 일관되게 나옵니다. Notion AI 기본 디자인 위에 고객 브랜드 규칙을 덮어쓰는 패턴이에요.

토큰	값	용도
`--color-primary`	`#2C26AE`	메인 강조, 버튼, 헤더
`--color-bg-sub`	`#F7F6F3`	카드·패널 배경
`--color-text`	`#37352F`	본문 텍스트

영상 자료의 design.md 파일을 복사해 노션 페이지로 붙여 넣고, 본인 브랜드 색상으로 수정해 사용하시면 됩니다.

업무·팀·학습 활용 사례

HTML 블록은 “노션을 대체하는 앱”이 아니라, 제안·교육·온보딩을 설득력 있게 보여 주는 레이어로 쓰는 게 맞습니다.

업무 도구

부가세·사업소득·기타소득 계산기
ROI / TCO 계산기 (고객 미팅 중 팝업으로 전체 화면 시연)
프로젝트 D-Day 카운트다운
주간 리포트·체크리스트 UI

팀·학습

온보딩 체크리스트 (단계별 가이드·복사 문구)
플래시카드 학습 위젯
미션 → 퀴즈 → Congratulations 흐름
사다리 타기, 테트리스 등 미니게임

컨설턴트·영업

As-Is / To-Be 비교표 (탭 전환)
프로젝트 구축 타임라인
MECE 시스템 분류 인터랙티브 표
회의록 시각화 (타임라인·카드형)

고객 페이지에는 HTML 위에 “데모용·수치는 예시” Callout을 두시면 신뢰가 올라갑니다.

무료 요금제에서도 대시보드 만들기

노션 네이티브 대시보드 보기는 비즈니스 플랜 전용입니다. HTML 블록은 무료 요금제에서도 DB를 참조한 대시보드를 만들 수 있어요. DB 데이터를 스냅샷으로 HTML에 포함시키면, 담당자·상태·프로젝트별 필터·그래프를 한 화면에 구성할 수 있습니다.

다만 이 방식은 실시간 연동이 아닙니다. DB가 업데이트되어도 HTML은 자동으로 바뀌지 않으므로, 매주 Agent로 재생성하거나 템플릿 DATA 갱신 방식을 사용해 주세요.

알아둘 한계와 우회법

HTML 블록은 강력하지만, 노션 샌드박스 안에서 동작합니다. 직접 써 보면서 확인한 한계를 정리해 둡니다.

정적 HTML — DB 연동·갱신

기대	현실
DB 속성을 읽어와 대시보드 자동 갱신	DB 기반 HTML도 스냅샷일 뿐
DB 업데이트 시 HTML도 따라 변경	보안·샌드박스로 워크스페이스와 격리
HTML에서 만든 데이터 → 노션 DB 적재	현재 불가 (향후 업데이트 기대)

동적 데이터 위젯 vs 정적·로컬 위젯

어려운 것	가능한 것
캘린더 (외부 일정 연동)	명언 위젯
환율·주가 (실시간 fetch)	인스턴트 할 일 목록
날씨 API	ROI 계산기 (입력→로컬 계산)

외부 API로 데이터를 주고받는 위젯은 불가합니다. HTML 안에서만 도는 상호작용은 가능합니다. 외부 프레임워크, 폰트, SVG 불러오기는 가능합니다.

팀 협업·로컬 저장

필터·화이트보드·입력값은 본인 브라우저에만 저장됩니다. 다른 팀원 PC에서 내 필터 상태가 보이지 않으므로, 개인 탐색·데모·교육에는 적합하고 팀 공유 상태에는 적합하지 않습니다.

우회법 요약

필요	대안
DB 연동 실시간 대시보드	Notion API + Make, 외부 호스팅
주기적 시각화 보고서	커스텀 에이전트 자동화
팀 공유 화이트보드	Miro, FigJam
레이아웃 100% 고정	HTML 다운로드 → DATA만 갱신 → 재업로드

자주 묻는 질문

Q. HTML 블록은 무료 요금제에서도 쓸 수 있나요?

네. HTML 블록 보기·사용·공유는 모든 요금제에서 가능합니다. Notion AI로 HTML을 생성하는 기능만 Business, Enterprise 플랜에서 사용할 수 있습니다. Notion AI가 없으면 Claude나 Cursor로 HTML을 만든 뒤 업로드하면 됩니다.

Q. “HTML 만들어줘”라고만 하면 왜 블록이 안 생기나요?

Notion AI에게 “HTML 임베드 블록을 생성한 후 실행해줘”라는 문구를 반드시 포함해야 합니다. 이 문구 없이는 코드만 출력되고 HTML 블록이 생성되지 않습니다.

Q. DB를 연결하면 실시간으로 대시보드가 갱신되나요?

아닙니다. HTML 블록은 생성 시점의 DB 스냅샷을 HTML 내부에 포함하는 방식입니다. DB가 바뀌어도 HTML은 자동 갱신되지 않습니다. 매주 Agent로 재생성하거나, 템플릿 DATA 갱신 방식을 사용해 주세요.

Q. 노션 안에서 HTML 코드를 직접 수정할 수 있나요?

현재는 불가합니다. HTML 파일을 다운로드 → 로컬/Cursor에서 편집 → 재업로드하는 방식으로 수정합니다. 레이아웃을 고정하려면 템플릿 파일로 보관하고 DATA만 갱신하는 방식을 권장합니다.

Q. Notion MCP로 HTML 블록을 만들 수 있나요?

네. Claude 등 외부 AI에 Notion MCP를 연결하면 HTML 블록을 노션 페이지에 직접 생성할 수 있습니다. “HTML 임베드 블록을 생성한 후 실행해줘” 문구와 함께 @페이지명으로 삽입 위치를 지정해 요청하세요. 다만 생성된 HTML은 DB 실시간 연동이 아닌 스냅샷입니다.

영상에서 사용한 자료 다운로드

마무리

노션 HTML 블록은 정적 인터랙티브 위젯입니다. DB 실시간 연동 대시보드가 아니라, 정기 스냅샷 리포트·제안용 계산기·교육용 퀴즈로 포지셔닝하면 기대치에 맞게 잘 쓸 수 있습니다.

만드는 법 = @ 페이지·DB 참조 + Notion AI / Claude·Cursor / Notion MCP → 생성
디자인 고정 = design.md 참조 + HTML 템플릿 DATA 갱신
PDF = HTML 완성 후 Agent PDF 생성 → 같은 페이지에 삽입
한계 = DB 실시간 연동 ❌, 필터 상태 = 내 PC만 (MCP 생성은 ⭕)

영상 설명란에서 프롬프트와 HTML 샘플 파일을 받아 바로 써 보시면 됩니다. 궁금한 점은 댓글이나 네이버 카페에 남겨 주세요.작성: 전시진 | 시리얼(Sireal)

클로드가 뭔가요? ChatGPT·Gemini와 뭐가 다른가요

생성형 AI를 쓰다 보면 ChatGPT, Gemini, 클로드 중에서 뭘 써야 할지 고민되기 마련입니다. 저는 세 서비스를 모두 유료로 써 보면서 글쓰기·문서 작업에는 클로드가 가장 잘 맞는다고 느꼈어요. 바이브 코딩이 뜨면서 클로드 코드를 쓰는 분들이 늘었고, 그만큼 “클로드 사용법”을 검색하는 분도 많아진 것 같습니다.

간단히 비교하면 이렇게 정리할 수 있습니다. ChatGPT는 창의적인 아이디어 뽑기·브레인스토밍에 강하고, Gemini는 이미지·동영상·오디오를 넣어서 분석하는 멀티모달과 구글 워크스페이스(Gmail, 드라이브, 캘린더) 연동이 좋습니다. 반면 클로드는 글쓰기, 긴 문서 다루기, 코딩 보조에 특화돼 있어요. 제가 직접 사용해보니 초안을 쓰고 다듬고, 노션 기획서나 메일 초안을 만드는 일에는 클로드가 가장 안정적으로 원하는 퀄리티를 내줬습니다.

클로드 웹이 아니라 앱을 쓰는 이유

클로드는 웹 버전과 데스크톱 앱이 둘 다 있는데, 저는 앱 버전을 추천합니다. 웹에서는 상단의 코워크·코드 같은 기능이 제한되고, 코드는 다른 탭으로 넘어가서 불편할 뿐 아니라 내 컴퓨터 폴더에 직접 접근할 수 없어요. 맥·윈도우 모두 앱을 지원하니까, 공식 사이트에서 “다운로드 앱”을 눌러 설치해 두시는 걸 권합니다.

채팅·프로젝트·커넥터만 먼저 써보기

앱을 켜면 채팅 화면이 나옵니다. 새 채팅은 Ctrl+Shift+O(맥은 Command+Shift+O)로 열 수 있어요. 플러스 버튼으로 첨부파일을 넣거나 프로젝트를 만들 수 있는데, 프로젝트는 ChatGPT의 GPTS와 비슷하게 “지침 + 참조 파일”을 묶어서 그걸 기준으로 대화를 이어가는 개념입니다. 구글 드라이브는 현재 구글 독스만 연결되고, 시트·슬라이드·PDF는 링크로 넣기 어렵습니다. 대신 GitHub 코드베이스, 리서치·웹검색 기능을 켤 수 있고, 커넥터로 드라이브·Gmail·노션·슬랙 같은 외부 앱을 붙여서 “이 파일들 안에서 찾아서 답해줘” 같은 요청을 할 수 있어요. 커스텀 커넥터로 MCP(예: 구글 서치 콘솔)도 연결할 수 있습니다.

채팅, 코워크, 코드 – 세 가지가 어떻게 다른지

클로드에는 채팅·코워크·코드 세 가지 사용 방식이 있습니다. 비유해서 말하면 이렇게 생각하시면 됩니다. 채팅은 내가 직접 빗자루 들고 청소하는 것처럼, 질문할 때마다 답을 받는 방식이에요. 코워크는 청소기를 쓰는 것, 더 나아가 “몇 시에 어디를 청소해라”라고 세팅해 두면 로봇 청소기처럼 자동으로 돌아가는 자동화에 가깝습니다. 코드는 그 로봇 청소기를 내가 설계·만드는 단계라고 보시면 됩니다. 그래서 말로만 “이렇게 동작해라” 하고 코워크를 쓰는 것과, 클로드 코드로 직접 개발하는 것은 난이도와 활용 범위가 다릅니다.

실제로 저는 코워크로 “매일 오전 9시·오후 4시에 Gmail 뉴스레터를 수집해서 요약하고, 노션에 저장한 뒤 슬랙으로 알림 보내라”는 작업을 만들어 두고 씁니다. 슬랙·노션처럼 API 연결이 필요한 건 설정이 조금 필요하지만, 새 작업을 만들고 프롬프트만 잘 적어 주면 클로드가 절차를 짜 줍니다. 코드 쪽은 데스크톱 앱에서만 “내 로컬 폴더 접근 허용”이 되기 때문에, 스크린샷이나 받은 파일들이 난잡할 때 “이 폴더 안 파일 내용 보고 파일명 간결하게 바꿔줘”라고 하면 내용 기준으로 이름을 바꿔 주고, 기획서에 맞게 폴더링까지 시켜 준 경험이 있습니다. 이미지·영상 소스 관리나 PPT 슬라이드별 파일명 정리할 때도 그대로 쓰실 수 있어요.

프로젝트와 스킬로 클로드 활용도 높이기

프로젝트는 “전자책·자료를 한곳에 모아두고 그걸 참고해서 질문하는” 용도로 쓰기 좋습니다. 예를 들어 바이브 코딩 자료, 유튜브 기획 관련 파일, 강의 계획서를 넣어 두고 “목차 만들어줘”, “후킹 문장 써줘”처럼 요청하면 됩니다. 노트북 LM처럼 웹·유튜브 링크를 풍부하게 넣어서 공부용으로 쓰는 서비스와는 다르게, 클로드는 긴 텍스트·문서를 참조해서 글쓰기를 도와주는 데 더 맞아요.

스킬은 “로봇 청소기에 진공·물걸레·먼지통 비우기 같은 기능을 하나씩 붙이는 것”이라고 보시면 됩니다. 채팅·코워크·코드라는 껍데기 안에, “구글 SEO 정리해줘”, “이 스타일로 요약해줘” 같은 세부 기능을 지침으로 만들어 넣는 거예요. 스킬은 사용자 지정 메뉴에서 “클로드와 함께 창작하기”로 대화하면서 지침을 뽑고, 그걸 복사해서 스킬 지침란에 붙이면 됩니다. 어떤 스킬을 만들지 감이 안 잡힐 때는, 한 달치 업무일지나 반복 작업 로그를 파일로 넣고 “이 패턴 중에서 스킬로 만들 만한 거 추천해줘”라고 물어보는 방법을 써 보시면 좋습니다. 저도 그렇게 해서 쓰는 스킬이 몇 개 있어요.

사용량 한도와 요금제 참고할 점

클로드는 세션별 사용량 한도가 있어서, 한동안 많이 쓰면 “한도 소진”이 되고 일정 시간 뒤에 다시 쓸 수 있습니다. 설정에서 세션별·주간 한도 확인이 가능하고, 추가 사용량을 사는 옵션도 있지만 비용이 꽤 나가서, 바이브 코딩처럼 API를 쓰는 경우가 아니면 구독 플랜(프로·맥스)으로 쓰는 걸 많이들 선택합니다. 일반적인 글쓰기·문서 작업만 하시면 세션 한도가 크게 부족하지는 않았어요.

ChatGPT·Gemini에서 클로드로 갈아타는 법

다른 서비스에서 클로드로 옮기실 때는 메모리 가져오기 기능을 쓰면 됩니다. 클로드 설정 > 기능 탭에 “다른 AI 제공 업체에서 메모리 가져오기”가 있어요. 거기서 나오는 프롬프트를 그대로 복사해서 ChatGPT나 Gemini 채팅창에 붙여 넣으면, 저장돼 있던 메모리(지침, 정체성, 프로젝트, 선호 등)가 텍스트로 나옵니다. 그걸 다시 복사해서 클로드 채팅창에 붙여 넣고 “메모리에 추가”만 누르면 끝납니다. 젠스파크·다른 서비스도 비슷한 방식으로 되어 있는 경우가 많아요. 구독을 끊어도 해지일로부터 한 달 정도는 이용 가능한 경우가 많으니, 그동안 클로드를 써 보시고 괜찮으면 그때 갈아타시면 됩니다.

정리

클로드는 글쓰기·대용량 문서·코딩 보조에 강한 생성형 AI이고, 웹보다는 데스크톱 앱으로 쓰는 걸 추천합니다. 채팅으로 일상적인 질문을 하고, 코워크로 반복 작업을 자동화하고, 코드로 로컬 파일·폴더까지 다루면서, 프로젝트와 스킬로 “나만의 참조·지침”을 쌓아 가면 활용도가 많이 올라갑니다. ChatGPT·Gemini와 비교해서 본인 업무 패턴에 맞는 걸 골라 쓰시고, 클로드가 맞다면 메모리 가져오기로 기존 서비스에서 설정을 옮겨 오시면 됩니다.

작성: 전시진 | 시리얼(Sireal)

[Claude]

노션 HTML 블록 완전 정리 — 만들기·활용·한계