탐색LandingAI 코딩 어시스턴트 랜딩 — 픽셀아트 히어로와 코드 에디터 목업

1 / 1

AI 코딩 도구 랜딩 페이지 전체를 두 열로 이어 붙인 이미지다. 히어로, 기능 카드, 파란 워크플로 섹션, 후기 그리드, 2단 요금제, 검은 푸터와 픽셀아트 워드마크가 차례로 보인다.

Landing

AI 코딩 어시스턴트 랜딩 — 픽셀아트 히어로와 코드 에디터 목업

2026-06-23 · 이미지 1

AI 분석

픽셀아트 일러스트와 코드 에디터 UI 목업을 반복 배치한 개발자 도구 랜딩 페이지 전체 화면이다.

고정 헤더 아래 좌측 정렬 히어로에서 시작해 기능 카드, 워크플로 탭, 후기 그리드, 요금제, 다크 푸터로 이어지는 긴 단일 칼럼 랜딩이다. 밝은 오프화이트 배경에 산세리프 대제목을 크게 쓰고 본문은 작은 회색 텍스트로 눌러 대비를 만들며, 강조는 검정 버튼과 채도 높은 파랑 섹션에만 준다. 도트가 살아 있는 픽셀아트 풍경이 히어로와 요금제 카드, 푸터 워드마크 배경으로 반복되고 그 위에 탭 달린 코드 에디터 창과 자동완성 드롭다운, 프롬프트 입력창, 폰 프레임 목업이 겹쳐 제품 동작을 보여준다. 별점 후기 카드가 좌우로 흘러넘치는 그리드와 월·연 토글이 붙은 2단 요금제도 함께 담겨 있다. 일러스트로 분위기를 잡고 실제 UI 목업으로 기능을 증명하는 개발자 도구 랜딩 구성의 참고로 유용하다.

minimal · light-mode · playful · high-contrast · retro