공부하다 막히면 ChatGPT부터 켜는 이유

 

어제는 ChatGPT로 지브리풍 이미지를 만드는 방법을 소개했어요🎨

👉 2025.04.03 - [개발/개발잡담] - ChatGPT로 지브리 이미지 만들기, 요즘 유행하는 AI 그림의 세계

재미로 시작했지만 생각보다 결과물이 괜찮아서 신기했어요.
오늘은 그에 이어서, 요즘 제가 공부할 때 ChatGPT를 어떻게 활용하고 있는지 써보려고 해요🤓

 

요즘 저는 HTML, CSS, JavaScript 기초를 혼자서 공부하고 있어요.
프런트엔드에 관심이 생겨서 조금씩 따라 하고 있는데,
공식 문서를 보기엔 아직 용어도 어렵고, 이해도 잘 안 되는 부분이 많더라고요.

그래서 막힐 때마다 ChatGPT한테 묻고 있어요💡
예전엔 그냥 검색해서 찾아보곤 했는데, 지금은 자연어(= 평소 말하듯) 로 질문하면 바로 대답해주니까 훨씬 편해요.

---

1. JavaScript랑 CSS, 모르는 건 다 ChatGPT한테 물어봤어요

개발 공부를 하다 보면 "이거 뭐였지?" 하고 멈추는 순간이 많아요.
특히 처음 배우는 입장에선 헷갈리는 개념도 많고요.
저는 그럴 때마다 ChatGPT한테 질문해보는 편이에요.

예시1 - 자바스크립트 this 이벤트 개념이 헷갈릴 때

자바스크립트 이벤트 리스너 예제를 보다가
this가 정확히 뭘 의미하는지 헷갈렸던 적이 있었어요.

document.getElementById("btn").addEventListener("click", function() {
	console.log(this);
});

 

코드를 보면 알 것 같으면서도, 막상 출력해보면 예상과 다르더라고요.
그래서 ChatGPT에게 "이 코드에서 this는 뭐야?"라고 물어봤어요.

이 함수는 일반 함수라서 this는 window를 가리켜요.
화살표 함수로 바꾸면 버튼 요소를 가리켜요.

 

이렇게 딱 핵심만 정리해서 설명해줬고 비슷한 예시도 보여줘서 이해가 훨씬 쉬웠어요.

 

예시2 - CSS 그리드 레이아웃이 막막할 때

또 다른 날은 CSS로 화면을 좌우 1:3 비율로 나누고 싶었어요.
처음엔 flex로 시도했는데 원하는 대로 잘 안 됐고, 그리드를 써야 한다는 건 알겠는데 코드가 잘 안 떠올랐어요.

그래서 ChatGPT에게 "CSS 그리드로 1:3 비율 만들고 싶어"라고 물어봤더니
바로 아래처럼 알려줬어요.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

 

코드를 그대로 써보니 원하던 구조가 딱 나왔고,
다른 레이아웃 예제들도 함께 알려줘서 여러 방식으로 시도해볼 수 있었어요😊

---

2. 사실 개발 외 공부에도 쓰고 있어요

사실 요즘은 토익 공부도 같이 하고 있어요📖
문장 해석이 헷갈릴 때나, 문법 용어가 낯설 때
ChatGPT한테 "이 문장 왜 이렇게 썼어?"라고 물어보면
정말 쉽게, 그리고 이해되게 설명해줘요.

그때도 느꼈어요.
“아, 이건 개발자만 쓰는 게 아니구나. 그냥 공부하는 사람한테도 좋은 도구구나.” 하고요.

ChatGPT 토익공부 사용예시

---

3. 마무리 : 공부 친구겸 선생님 같은 느낌이에요

혼자 공부하다 보면 막히는 순간도 많고,
내가 맞게 이해하고 있는 건지 헷갈릴 때도 있어요.
그럴 때 ChatGPT는 빠르게 확인하고 넘어갈 수 있는 좋은 도구라고 생각해요.

특히 개발처럼 처음 접하는 개념이 많은 분야에서는
무작정 찾아보는 것보다 훨씬 효율적으로 정리할 수 있었어요.

앞으로도 계속 활용하면서 제 공부 루틴에 자연스럽게 자리 잡을 것 같아요.

공부하고 계신 분들께도 꼭 추천드리고 싶어요😊