TL;DR

  • Jev Pages는 제품에 관한 몇 줄을 입력하면 랜딩 페이지를 실시간으로 구성하며, Jev는 문구를 직접 작성하지 않고 선택지만 고름.
  • Jev는 메모의 각 줄이 제목·요점·사실 중 무엇인지 파악하고 페이지의 목적과 제공 내용을 분류함.
  • 디자인 단계에서 헤드라인, 시각적 스타일, 구성, 사진 등 고정 선택지와 예·아니요 질문에 답함.
  • 선택 항목을 클릭하면 Jev가 해당 선택에 맞춰 2단계를 약 0.2초 만에 다시 응답하고 코드가 페이지를 구성함.
  • 실행에는 Python 3만 필요하며, API 키가 없어도 간단한 오프라인 미리보기가 작동함.

Jev Pages

  • 제품에 관한 몇 줄을 입력하는 동안 랜딩 페이지 디자인이 실시간으로 구성되는 앱임.
  • Jev는 문장을 작성하지 않고 메모의 내용, 페이지에 담을 내용, 디자인 각 계층의 선택지만 고름. 코드는 선택 결과를 바탕으로 페이지를 구성함.

Jev의 페이지 디자인 방식

  • 모든 질문은 정해진 선택지 중 하나를 고르거나 예·아니요로 답하는 방식이며, 다음 순서로 진행됨.
  • 1. 메모 읽기: 각 줄이 헤드라인·요점·사실 중 무엇인지, 제품명과 제공 내용은 무엇인지, 페이지의 목적은 무엇인지, 독자가 읽기 전부터 페이지가 무엇을 전해야 하는지 판단함. 사진으로 담을 만한 대상, 제품 고유 색상의 유무, 크게 보여줄 가치가 있는 사실도 선택함.
  • 2. 페이지 디자인: 앞서 정한 방향을 바탕으로 헤드라인과 부제, 외관, 첫 화면의 중심 요소, 조명, 깊이감, 글꼴, 움직임과 색상의 리듬, 첫 화면 구성, 요점 배치, 이미지 띠, 마무리, 사용할 사진을 선택함.
  • 3. 마무리: 헤드라인에서 강조할 단어를 선택함.
  • 코드는 답변을 바탕으로 페이지를 구성함. 선택 항목을 클릭하면 Jev가 해당 항목을 반영해 2단계의 답변을 약 0.2초 만에 다시 생성함.

실행

  • python3 serve.py를 실행하면 http://localhost:8787이 열림.
  • 화면 왼쪽 아래의 add Jev key를 클릭해 키를 붙여 넣을 수 있음. API 키는 필수가 아니며, 키 없이도 간단한 오프라인 미리보기가 작동함.
  • Mac에서는 Jev Pages.command를 두 번 클릭해 실행할 수도 있음.
  • Python 3만 필요하며 별도 설치 항목은 없음.

포함된 파일

  • jev-pages.html: 레이아웃, 스타일, 로직을 포함하는 앱
  • data/photos.js: 사진 라이브러리와 Jev가 선택하는 사진 주제. 한 줄을 추가해 사진을 넣을 수 있음.
  • data/looks.js: Jev가 선택할 수 있는 스타일별 글꼴, 팔레트, 형태
  • data/colours.js: 페이지에 적용할 수 있는 제품 색상(복숭아, 말차, 커피 등)
  • data/examples.js: 홈 화면의 예시 페이지
  • serve.py: 로컬 서버. 페이지의 Jev API 호출을 전달함.
  • 키는 브라우저에 보관되며 serve.py를 통해 Jev API로만 전송됨.