Articles

Design and Development of an AI-Based Vibe Coding Web App for Elementary Music Learning

AUTHOR :
Song Ie Park, Hyekeun Kwon
INFORMATION:
page. 167~191 / 2026 Vol.55 No.2
e-ISSN 2713-3788
p-ISSN 1229-4179

ABSTRACT

This study is a design and development research project that explores the process through which an elementary school teacher uses AI vibe coding to create digital learning tools for classroom instruction, as well as the educational possibilities of such tools in the context of elementary music classes. In this study, an elementary school teacher with no formal coding expertise designed and developed five game-based music learning web applications by applying a vibe coding approach using the AI functions of ChatGPT and Canva. In this process, the five components of musical agency were employed as criteria for structuring the teacher’s design decisions, and each component was reflected in the web applications’ functional organization and learning interaction patterns. The study was conducted according to Type I design and developmental research procedures, consisting of needs analysis, derivation of design principles, development, and expert validation. Expert reviews indicated that the teacher’s educational intentions were consistently embodied in the digital learning tools through AI vibe coding, and that the developed web apps were evaluated as having the potential to support learner-centered participation and exploration in elementary music classes. These findings suggest that elementary school teachers can put learner-centered instructional design into practice in digital environments.

Keyword :

REFERENCES


  1. Bandura, A. (1997). Self-efficacy: The exercise of control. Macmillan.
  2. Bandura, A. (2001). Social cognitive theory: An agentic perspective. Annual Review of Psychology, 52(1), 1-26. https://doi.org/10.1146/annurev.psych.52.1.1 [Crossref]
  3. Bang, E. Y., Yoon, A., & Park, Y. (2016). Music teaching & learning method. Uhga.
  4. Bang, K., & Moon, H. (2025). Designing instructional principles for AI-integrated maker education in music composition. Journal of Music Education Science, 63, 33-55. https://doi.org/10.30832/JMES.2025.63.33 [Crossref]
  5. Biesta, G., & Tedder, M. (2007). Agency and learning in the lifecourse: Towards an ecological perspective. Studies in the Education of Adults, 39(2), 132-149. https://doi.org/10.1080/02660830.2007.11661545 [Crossref]
  6. Chang, Y. (2016). A proposal for innovative app developing tool. The Journal of the Convergence on Culture Technology, 2(3), 41-44. https://doi.org/10.17703/JCCT.2016.2.3.41 [Crossref]
  7. Damgaard, M. T., & Nielsen, H. S. (2017). The use of nudges and other behavioural approaches in education. European Expert Network on Economics of Education, 29, 1-51.
  8. Edmondson, A. (1999). Psychological safety and learning behavior in work teams. Administrative Science Quarterly, 44(2), 350-383. https://doi.org/10.2307/2666999 [Crossref]
  9. Emirbayer, M., & Mische, A. (1998). What is agency? American Journal of Sociology, 103(4), 962-1023. https://doi.org/10.1086/231294 [Crossref]
  10. Gartner, Inc. (2015, June 16). Gartner says demand for enterprise mobile apps will outstrip available development capacity five to one. Newsroom. Retrieved May 22, 2025, from https://www.gartner.com/en/newsroom/press-releases/2015-06-16-gartner-saysdemand-for-enterprise-mobile-apps-will-outstrip-available-development-capacity-five-to-one
  11. Han, S. H., & Han, K. H. (2025). Effects of parameter-based ai composition on self-efficacy and interest in elementary music education. Korean Journal of Research in Music Education, 54(3), 285-302. https://doi.org/10.30775/KMES.54.3.283 [Crossref]
  12. Jeon, H. G., Seok, I. S., Im, K. S., & Lee, K. H. (2025). Classification of vibe coding approaches in AI-powered programming. Journal of The Korea Society of Computer and Information, 33(2), 101-102.
  13. Jeong, Y. S., Kwon, H. K., & Moon, H. K. (2024). Collaboration between humans and generative AI: Guiding v-log production in high school music classes. The Korean Journal of Arts Education, 22(4), 367-381. https://doi.org/10.23317/kaae.2024.22.4.019 [Crossref]
  14. Johnson, D. W., & Johnson, R. T. (1994). Learning together and alone: Cooperative, competitive, and individualistic learning (4th ed.). Allyn & Bacon.
  15. Karlsen, S. (2011). Using musical agency as a lens: Researching music education from the angle of experience. Research Studies in Music Education, 33(2), 107-121. https://doi.org/10.1177/1321103X11422005 [Crossref]
  16. Kim, A. H. (2023). The possibilities and challenges of ai-based gugak education. The Korean Journal of Arts Education, 21(2), 211-235. https://doi.org/10.23317/kaae.2023.21.2.013 [Crossref]
  17. Kim, J. W. (2023). A study on gamification culture and arts education using artificial intelligence. The Korean Society of Cartoon & Animation Studies, 70, 515-555. https://doi.org/10.7230/KOSCAS.2023.70.515 [Crossref]
  18. Kim, Y. (2025). A study on the development and effectiveness of a strategic model for middle school creative classes utilizing generative AI platforms. Korean Journal of Research in Music Education, 53(3), 1-22. https://doi.org/10.30775/KMES.53.3.01 [Crossref]
  19. Kwon, H. K., & Kim, H. Y. (2023). A study on the application of gamification in traditional music. Education Journal of Gifted Education in Arts, 9, 31-61. https://doi.org/10.22752/KRIGA.2023.09.002 [Crossref]
  20. Lee, D., & Lee, D. (2011). What is gamification and how gamification will change our life? Journal of Digital Design, 11(4), 449-457. https://doi.org/10.17280/jdd.2011.11.4.044 [Crossref]
  21. Ministry of Education (2022). Music curriculum. No. 2022-33. [Supplementary 12]. Ministry of Education.
  22. Moon, H. (2025). Developing a generative AI based chatbot prototype to support the writing of music appreciation: Focusing on Feltman and Anderson's theories. Journal of Music Education Science, 64, 21-42. https://doi.org/10.30832/JMES.2025.64.21 [Crossref]
  23. OECD (2019). OECD future of education and skills 2030: OECD learning compass. OECD Publishing.
  24. Oh, H. (2023). Technology between imitation and creativity: A study of david Cope's early AI composition model Emmy. Journal of Music and Theory, 40, 67-107. https://doi.org/10.36364/JMT.40.3 [Crossref]
  25. Park, B. (2024). Analysis of domestic and international research trends related to artificial intelligence in music field. Research in Music Pedagogy, 25(1), 1-22.
  26. Park, J. (2025). A study on developing a vibe coding-based Chinese language learning game web app. Journal of Sinology and China Studies, 104, 4-28. https://doi.org/10.18077/chss.2025.104..001 [Crossref]
  27. Park, S. I. (2025a). Structural limitations and restructuring strategies of the 2022 revised integrated curriculum's music education: A musical agency perspective. Korean Journal of Research in Music Education, 54(4), 151-168. https://doi.org/10.30775/KMES.54.4.177 [Crossref]
  28. Park, S. I. (2025b). A theoretical exploration of Karlsen's concept of musical agency and its implications for elementary music education. Korean Journal of Culture and Arts Education Studies, 20(3), 69-86. https://doi.org/10.15815/kjcaes.2025.20.3.69 [Crossref]
  29. Park, S. I., & Park, Y. (2025 ). Examining the educational significance and implications of musical agency. Korean Journal of Culture and Arts Education Studies, 20(1), 43-69. https://doi.org/10.15815/kjcaes.2025.20.1.43 [Crossref]
  30. Park, S., & Kim, S. (2018). An optimized number of game mechanics and plex fun factors for the gamification development. Journal of Digital Contents Society, 19(10), 2009-2017. https://doi.org/10.9728/dcs.2018.19.10.2009 [Crossref]
  31. Park, S., Kee, I., & Ra, J. (2019). Study on musical self-efficacy scale validation. Journal of Learner-Centered Curriculum and Instruction, 19(6), 561-577. https://doi.org/10.22251/jlcci.2019.19.6.561 [Crossref]
  32. Richey, R. C., & Klein, J. D. (2007). Design and development research: Methods, strategies and issues. Lawrence Erlbaum Associates Publishers.
  33. Shin, D., Jung, H., & Kim, I. (2025). As a teacher imagines: Developing English educational apps with vibe coding. Journal of the Korea English Education Society, 24(3), 175-193. https://doi.org/10.18649/jkees.2025.24.3.175 [Crossref]
  34. Vygotsky, L. S. (1978). Mind in society: The development of higher psychological processes. Harvard University Press.
  35. Yoo, I. H. (2012). The development of a behavioral assessments and qr code based mobile web application for classroom. Journal of The Korean Association of information Education, 16(4), 397-407.
  36. Yoon, A., & Park, Y. (2018). Application of gamification and nudges in music education. Journal of Learner-Centered Curriculum and Instruction, 18(24), 1191-1210. https://doi.org/10.22251/jlcci.2018.18.24.1191 [Crossref]
  37. Yun, G. K. (2024). A study on teaching plans for music creation applying generative ai based on 'text to music' to group investigation model. Korean Journal of Research in Music Education, 53(1), 143-164. https://doi.org/10.30775/KMES.53.1.143 [Crossref]
  38. Zimmerman, B. J. (2002). Becoming a self-regulated learner: An overview. Theory Into Practice, 41(2), 64-70. https://doi.org/10.1207/s15430421tip4102_2 [Crossref]

Archives

(55 Volumes, 945 Articles)
view all volumes and issues

Author Fee

Review Fee: $100

Publication Fee: $145(~$20, when exceeding 20 pages)

Bank Account: https://www.paypal.me/kmes727