영단어 뒤집기 카드 만들기: 뜻 보기와 다음 카드 프롬프트

영단어 5개를 앞뒤로 보는 카드 예시로, 뜻 보기·다음 카드·처음부터 동작을 확인했어요.

1. 코딩 에이전트에서 빈 작업 폴더를 열고 아래 프롬프트를 붙여 넣습니다. 이번 예제는 Codex 앱으로 제작했습니다. 2. 완성된 demo.html을 브라우저 창에 끌어다 놓습니다. 위치를 모르겠으면 에이전트에게 파일 위치와 여는 방법을 물어보세요. 3. 아래 결과와 동작을 비교합니다. 막히면 화면이나 오류 문구와 함께 후속 요청을 보내세요.

나는 코딩을 처음 해. 영어 단어를 외우는 뒤집기 카드를 만들어줘. 단어는 apple=사과, book=책, cloud=구름, smile=미소, green=초록 다섯 개를 순서대로 넣어줘. 처음에는 영어 단어만 보이고 «뜻 보기»를 누르면 한국어 뜻이 나오게 해줘. 같은 버튼으로 다시 단어를 볼 수 있어야 해. «다음 카드»를 누르면 다음 영어 단어가 나오고, 1/5처럼 현재 위치를 알려줘. 마지막 다음은 첫 카드로 돌아가게 해줘. «처음부터»를 누르면 apple의 영어 면과 1/5로 돌아가게 해줘. 연보라색 바탕에 큰 카드 하나를 가운데 놓고 글씨와 버튼을 크게 해줘. 내가 단어를 바꾸고 싶을 때 고칠 부분도 알려줘. HTML 파일 하나로 만들어줘. 필요한 디자인과 동작도 같은 파일에 넣고, 별도 설치나 외부 서비스 연결 없이 브라우저에서 열리게 해줘. 휴대폰에서도 글씨와 버튼을 편하게 볼 수 있게 하고, 키보드로 버튼을 사용할 수 있게 해줘. 저장이나 실제 주문 기능은 넣지 마. 파일 이름은 demo.html로 해줘. 완성하면 파일을 여는 방법과 확인할 동작 3가지를 알려줘.

처음 apple과 1/5가 보였고 Space로 뜻 보기 버튼을 누르자 사과로 바뀌었다. 다음 카드에서 book 영어 면으로 전환됐고, 다섯 장을 지나 다시 apple 1/5로 돌아왔다. 처음부터 버튼도 apple 1/5로 되돌렸다. 제출된 390×844 화면에서 카드와 버튼이 보이는 것을 확인했다.

뜻 보기 또는 다음 카드가 예상대로 바뀌지 않아요. 현재 파일의 카드 전환 부분을 확인해 관련 부분만 수정하고, 첫 카드의 뜻 보기와 마지막 카드 다음에 처음으로 돌아가는 동작을 직접 확인한 결과를 알려줘.

VibeAZ 자체 제작 예제입니다. Codex 앱에서 제작하고 Chromium 브라우저의 실제 동작과 390px 화면을 확인했습니다. 다른 모델의 동일한 결과는 확인하지 않았습니다. 이 결과는 확인한 VibeAZ 자체 예제와 해당 검수 환경에 한정됩니다. 동일 프롬프트의 매번 같은 결과나 다른 모델·도구·브라우저 호환성은 확인하지 않았습니다. 요금제·무료 이용 조건은 확인하지 않았습니다.