초간단 아날로그 시계 만들기 - GPT를 이용한 코딩 연습 - 4부

잘 작동하는 시계앱까지는 만들었지만 아쉬운 점이 있었다.

이를 수정하고자 역시 GPT에 물어봤다.

 

 

수정된 코드를 보자

 

이전에 canvas.winfo_width()와 canvas.winfo_ height()로 단순히 가로 세로 픽셀 수를 취하던 것과 달리, 이미지의 원래 비율과 앱 화면의 비율을 비교해가며 사진 크기를 조정한다. 그런데 이 코드를 자세히 들여다 보면 내가 원하던 채우기 그런 기능이 아니고 사진 비율을 그대로 유지한다. 의미없는 개선(?)이 되었다.

 

어쨌든 다시 개선하면 되니 넘어가고, 윤곽선은 어떻게 처리했는지 살펴보자

 

시계 테두리와 위 이미지엔 없지만 시계의 12시 구분선을 단순히 하얀색으로 바꿨다.

시침, 분침, 초침은 outline = "white" 라는 코드가 생겼는데 그럴싸 하지만 실제 작동시켜보면 이것 때문에 오류가 난다.

 

 

아무 의미없이 코드와 연산량만 늘어놨고, 의도와 다르게 단순히 색만 바꾸거나, 심지어 코드가 오류나게끔 바꿨다. 이런걸 보면 GPT가 아직은 완벽하진 않다는 걸 알 수 있다. 그렇다고 인공지능을 애써 무시하지 말자. 지금도 엄청난 속도로 개선되고 있으며 심지어 점점 그 속도에 가속까지 붙고 있다. 참고로 2022년쯤 GPT 3.5 버전이 나왔다. 2년만에 엄청난 개선이 있었는데 앞으로 2년 뒤엔 어떻게 될 지 상상하기 무섭다.

 

다시 GPT에게 요청해보자.

 

 

 

GPT가 다시 코드를 고쳐줬다. 코드를 살펴보자.

 

코드를 보면 알겠는가? 그렇다. 엉망진창이다. 화면은 더 엉망이 되어 화면을 키우면 사진은 절반밖에 안 나오게 되었다. 

 

 

윤곽선은 어떻게 됐을까? 코드를 고쳐준 게 아니라 오류만 안 나게 다시 윤곽선을 제거해버렸다.

 

이쯤되면 계속 물어봐야 손해인 듯하고 코드를 살펴보며 각개전투로 처리해야 할 듯하다.

그래도 고쳐준 코드를 참조해보면 anchor="center"란 글자가 보인다. 중앙정령했다는 뜻 같은데 기존 코드를 이것에 맞게 수정해봤다. 그랬더니 똑같이 화면의 반밖에 못 채운다. 눈칫밥으로 anchor 앞의 0,0 의 뜻이 중심의 좌표인 듯하여 화면의 절반 값(self.canvas.winfo_width()/2, self.canvas.winfo_height()/2)으로 입력했다. 

    def load_background_image(self, image_path):
        try:
            image = Image.open(image_path)
            image.thumbnail((self.canvas.winfo_width(), self.canvas.winfo_height()), Image.LANCZOS)
            self.background_image = ImageTk.PhotoImage(image)
            self.canvas.create_image(self.canvas.winfo_width()/2, self.canvas.winfo_height()/2, anchor="center", image=self.background_image, tags="background")
        except Exception as e:
            print(f"Error loading background image: {e}")

 

위 아래는 잘리지만 사진은 가운데로 잘 맞췄다.

 

CahtGPT 4o 일반 버전으로 다른 채팅을 파서 이미지 자르는 방법을 물었다. Pillow 라이브러리의 crop() 메서드를 알려준다.

다시 위의 코드를 복사 붙여넣기 하면서 비율을 유지하면서 화면 크기에 맞게 크롭하는 방법을 물었더니 아래와 같은 코드를 짜준다.

from PIL import Image, ImageTk

def load_background_image(self, image_path):
    try:
        image = Image.open(image_path)
        
        # 캔버스 크기 얻기
        canvas_width = self.canvas.winfo_width()
        canvas_height = self.canvas.winfo_height()

        # 이미지와 캔버스 비율 계산
        image_ratio = image.width / image.height
        canvas_ratio = canvas_width / canvas_height

        # 이미지의 비율에 맞춰 크롭 영역 설정
        if image_ratio > canvas_ratio:
            # 이미지가 더 넓을 때, 가로 부분을 잘라냄
            new_width = int(image.height * canvas_ratio)
            left = (image.width - new_width) // 2
            image = image.crop((left, 0, left + new_width, image.height))
        else:
            # 이미지가 더 길 때, 세로 부분을 잘라냄
            new_height = int(image.width / canvas_ratio)
            top = (image.height - new_height) // 2
            image = image.crop((0, top, image.width, top + new_height))

        # 캔버스 크기에 맞춰 이미지 축소 (비율 유지)
        image.thumbnail((canvas_width, canvas_height), Image.LANCZOS)

        # 크롭된 이미지를 캔버스에 표시
        self.background_image = ImageTk.PhotoImage(image)
        self.canvas.create_image(canvas_width / 2, canvas_height / 2, 
                                 anchor="center", image=self.background_image, 
                                 tags="background")

    except Exception as e:
        print(f"Error loading background image: {e}")

 

다른 채팅을 파서 특정 코드 부분만 알려줬는데도 신기하리만치 잘 알려준다. 가로 세로도 대충 자르는 것이 아니고 중앙에 맞춰 자르는 코드다. 대충 알려준 코드를 이용해 응용해서 쓰려고 했는데 복사 붙여넣기가 가능하다.

 

 

잘 작동한다!  이제 시계가 잘 보이도록 윤곽선 처리만 남았다. 다음에 작성하도록 하겠다.