PRO 🍚 깃밥 레포 소개 · 공개 샘플
oil-oil / oil-ui ↗AI 디자인 스킬
“예쁘게 만들어줘” 다음에, 어떤 방향인지 함께 고르는 도구
Oil UI는 AI 코딩 도구에 디자인 작업 순서를 더하는 스킬이에요. 서로 다른 시안을 나란히 살펴보고, 고른 방향을 실제 화면으로 다듬도록 돕습니다.
67초 영상3안 비교공식 문서를 바탕으로 만든 손그림 해설
디자인 방향을 같이 고르는 여섯 단계
서로 다른 시안을 비교하고 선택한 뒤, 실제 화면을 확인하는 과정을 손그림과 한국어 나레이션으로 풀었습니다. 깃밥의 설명도이며 Oil UI를 실행한 녹화는 아닙니다.
01 · 공식 화면을 읽어봐요
내용은 같아도, 먼저 전하는 것은 달라져요
제작자는 가상의 모나리자 복제품 전시를 세 가지 방향으로 표현했어요. 전시 소개와 관람 예약이라는 목적은 같지만, 작품·이야기·여백 중 무엇을 먼저 볼지가 달라집니다.
01 / Thirty Centimeters
대표 이미지 한 장을 기억시키고 싶다면
- 화면에서 확인한 것
- 어두운 배경 위로 작품의 얼굴을 크게 확대하고, 큰 제목을 겹쳐 놓았어요.
- 깃밥의 활용 제안
- 대표 제품이나 작품 자체가 선택 이유인 소개 페이지에 참고할 만해요. 사용자의 시선을 핵심 이미지로 모으는 방향입니다.
- 이 방향을 고르기 전
- 가격·사양·일정을 빨리 비교해야 하는 화면이라면 필요한 정보가 너무 뒤로 밀리지 않는지 확인하세요.
제작자의 비교 화면 전체 펼치기
원본의 중국어와 디자인은 그대로 보존했습니다. 아래 활용 제안은 깃밥의 해석이며, 전환율이나 사용성을 측정한 결과가 아닙니다.
깃밥이 가정한 상황과 제안
전시를 이미 알고 있고, 예약이 목적이라면?
3안 Sfumato를 출발점으로 삼겠습니다. 한 가지 행동에 집중하는 구성을 살리고, 일정과 가격을 예약 버튼 가까이에 보완하는 방식이에요. 반대로 배경 이야기를 알아야 관람하고 싶어지는 전시라면 2안 Extra! 1911을 먼저 검토하겠습니다.
02 · 내 작업에 대입하면
무엇을 맡기고, 어디에서 내가 골라야 할까요?
예를 들어, 새 전시의 예약 안내 페이지를 만든다고 가정해볼게요.
- 01
내가 준비
목적을 알려줘요
관람객이 전시를 이해하고 예약하게 만들고 싶어요. 전시 사진·일정·가격과 꼭 필요한 내용을 전달합니다.
- 02
Oil UI + AI 코딩 도구
다른 방향을 비교해요
구성·서체·색·주요 이미지가 다른 시안을 비교합니다. 좋아하는 부분과 맞지 않는 부분을 구체적으로 골라요.
- 03
함께 확인
고른 방향을 다듬어요
선택한 화면을 구현한 뒤 PC·모바일의 실제 스크린샷으로 점검합니다. 첫 화면의 핵심이 보이는지, 글자를 읽고 버튼을 누를 수 있는지 확인하고 불필요한 장식을 줄여요.
예약을 받는 기능은 별도로 연결해야 해요
디자인에 예약 버튼이 보인다고 실제 예약·결제·회원 기능이 완성되는 것은 아닙니다. 업무 규칙과 데이터 연결은 프로젝트에서 구현하고 검증해야 해요.
이런 식으로 작업을 요청할 수 있어요 · 깃밥의 예시
Oil UI로 전시 예약 안내 페이지의 서로 다른 디자인 방향 3개를 비교해줘. 관람객은 처음 보는 전시라 작품 사진, 일정, 가격을 이해한 뒤 예약해야 해. 필수 정보는 세 시안에 똑같이 넣고, 모바일에서도 비교할 수 있게 해줘.
03 · 내게 필요한 도구인지
지금 막힌 부분부터 골라보세요
디자인은 정했고, 버튼·차트 같은 부품이 필요해요
컴포넌트 도구를 먼저 확인React 프로젝트라면 Arc Library처럼 사용할 부품과 예제가 정해진 도구가 현재 작업에 더 직접적일 수 있어요.
Arc Library 예제 ↗화면은 있고, 열림·전환 움직임을 다듬고 싶어요
모션 예제를 먼저 확인Transitions.dev의 전환 예제처럼 필요한 움직임을 골라 적용하는 접근을 비교해보세요.
Transitions.dev 예제 ↗세 도구는 함께 쓸 수도 있어요. 여기서는 지금 해결하려는 일을 기준으로 첫 선택을 나눴습니다.
설치 전에 확인할 세 가지
- AI 코딩 도구가 준비돼 있나요? 스킬 사용에 필요한 모델·도구 비용은 별도로 확인하세요.
- 원하는 것은 새 화면의 디자인 방향 탐색인가요? 기존 서비스의 복잡한 흐름 수정, 전용 카드 코드·특수효과 등 Oil UI Pro의 범위와 구분하세요.
- 시안을 고를 기준이 있나요? 브랜드, 필수 정보, 모바일에서 해야 할 행동을 먼저 적어두세요.