[Web] 랜덤 팀 뽑기 - 주작

제작 개요

초등부 선생님을 하다보면, 팀 짤 때마다 아우성이 너무 많아서 만들게 되었다.

랜덤을 가장한 팀뽑기 웹사이트이다. 3번째에는 정해진 데이터에 따라 팀 배정이 완료된다.

LLM으로 진행한 과정을 정리한다.

 

제작 과정

회사에서 gemini pro 계정을 할당 받은 기념으로, 아래와 같은 프롬프트로 진행해 보았다.

너는 전문적인 웹개발자야. 아래와 같은 요건으로 index.html, css, js 를 작성해줘.

- 목적 : 교회 초등부 여름 수련회 랜덤 팀 배정

- 요구사항 :

1. 이미 정해진 4개팀(A,B,C,D) 구성으로 정해진 json 명단이 소스 파일 안에 존재하고, "랜덤 팀 뽑기" 버튼을 통해 랜덤 팀 구성 이펙트만 주고, 결과는 정해진 json 명단대로 보여져야 해. 각팀에는 조장도 있는 구조여야 해.

2. 디자인은 세련되어야 하고, 경우에 따라 필요한 적합한 라이브러리를 cdn 방식으로 참조해도 될 것 같아. 

3. 랜덤 이펙트가 멋있게 표시하되, 순차적으로 7초의 주기를 주고 팀별로 한명씩 공개 되었으면 좋겠어.

4. 맨처음 버튼 클릭 시에만 정해진 명단으로 표시되고, 그 다음 부터는 진짜 랜덤으로 표시되게 해줘.(전체 명단은 json을 참고해줘)

 

아래 요건에 맞게 수정해주고, 수정한 부분을 표시해줘

- 조장은 항상 고정이고, member의 순서는 초기에 정해진 명단에서 랜덤으로 보여지도록

- 보여지는 주기는 7초에서 5초로 바꿔

- 현재는 첫번째만 무조건 정해진 명단을 보여지게 하고 있는데, 몇번째에 정해진 명단을 보여지게 할지 설정할 수 있도록 해줘.

 

의도를 잘못 파악한 것 같아.

- 고정, 변동 명단일 때 무조건 팀장은 똑같아야 해.

- 고정 명단을 보여줄 때에는 json member에서 팀은 변경은 안되지만 순서는 랜덤으로

- 변동 명단을 보여줄 때에는 팀장을 제외한 팀원들 중에서 팀도 변경되는 것을 허용해서 랜덤으로 만들어야 해

 

결과물

https://github.com/deokudev/make-random-team.git