상황

• CSS를 공부하고 있는 상황이었다.
• 새로운 속성을 학습하고 실제로 어떻게 동작하는지 눈으로 보고 싶었다.

문제점

직접 작성

• 직접 코드를 작성하는 건 시간도 걸리고 귀찮다.
• 무엇보다 의지력이 소모되므로 공부를 지속하는데 영향이 간다.

예제 찾기

• MDN이나 코딩 블로그를 보면 예제와 함께 인터렉티브하게 변화 결과를 볼 수 있는 예제들이 있다.
• 이 또한 검색 후 사이트에 들어가는 노력이 필요하며, 코드 수정이 제한된다.

해결 방법

AI를 사용하여 예제 코드를 만들고, 코드를 수정하면서 변화 과정을 보며 학습했다.

예를 들어 flex-wrap 속성에 대해서 학습했다고 하자.

이 속성들을 눈으로 보고 싶어서 코드를 작성하려면, 컨테이너를 만들고 자식으로 아이템들을 만든 후 스타일까지 적용해야 한다.

귀찮은 과정이다.

나는 대신에 AI에게 예제 코드를 작성하라고 시켰다.

이렇게 하면 장점이 시간과 의지력을 절약할 수 있고, 코드를 원하는대로 수정해가며 변화과정을 볼 수 있어 이해하기가 더 좋다는 점이다.