iamjeffia/estudio-ia

영상(및 간단한 페이지)을 위한 UI

날짜: 2026-10-22 · 유형: 가이드 · 상태: 유효

요약: 화면의 '그럴듯한 느낌'이 모션을 신뢰할 수 있게 만듭니다. 이 스킬은 인터페이스의 보편적인 규칙(계층 구조, 여백, 타이포그래피, 색상, 상태)과 화면이 영상에 들어갈 때 달라지는 점(모바일에서 읽을 수 있어야 함, 레이어로 재구성해야 함, 각 요소를 애니메이션 가능하게 만들어야 함)을 모아 놓았습니다. 또한 간단한 페이지(랜딩 페이지, 링크 인 바이오)에도 적용됩니다. 숫자와 예시는 references/regras-detalhadas.md에서 확인할 수 있습니다.

두 가지 사용 방법:

• 생성: 새 화면을 디자인하거나 실제 제품의 화면을 영상에 맞게 재창조합니다.
• 검토: 완성된 화면을 감사하고, 각 규칙을 위반하는 부분을 지적하며, 요청에 포함된 경우 수정합니다.

1. 디자인 전 컨텍스트

1. 프로젝트 또는 주제 브랜드의 시각적 시스템(토큰: 색상, 글꼴, 간격, 반경)과 컴포넌트를 찾습니다. 타사 브랜드의 경우 공식 웹사이트에서 가져옵니다(video-referencias, 섹션 3 참조). 아래 규칙은 실행 방식을 조정할 뿐, 브랜드를 대체하지 않습니다.
2. 화면 유형을 정의합니다: 랜딩/사이트(타이포그래피 규모가 큼) 또는 앱/대시보드(밀도가 높고 텍스트는 최대 24px).
3. 각 블록이 전달해야 할 내용과 각 블록에서 가장 중요한 요소가 무엇인지 나열합니다. 영상의 경우: 해당 순간에 나레이션이 말하는 내용이 무엇인지 고려합니다.

2. 디자인 전 참고 자료

필요한 것	출처
앱 또는 사이트 화면, 랜딩 섹션(히어로, 가격, FAQ, 사용후기), 대시보드, 플로우(온보딩, 체크아웃)	Mobbin (해당 권한이 있는 경우; MCP search_sections, search_screens, search_flows 사용)
Mobbin이 없거나 Mobbin에 없는 경우	Dribbble 및 Pinterest (짧은 영어 키워드 사용) 및 실제 제품 스크린샷
모션, 애니메이션 효과, 미학, 사진, 분위기	Pinterest
영상에 언급된 실제 제품	해당 제품 자체: 화면 녹화 또는 공식 화면 캡처
완성된 전환 효과, 형태가 변하는 아이콘, 마이크로인터랙션, AI 에이전트 화면	컴포넌트 라이브러리: references/motion-e-componentes.md

검색 및 저장 방법: references/referencias.md. 화면당 3~6개의 참고 자료를 모으고 각각에서 활용할 패턴을 기록합니다. 참고 자료는 구조, 계층 구조, 간격 및 동작에 사용하고, 타사의 브랜드, 텍스트 또는 이미지는 복사하지 마십시오.

3. 규칙 (요약)

1. 시그니파이어: 화면이 저절로 설명되어야 합니다. 컨테이너로 그룹화하고, 선택된 항목을 강조하며, 비활성 항목은 회색 처리합니다. 클릭 가능한 요소는 호버, 눌림, 활성 상태를 보여줍니다. 텍스트가 없는 아이콘에는 툴팁이 있어야 합니다.
2. 계층 구조: 크기, 위치 및 색상. 가장 중요한 요소는 상단에 크고 굵게, 보조 요소는 작고 회색으로 표시합니다. 블록당 하나의 색상 강조점을 사용합니다. 레이블("발신:", "식당:") 대신 이미지, 로고, 아이콘을 사용합니다. 모두 동일한 "레이블: 값" 목록은 디자인이 아닌 스프레드시트입니다.
3. 여백: 그리드보다 여백을 우선시합니다. 4의 배수(4~40px)를 사용합니다. 블록 사이에는 기본 간격(예: 32px)을, 함께 속한 항목 사이에는 절반(16px)을 사용합니다.
4. 타이포그래피: 하나의 산세리프체 패밀리를 사용합니다. 큰 텍스트는 자간 -2%-3%, 줄 높이 110120%로 설정합니다. 랜딩 페이지: 최대 6가지 크기. 대시보드: 최대 24px.
5. 색상: 하나의 기본 색상을 사용하며, 배경용 밝은 버전과 텍스트용 어두운 버전(50~950 램프)을 함께 사용합니다. 다른 색상은 기능적으로만 사용합니다: 파랑(초점), 빨강(오류), 노랑(경고), 초록(성공).
6. 다크 모드: 테두리는 거의 보이지 않을 정도로 밝게; 배경보다 밝은 표면으로 깊이감 표현; 칩은 채도가 낮은 어두운 배경에 동일한 색상의 밝은 텍스트 사용.
7. 그림자: 낮은 불투명도, 높은 흐림도. 그림자가 가장 먼저 눈에 띈다면 잘못된 것입니다.
8. 아이콘 및 버튼: 아이콘 크기는 텍스트 줄 높이와 같게 하고 가깝게 배치합니다. 수평 패딩 = 수직 패딩의 2배. CTA 쌍: 기본(채워짐) + 보조(고스트).
9. 피드백: 버튼은 기본, 호버, 눌림, 비활성화, 로딩 상태를 가져야 합니다. 입력 필드는 초점, 오류 메시지, 경고 상태를 가져야 합니다. 모든 동작에는 응답이 있어야 합니다.
10. 텍스트가 있는 이미지: 사진 전체를 어둡게 하는 대신 텍스트 뒤에 국소적인 그라데이션을 적용합니다.
11. 전체 인터페이스에 걸친 미묘한 애니메이션: 카드는 호버 시 약 2px 올라가며 넓고 약한 그림자 생성, 클릭 시 잔물결 효과, 블록은 페이드 인과 함께 위로 올라오며 나타남, 로딩 중 스켈레톤에 빛나는 효과. 짧고 미묘하게: 로딩 외에 자체적으로 움직이는 요소는 없습니다.
12. 고급스러운 디자인은 깔끔해 보이는 것뿐 아니라 쉽게 결정하도록 돕는 것입니다: 판매를 위한 이미지는 카드에서 가장 큰 요소; 3단계 텍스트, 의사 결정 데이터는 굵게 또는 색상으로 강조; 결과를 알려주는 버튼 텍스트("41채 매물 보기", "₩329,000 결제"); 화면당 하나의 배지; 콘텐츠보다 덜 눈에 띄는 내비게이션; 통일된 모서리 반경. 표는 references/design-caro.md 참조.
13. 스캔 가능한 화면: 아무도 화면을 읽지 않고 답을 찾습니다. 각 요소는 두 개 이상의 가장자리에 닿아야 합니다(텍스트는 왼쪽, 값과 시간은 오른쪽; 읽을 필요가 없는 요소만 중앙 정렬). 밀도는 간격을 벌리는 것이 아니라 차별화(아바타, 헤더가 있는 그룹, 아이콘이 있는 칩)로 해결합니다. 강조는 주변 요소와의 차이입니다. 강조하려면 주변을 중립화하세요. 상자 안에 상자를 넣지 마십시오.

4. 영상 속 화면

• 모바일에서 읽을 수 있어야 함: 가로 1080px 프레임에서 인터페이스 본문은 최소 약 22px 이상; 임팩트 있는 제목은 훨씬 더 크게. 테스트: 모바일 크기에서 1초 동안 프레임을 멈춥니다. 가장 먼저 보이는 것이 나레이션이 말하는 내용인가요?
• 레이어로 재구성, 절대 스크린샷을 붙여넣지 않음: 각 버튼, 텍스트, 아이콘, 말풍선은 자체 레이어로 만들어져 개별적으로 애니메이션(스프링으로 나타나기, 켜지기, 클릭되기)될 수 있어야 합니다. 스크린샷은 증거(뉴스, 실제 게시물)로만 사용합니다.
• 실제 제품에 충실: 대중이 알고 있는 앱(WhatsApp, Gmail, 은행)과 동일한 색상, 글꼴, 반경, 아이콘, 컴포넌트를 사용합니다. 공식 아이콘(SF Symbols, Material Symbols 또는 브랜드 SVG)을 사용합니다.
• 실제와 같은 움직임의 상태: 시스템의 실제 키보드가 올라오고 키가 켜지는 타이핑 효과, 마스크로 텍스트가 "늘어나는" 효과 금지; 클릭 시 눌리는 버튼; 실제로 로딩되는 로딩 화면; 플랫폼의 실제 형식에 맞는 알림.
• 그럴듯한 예시 데이터: 해당 분야에 맞는 이름, 금액, 시간; "Lorem ipsum" 사용 금지, 실제 개인 데이터, 이메일 또는 자격 증명을 화면에 표시하지 않음.
• 프레임당 하나의 아이디어: 화면에 10가지 정보가 있고 대사가 하나만 언급한다면, 나머지는 중립적으로 만들고 카메라는 중요한 부분에 집중합니다.

5. 검토 모드

1. 화면을 렌더링하고(브라우저, 엔진 미리보기 또는 영상 프레임) 데스크톱과 모바일 캡처, 또는 모바일 크기의 프레임을 캡처합니다.
2. 체크리스트를 확인하고 각 문제를 기록합니다: 위치, 위반된 규칙, 현재 값, 제안된 수정.
3. 영향도 순으로 정렬: 계층 구조 및 가독성, 그다음 여백 및 타이포그래피, 마지막으로 다듬기(그림자, 상태, 마이크로인터랙션).
4. 작고 검증 가능한 변경으로 수정하며, 브랜드와 텍스트는 유지합니다.

체크리스트 (각 항목은 "AI 느낌"의 신호이기도 합니다)

• 카드나 목록이 스프레드시트처럼 보입니까? (반복되는 레이블, 모두 같은 크기)
• 각 블록에 하나의 지배적인 요소가 있습니까? 경쟁하는 색상 강조점이 두 개 이상 있습니까?
• 간격이 4의 배수가 아니거나, 함께 속해야 할 항목 간의 간격이 동일합니까?
• 두 개 이상의 글꼴 패밀리를 사용했습니까? (랜딩) 6가지 이상의 크기 또는 (대시보드) 24px 이상의 텍스트가 있습니까?
• 큰 제목에 기본 자간 및 줄 높이를 사용했습니까?
• 색상을 장식용으로만 사용했거나, 의미론적 색상을 바꿔 사용했습니까?
• 그림자가 콘텐츠보다 먼저 보이거나 너무 무겁습니까? 다크 모드에서 테두리가 너무 강합니까? 칩이 네온색입니까?
• 아이콘이 텍스트 줄 높이보다 크거나, 레이블에서 너무 멀리 떨어져 있거나, 색상이 있는 사각형 안에 너무 작고 비뚤어져 있습니까? (디자인은 상자의 약 55%를 차지해야 함)
• 버튼의 패딩이 비대칭적이거나, 두 CTA의 시각적 무게가 동일합니까?
• 상태(호버, 눌림, 초점, 비활성화, 로딩, 오류)가 누락되었습니까?
• 사진 위에 흰색 텍스트가 직접 있거나, 사진 전체가 어두워졌습니까?
• 모든 섹션의 제목 위에 대문자 레이블이 있거나, 실제 내용 대신 중앙에 아이콘이 있는 "3단계 번호"가 있습니까?
• 저렴한 디자인: 이미지가 작고, 메타데이터가 회색으로 길게 나열되어 있으며, 버튼 텍스트가 모호하고("적용"), 두 개 이상의 배지가 있으며, 모서리 반경이 혼합되어 있습니까?
• 요소가 두 개 이상의 가장자리에 닿지 않고 떠 있습니까? 카드 안에 카드가 있습니까?
• 보라색-파란색 그라데이션, 이모지를 아이콘으로 사용, 모든 것에 동일한 모서리와 그림자, 채우기 텍스트가 있습니까?
• 영상의 경우: 모바일에서 읽을 수 있습니까? 레이어로 재구성되었습니까? 실제 제품에 충실합니까? 첫눈에 대사가 말하는 내용에 시선이 가나요?

6. 검증

• 렌더링하고 확인합니다: 데스크톱(1440px) 및 모바일(390px), 어두운 모드가 있다면 함께 확인합니다. 영상의 경우 모바일 크기의 프레임을 확인합니다.
• 코드에서 규칙의 숫자(크기, 줄 높이, 간격, 그림자)를 확인합니다.
• 상호작용을 테스트합니다: 호버, 클릭, 초점, 제출 시 응답이 있는지 확인합니다.
• 이전과 이후를 비교하고 무엇이 변경되었고 그 이유는 무엇인지 나열합니다.