안경! 안경원 탐구생활

나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자.

행복한안경사 2025. 3. 26.

예약 후 방문해 주세요!!

예약 블로그를 운영하는 행복한 안경사가 직접 상담해 드립니다. 예약방문객에게는 다양한 혜택을 드립니다. 예약하기

행복한안경사
1996년 안경사 면허 취득후 오늘까지 10629 일 동안 꾸준히 안경사로 살아오고 있습니다.
12,000일 채우고 은퇴할 생각이니 그날까지 안경원에서 열심히 일하겠습니다.
상담하기
가우디 안경원
2013년 2월부터 마포구 대흥동에 오픈 후 4420 일 째 조금씩 성장중인 안경원입니다. 계속 성장하는 안경원이 될게요.
가우디 안경원은 과연 어떤 곳일까요?
궁금하신가요? 제대로 알아봅시다.
자세히 보기
예약 후 방문해 주세요.
블로그를 운영하는 행복한 안경사가 직접 상담해 드립니다.
예약 후 방문하시는 분들을 위해 기능성렌즈 전품목 30% 할인해 드립니다.
(누진다초점렌즈, 오피스렌즈 등 )
예약하기


이것은 어쩌면 안경사의 미래에 관한 이야기?

 

사람들은 효율적인 선택을 위해 비교하는 것을 좋아합니다.

 

아무리 이 안경렌즈가 좋다고 열심히 떠드는 것보다

두 개를 비교해 확실한 우위에 있는 제품을 추천하면 좀 더 쉽게 선택합니다.

이건 소비자나 안경사 둘 모두에게 효율적인 방법입니다.

 

그래서 안경원에는 소위 말하는 렌즈 비교 판이 있습니다.

 

도수는 동일하지만 렌즈 설계방식이 다른 두 개의 렌즈를 두고

(보통은 구면렌즈와 비구면렌즈, 안경도수는 +6 디옵터 정도)

뒤에 있는 이미지를 비교할 수 있는 일종의 체험툴입니다.

 

의도를 갖고 쳐다보면 확실히 렌즈의 차이를 알수 있지만

관심이 적다면 그다지 큰 효과를 기대할 수 없는 체험 툴입니다.

 

이걸 업그레이드 하고 싶었습니다.

그리고 몇 번 시도 해 보긴 했지만 크나큰 장벽에 포기하고 말았죠.

 

하지만 그 벽이 엄청 낮아졌습니다.

AI의 도움을 받으면 혼자서도 넘을 수 있게 되었네요.

 

 

아이디어 구상하기

 

1.사람은 가만히 멈춰있는 사물보다 항상 움직임이 있는 무언가를 보는 일이 많습니다.

정적인 상태의 물건은 임팩트가 매우 강한 아우라가 없다면 관심을 끌기 어렵죠.

 

2. 비교 툴은 정적인 이미지를 비교하는 것보다 움직임이 있는 것을 비교할 때

효과가 더 클 것이라 생각했습니다.

 

이 두 가지 생각을 갖고 렌즈 비교 툴에 움직이는 영상을 활용해 보자는 아이디어가 떠올랐습니다.

바로 아래 이미지처럼 계속 반복적으로 아래로 내려오는 움짤을 만들 계획을 세웁니다.

나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 구상하기

 

 

 

아이디어 실행하기

 

우선 흥미를 잃을 수 있으니 실제 작동 영상부터 보여드릴게요.

 

 

같은 도수인데 한눈에 봐도 좌측 보다 우측 렌즈가 더 좋아 보이죠?

 

우선 클로드 AI를 실행해서 코드 작성이 가능한지 확인해 봅니다.

간단하게 시작했어요.

 

핸드폰 화면을 원하는 크기의 검은색 도트로 채우는 코드 알려달라고 하니

별거 아니라는 듯 바로 나오더군요.  신기합니다

 

나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기
나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기

 

이젠 이 점들을 움직이게 해야 합니다.
말 귀가 어두워진 것 같아 영어도 사용해 봅니다.

나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기
나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기


위에서 아래로 흐르는 화면을 캡처했습니다. 

영화 매트릭스에서 소스코드가 무작위로 위에서 아래로 흐르는 것처럼 움직이더군요.

다시 한번 요청합니다.

 

나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기
나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기

 

많이 균일해졌는데  한 턴이 지나니 해상도 문제인지 간격이 겹치는 문제가 나타납니다.

이것도 해결이 되나 궁금했는데....

이런 망할!  무료 버전이다 보니 더 이상 수정이 불가능하네요.

 

무료 사용이 가능한 다른 AI인 구글 제미나이의 도움을 받기로 합니다.
클로드 AI가 만든 마지막 코드를 그대로 가져와 제미나이에게 분석을 맡깁니다.

그리고 내가 원하는 기능을 요청합니다.

 

클로드와 달리 제미나이 기본 버전은 코드를 실행시키는 창이 없더군요.
메모장에 html파일로 로컬에 저장해 두고 크롬에서 실행하는 방법으로 진행했습니다.

 

제미나이는 역시 대인배답게 수많은 수정 요청을 꿋꿋하게 제한을 두지 않고 알려줬습니다.

다만 내가 원하는 방향과 자꾸 다른 곳으로 가려고 하는 게 문제더군요.

 

나도 코딩이란 걸 해보자. 그걸로 안경 렌즈를 팔아보자. - undefined - undefined - 아이디어 실행하기

  

코드가 점점 꼬이는 것 같아 결국 제미나이는 포기하게 됩니다.

그리고 바로 쳇 gpt로 갈아탔습니다.

 

다들 AI에 따라 코딩 능력이 다르고 걔중 클로드의 손을 들어주는 분들이 많은 것으로 알고 있는데

저는 챗GPT 가 가장 잘 맞더군요.

 

제미나이와 클로드가 해결하지 못한 것을 한방에 해결했습니다.

턴이 지나도 균일하게 흐르는 애니메이션이 완성되었습니다.

 

자신감이 붙으니 이것저것 다 해보고 싶더군요.

도트의 크기와 간격을 조정하는 버튼을 추가합니다.

이왕이면 속도 조절도 되면 좋겠네요. 이것도 추가!

전체화면에서 띄우고 싶다. 화면을 터치하면 버튼을 숨기고, 일시 정지 버튼도 추가해 줘....

 

이런저런 요청을 하는데 모두 한방에 해결됩니다.

진짜 우리는 지금 어떤 세상에 살고 있는 걸까요? ㅎㅎ

 

암튼 여러 AI의 도움을 받아 내가 원하는 프로그램이 모두 완성되었습니다.

 

 

 

 

독학으로 해결하기 위해 며칠을 고생했던 아이디어였는데

한 시간 만에 내가 원했던 것보다 더 좋게 완성된 것을 보니 눈물이...ㅠㅠ

정말 좋은 세상입니다.