UI Lab

웹사이트 구성요소를 직접 보고 익히는 실습실

버튼, 카드, 목록, 지도, 사이드바처럼 홈페이지에서 자주 쓰는 요소를 한 화면에서 확인함.

상단 툴바관리 화면에서 검색과 주요 버튼을 항상 잘 보이게 놓는 줄임.

AI에게 이렇게 요청하세요상단에 검색창, 저장 버튼, 새로 만들기 버튼이 있는 툴바를 만들어줘.

내부 스크롤 영역

문의 목록처럼 내용이 많아도 정해진 박스 안에서만 내려가게 만들 수 있음.

신청자 이름과 연락처 확인

문의 분야별로 담당자 배정

연락 가능 시간에 맞춰 회신

상담 후 처리 상태 변경

필요하면 견적서 발송

Google Sheets 관리표와 대조

완료된 문의는 답변 완료로 표시

AI에게 이렇게 요청하세요긴 목록을 카드 안에서만 스크롤되게 만들어줘.

상품 가로 나열

여러 교육 과정을 한 줄로 비교할 때 좋음.

기관 협의웰다잉 교육

시니어와 가족을 위한 삶 정리 교육

과정 문의WLC 자격과정

웰라이프코치 기본 역량 과정

회기 협의생애설계 워크숍

나의 시간과 관계를 정리하는 실습

AI에게 이렇게 요청하세요교육 상품 3개를 가로 카드 목록으로 보여줘.

상품 세로 나열

모바일이나 상세 비교 화면에서는 세로 목록이 읽기 쉬움.

웰다잉 교육시니어와 가족을 위한 삶 정리 교육기관 협의

WLC 자격과정웰라이프코치 기본 역량 과정과정 문의

생애설계 워크숍나의 시간과 관계를 정리하는 실습회기 협의

AI에게 이렇게 요청하세요교육 과정 목록을 세로형 리스트로 정리해줘.

카드 UI

한 덩어리의 정보를 보기 좋게 묶는 가장 기본적인 형태임.

운영 예시문의 관리 카드

문의자, 연락처, 처리 상태를 한눈에 볼 수 있게 정리함.

AI에게 이렇게 요청하세요제목, 설명, 상태 표시, 버튼이 있는 카드 UI를 만들어줘.

이미지 클릭 시 크게 보기

작은 이미지를 누르면 큰 화면으로 확인할 수 있게 만드는 방식임.

AI에게 이렇게 요청하세요이미지를 누르면 큰 팝업으로 확대해서 보여줘.

외부 링크와 연락 버튼

방문자가 바로 행동할 수 있게 돕는 버튼들임.

외부 링크 전화 걸기 이메일 문의 카카오톡 상담

AI에게 이렇게 요청하세요외부 링크, 전화, 이메일, 카카오톡 상담 버튼을 만들어줘.

지도 삽입 영역

카카오맵에서 복사한 지도 퍼가기 코드를 Next.js 방식으로 안전하게 넣은 예시임.

카카오맵을 불러오는 중입니다.

AI에게 이렇게 요청하세요카카오맵 지도 퍼가기 코드를 Next.js 페이지에 맞게 넣어줘.