Coffee & Chocolate 그리고 Computer Science...

지난 편에 이어서...  (링크 : https://opendev4u.tistory.com/181 )

최초에 질문 했을때 combine 사용한 예시 코드를 설명해 주었다. 

그래서 다음과 같이 다시 물어보았다.

"그럼 mvvm 구현을 위해 combine을 써야 한다고 말해줘야 하는거 아닌가?" 

라고 물었더니 다음과 같이 피드백을 주었다. 

다음과 같이 피드백을 주었다. 

MVVM 을 구현 한 소스코드 예시는 크게 3가지 방법을 알려주었다. 

Combine 없이 구현 하는 방법 / Combine 이용하는 방법 / RxSwift 이용하는 방법 

그리고 부가 설명을 해주었다. 

과연 이것만 가지고 이해가 될까?? 아직 부족해 보이고... 아하 하기엔 애매한 면이 있어

더 공부 해 볼겸 해서 좀 더 물어보면서 파보기로 했다.

#3 에 이어서...

나는 아직 MVVM을 제대로 사용해 본적이 없다.

MVVM 을 사용할 만한 서비스 앱을 아직 운영해보거나 개발해 본적이 없다.

개인 스터디로 하기엔 먼가 한계가 있어 보였다. 

그래서 최근 쓰기 시작한 Claude 를 통해 MVVM을 정리해보고자 한다. 

다음과 같이 질문 했다.

"mvvm 에 대해서 설명해줘 나는 도무지 모르겠어 이해가 안되... 이해좀 시켜주었으면 해" 

Claude의 답은 다음과 같았다 .

MVVM의 핵심은... 내가 잘못 이해 했을 수도 있지만 

- 데이터 바인딩을 통한 자동 업데이트 

이지 않을까 싶다. 

그 이유는 Claude가 설명해 주며 Combine을 활용한 코드를 안내해 주었다.

이 소스코드를 보면서 일부 생략? 누락? 한 듯한 로직이 보여서 눈으로 읽어 컴파일 돌려 보았다. 

눈에 뜨던게 .sink 라는 블록 함수? 와 &cancellables 라는 항목명이 눈에 띄었다.

이건 머지?라고 인터넷에서 검색을 하고 나서 보니.... Combine을 이용한 코드 였던 것이다. 

나는 Combine에 대한 존재는 알고 있었다. mvvm을 좀더 쉽게?구현하는데 RxSwift라는 3rd party 라이브러리가 있고 

이것과 유사한 라이브러리가 Apple에서 제공해준게 Combine 이였기 때문이다. 

그런데 코드가 누락된? 부분이 많아 실제 컴파일 돌리기엔 리스크가 컸다. (사실 컴파일 에러도...)

먼가 이상함을 느껴 다시 Claude에게 질문해 보았다.

"이 코드에 .compactMap하고 sink 함수는 rxswift에 있는거야? 아님 combine에 있는거야" 

답은 다음과 같이 나왔다. 

내용을 보면 RxSwift, Combine비교 내용도 있고 어떤 상황이냐에 따라 어떤걸 쓸지도 알려주고 있었다. 

To be continue...

claude 유료로 사용하면서 SKT 고객이라 perplexity를 사용하고 있다. 

한달여 사용하면서 느낀것은.... perplexity와 claude와 성격이 다르다는 점이다. 

느낀점을 적어보면

perplexity는 검색 결과 기반의 데이터를 가지고 AI로 가공한 것으로 보여지고 

그러다 보니 검색 키워드에 따라 검색 결과가 달라지니 AI 모델 결과도 달라진다. 

10년 넘게 프로그래밍 관련 일을 한 프로그래머로써 내 지식 중 하나를 검색했을때 과연 내가 아는 결과가 나오는지 궁금했다. 

대표적으로 GPUImage와 VideoToolbox에 대해서 직접적으로 물어보지 않고 간접적으로 물어봤다. 

그 결과 내가 원하는 답을 얻기 위해서 무려 10번의 재 질문이 필요했다. 

검색 주제는 다음과 같다

"스위프트로 동영상 생성하는 기능을 만들고 싶다. 관련 라이브러리를 알려줘"

이게 기본 질의 였고 그 다음으로 이것을 좀 더 디테일하게 물어봤다 

예를 든다면 "애플에서 제공해주는 공식은 없어?", "라이센스 이슈는 피했으면 좋겠어", "ffmpeg 빼고 이야기 해줄래?" 

GPUImage는 마치 얻어 걸린것 처럼 표시 해주었으며

videotoolbox는 내가 직접 말하기 전까지는 아에 찾아 내지도 못했다. 

내가 느끼기엔 perplexity를 기술적 용도로 활용하기엔 한계가 좀 보였다. 

그리고 claude에 대해서 ...

공부할겸 최신 기법들을 에제와 함께 요청했더니 코드는 잘 구현해 준다. 

그런데..... 완성도가 높지 않다. 

이 말은 경험이 많은 개발자가 직접 달라 붙어서 좀더 완성도 있는 코드를 요청해야 하며 

이 코드를 그대로 쓰면 안되고 분석을 통해 로직 확인을 거친다음 써야 한다는 것이다.

심저어 metal 관련 쉐이더 코드도 작성해 준다. 

카메라 필터 앱을 만들어 볼려고 코드를 요청 했더니 다 작성해주었다 

그런데...... 동작은 제대로 안하는 경우가 종종 있고.... 주의사항에 도 나와 있다....

즉... 나온 코드를 로직 검증 작업을 하고 이용 해야 하는 것이다. 

경험자와 처음 접해본 사람의 차이는.... 코드에 대한 빠른 검사 이다. 

그리고 이 걸로 앱 코딩 된다고 하는 분들은...... 경험자 이거나..... 

개발에 아무것도 모르는 분들이 이것을 가지고 프로그래밍 할 수 있다...

개발에 타고 난 사람이 적성을 늦게 찾은 것 뿐이다. 

이걸 가지고 코딩한다고 해서 개발자라고 다년간 경험을 가진 개발자들을

무시하는 행위를 하는 선무당이 없었으면 한다.....

그리고......... 너무 의존하지 않았음 한다..... 어시스트 정도로 생각해야 하지 메인으로 접근하면 안된다.

 지금은 저렴하게 이용 가능한것처럼 보이겠지만 

없으면 일을 할수 없는 수준이 되면.... 개발자 몸값보다 더 비싸게 이용해야 할 것이다.

안녕하세요 이번에 AI를 활용하여 프로그래머와 소통이 어려운 이유에 대해서 좀 더 쉽게 소통하는 법과 문제를 해결하는 법에 대해 알아 보고 있습니다.

이번 시간에는 제가 유로 구독중인 Claude를 이용하여 이전과 동일하게 질문을 해보았습니다. 

제가 한 질문 : 프로그래머와의 효과적인 소통을 위한 실제 대화 예시

Claude 의 답변 :

"프로그래머와의 효과적인 소통을 위한 실제 대화 예시"를 제공해 드리겠습니다. 이는 프로그래머와 비 기술 팀원 간의 소통을 개선하는 데 도움이 될 수 있습니다.

1. 기능 요청 시: 비 기술 팀원: "사용자 프로필 페이지에 '친구 추천' 기능을 추가하고 싶어요." 프로그래머: "알겠습니다. 이 기능의 구체적인 요구사항은 무엇인가요? 예를 들어, 추천 기준이나 표시할 친구의 수 등이 있을까요?" 비 기술 팀원: "네, 사용자의 관심사를 기반으로 5명의 친구를 추천하고 싶어요."
2. 버그 보고 시: 비 기술 팀원: "로그인 페이지에서 문제가 발생했어요." 프로그래머: "어떤 종류의 문제인가요? 특정 오류 메시지가 표시되나요?" 비 기술 팀원: "비밀번호를 입력하고 로그인 버튼을 클릭하면 화면이 새로고침되고 다시 로그인 페이지로 돌아가요."
3. 일정 관련 대화: 비 기술 팀원: "새 기능 개발이 언제쯤 완료될까요?" 프로그래머: "기능의 복잡도와 현재 진행 중인 다른 작업들을 고려해야 합니다. 대략적인 추정을 위해 기능 명세를 자세히 살펴보고 팀 회의를 통해 일정을 조율해보는 게 어떨까요?"
4. 기술적 제약 설명 시: 프로그래머: "요청하신 기능을 구현하려면 서버 인프라를 크게 수정해야 해서 시간이 많이 걸릴 것 같습니다." 비 기술 팀원: "어떤 점에서 시간이 많이 걸리나요? 대안은 없을까요?" 프로그래머: "현재 서버 구조로는 대량의 데이터 처리가 어렵습니다. 기능을 단순화하거나 단계적으로 구현하는 방법을 고려해볼 수 있겠네요."
5. 우선순위 조정 시: 비 기술 팀원: "이 기능이 정말 중요해서 다른 작업보다 먼저 처리되면 좋겠어요." 프로그래머: "현재 진행 중인 프로젝트의 일정과 리소스를 고려해야 합니다. 이 기능의 구체적인 비즈니스 가치를 설명해주시면, 우선순위 조정을 팀과 논의해보겠습니다."
6. 기술 선택에 대한 설명 시: 프로그래머: "이 기능을 구현하기 위해 새로운 프레임워크를 도입하려고 합니다." 비 기술 팀원: "새 프레임워크를 사용하면 어떤 이점이 있나요?" 프로그래머: "개발 속도가 빨라지고, 향후 유지보수가 더 쉬워질 것입니다. 다만, 팀원들의 학습 시간이 필요할 수 있어요."

이러한 대화 예시들은 상호 이해와 명확한 의사소통을 촉진하며, 프로젝트의 원활한 진행을 돕습니다. 효과적인 소통은 기술적 세부사항과 비즈니스 요구사항 사이의 균형을 맞추는 데 중요합니다.

확실히 차이가 있어 보이긴 합니다. 

한 두개 정도의 AI 서비스에서 결과를 더보고 비교 분석 자료를 만들어 공유 하도록 하겠습니다. 

안녕하세요 이번에 AI를 활용하여 프로그래머와 소통이 어려운 이유에 대해서 좀 더 쉽게 소통하는 법과 문제를 해결하는 법에 대해 알아 보고 있습니다. 

이번 시간에는 가장 유명한 ? 챗 지피티를 이용하여 Gemini와 동일하게 질문을 해보았습니다. 

제가 한 질문 : 프로그래머와의 효과적인 소통을 위한 실제 대화 예시

Chat GPT 의 답변 :

프로그래머와의 소통에서 가장 중요한 요소는 명확하고 구체적인 설명입니다. 목표, 문제점, 요구 사항을 명확하게 전달하는 것이 매우 중요하며, 이와 동시에 프로그래머의 의견을 경청하고 그들의 언어를 이해하려는 노력이 필요합니다. 아래는 효과적인 소통을 위한 대화 예시입니다.

예시 1: 요구 사항 전달

당신:
"현재 고객들이 회원 가입 절차에서 시간을 너무 많이 소비하고 있다고 합니다. 이 문제를 해결하기 위해 회원 가입 단계를 간소화하고 싶습니다. 현재 5단계로 나눠져 있는데, 이를 2단계로 줄일 수 있을까요? 예를 들어, 이름과 이메일만 입력하면 다음으로 넘어가게 하고, 추가 정보는 나중에 입력하도록 유도하는 방식으로요."

프로그래머:
"그렇게 하려면 회원 가입 양식을 두 개의 단계로 나누고, 첫 번째 단계에서 최소한의 정보만 받아야 합니다. 두 번째 단계에서는 선택적으로 나중에 추가 정보를 입력하도록 구현할 수 있습니다. 혹시 두 번째 단계로 넘어갈 때 특정 알림이나 팝업을 보여주길 원하시나요?"

당신:
"네, 첫 번째 단계 완료 후 추가 정보를 입력하지 않더라도 계속 진행할 수 있다는 안내 팝업을 넣으면 좋겠습니다. 추가 정보를 입력할 수 있도록 나중에 프로필 설정 페이지로 유도하는 알림도 추가해 주세요."

프로그래머:
"알겠습니다. 추가 정보 입력 유도는 회원 가입 후에도 설정할 수 있게 알림 시스템을 추가하고, 회원 가입 시 단계는 2단계로 간소화하겠습니다."

예시 2: 버그 리포트

당신:
"저희 웹사이트의 로그인 기능에 문제가 있는 것 같습니다. 몇몇 고객들이 비밀번호를 정확하게 입력했는데도 로그인에 실패했다고 보고했습니다. 특히 Chrome 브라우저에서 발생하는 것 같아요."

프로그래머:
"로그인 시 어떤 에러 메시지가 뜨는지 확인할 수 있을까요? 혹시 특정 시간대에 문제가 발생하거나 공통점이 있나요? 그리고 해당 문제가 발생한 Chrome 버전도 확인해 주실 수 있나요?"

당신:
"에러 메시지는 '비밀번호가 틀렸습니다'라고 나오고 있어요. 그런데 고객들이 비밀번호를 맞게 입력했음에도 불구하고 발생한 거라 문제인 것 같아요. 시간대나 공통점은 아직 파악되지 않았고, Chrome 최신 버전에서 주로 발생하는 것 같아요."

프로그래머:
"알겠습니다. Chrome 최신 버전에서 로그인 처리 관련 문제를 확인해 보겠습니다. 혹시 비밀번호 입력 과정에서 자동완성 기능이 작동하고 있는지 확인해 보실 수 있을까요? 그 부분도 원인일 수 있습니다."

당신:
"네, 고객들에게 확인 요청하겠습니다. 감사합니다."

예시 3: 기능 구현 논의

당신:
"사용자들이 프로필 사진을 업로드할 때 이미지 크기 제한을 2MB로 설정해 주셨으면 합니다. 그리고 업로드 가능한 이미지 형식을 JPG, PNG로 제한해 주세요."

프로그래머:
"2MB 제한과 파일 형식을 JPG와 PNG로 설정하는 것은 문제없습니다. 혹시 이미지 업로드 실패 시 보여줄 오류 메시지가 따로 필요하신가요? 그리고 업로드한 이미지를 자동으로 크기 조정하거나 압축하는 기능도 필요하신가요?"

당신:
"네, 이미지 크기나 형식이 맞지 않을 때는 '이미지 크기나 형식이 맞지 않습니다. 2MB 이하의 JPG 또는 PNG 파일을 업로드해 주세요.'라는 메시지를 보여주면 좋겠습니다. 자동 크기 조정 기능은 지금은 필요 없을 것 같아요."

프로그래머:
"알겠습니다. 그럼 오류 메시지를 설정하고, 업로드 형식 및 크기 제한을 적용하겠습니다."

이런 방식으로 구체적인 요구 사항과 문제를 설명하고, 프로그래머가 필요로 하는 추가 정보를 제공함으로써 소통의 효율성을 높일 수 있습니다.

3가지 상황을 예시로 들어서 설명해 주었는데 

기획자 관점은 맞지만 어느정도 기술을 알고 있는 기획자 관점의 피드백 이였습니다. 

질문 할 때 마다 다르긴 합니다. 

이런 부분은 좀 더 테스트 후 정리해서 추가로 올려드리도록 하겠습니다. 

감사합니다. 

안녕하세요 이번에 AI를 활용하여 프로그래머와 소통이 어려운 이유에 대해서 좀 더 쉽게 소통하는 법과 문제를 해결하는 법에 대해 알아 보고자 합니다.

저는 개발자로써 10년 넘게 현업에서 많은 분들과 소통이 어려운 점이 많았습니다. 

특히 비개발자 분들과의 소통은 매번 어려웠고 매번 힘들었습니다. 

하지만 특정 계기로 인하여 사내 세미나를 진행 후 많은 성과를 거두게 되었습니다. 

그래서 그걸 어떻게 풀어 나가면 좋을까 싶어 이제는  미지근해진 AI에게 물어보고 그걸 바탕으로 제가 내용을 적어 보려고 합니다.

초기엔 텍스트 밖에 없지만 AI를 이용한 삽화 제작 추가 등을 진행 할 예정입니다.

먼저 오늘은 구O의 Gemini에게 물어 본 내용을 공유 드려 보고자 합니다.

제가 한 질문 : 프로그래머와의 효과적인 소통을 위한 실제 대화 예시

Gemini의 답변 :

상황: 웹사이트에서 특정 기능이 작동하지 않는 문제 발생

비전공자: "저기요, 홈페이지에서 로그인 버튼 누르면 아무 반응이 없는데 왜 그런 거예요?"

프로그래머: "네, 어떤 브라우저에서 그런 현상이 발생하나요? 그리고 로그인 버튼을 누르기 전에 어떤 작업을 하셨나요?"

비전공자: "크롬에서 그래요. 아이디랑 비밀번호를 입력하고 로그인 버튼을 누르면 화면이 그대로예요."

프로그래머: "네, 확인해 보겠습니다. 로그인 기능은 백엔드 서버와 통신해서 사용자 정보를 확인하는 과정이 있는데, 네트워크 문제나 서버 오류일 가능성이 있습니다. 잠시만요."

[프로그래머가 로그를 확인하고 문제를 분석하는 동안]

비전공자: "그럼, 로그인 기능 말고 다른 기능들은 다 잘 되나요?"

프로그래머: "네, 다른 기능들은 정상적으로 작동하는 것을 확인했습니다. 로그인 기능에 문제가 있는 것으로 보입니다."

[잠시 후]

프로그래머: "원인을 찾았습니다. 로그인 버튼을 클릭했을 때 전달되는 데이터 형식에 문제가 있었네요. 이 부분을 수정하면 해결될 것 같습니다."

비전공자: "아, 그렇군요. 감사합니다. 언제쯤 수정될까요?"

프로그래머: "오늘 안에 수정해서 다시 테스트해보고, 문제가 없으면 바로 반영하도록 하겠습니다."

효과적인 소통을 위한 팁

• 구체적인 질문: "왜 안돼요?" 보다는 "어떤 상황에서 어떤 문제가 발생하나요?"처럼 구체적으로 질문합니다.
• 전문 용어를 피하고 쉬운 말로 설명: "백엔드 서버" 대신 "데이터를 처리하는 컴퓨터"처럼 쉽게 이해할 수 있도록 설명을 부탁합니다.
• 시각 자료 활용: 화면 캡처나 그림을 활용하여 문제 발생 부분을 정확히 보여줍니다.
• 경청하고 공감: 프로그래머가 설명하는 내용을 잘 듣고, 그들의 입장에서 생각하려고 노력합니다.
• 문제 해결 과정에 참여: 문제 해결 과정에 함께 참여하면서 개발 과정을 이해하려고 노력합니다.

위 대화에서처럼, 프로그래머와의 소통은 서로의 입장을 이해하고 존중하는 것이 중요합니다. 비전공자는 문제를 정확하게 설명하고, 프로그래머는 전문적인 지식을 바탕으로 문제를 해결하고 결과를 명확하게 설명해주는 것이 효과적인 소통의 시작입니다.

더 궁금한 점이 있으시면 언제든지 질문해주세요.

다음과 같은 질문을 통해 더욱 구체적인 답변을 얻을 수 있습니다.

• "프로그래머와의 미팅에서 어떤 주제를 다루면 좋을까요?"
• "프로그래밍 용어를 쉽게 이해할 수 있는 방법이 있을까요?"
• "프로그래머와의 협업을 더욱 원활하게 하기 위한 방법을 알고 싶습니다."

어떠 신가요? 과연 이 내용이 여러분에게 도움이 될까요? 한방에 이해 하신 분들도 계시겠지만 아직도 무슨말인가 하시는 분들이 많으실 것 같습니다. 이제 이런 답변 내용들을 모아 정리하여 이해가 쑥쑥 되도록 웹툰화? 동영상화 하도록 할 계획 입니다. 

다음 제 2화에 다시 찾아 뵙겠습니다.

감사합니다. 

아이들이 가지고 노는 장난감이 생각보다
잘 부셔진다 일부러 그러는건가 싶을 정도로 내구도가
약한 제품들이 있다.

당연히 단가 생각하면....

그동안 많은 것을 고쳤다 납땜에 접착제 글루건 많은걸 했지만 블로그에 안올렸다 ㅋㅋㅋ

오늘 수리한건

제품명 : 마@렛 소방차

구입처 : 쓰윽

이제품은 사자마자 5분도 안되서 사다리가 바로 뽀각났다 ... 그리고 받침발도 한개가 ...

받침발은 플라스틱 커터로 모두 잘랐다...

받침발은 나중에 나사못으로 다시 장착 예정!

해체 후 접착 그리고 받침발 부품을 다듬어서

다시 부러질걸 대비해서 부목? 으로 붙이...

수리 완료! 또 다른곳이 부러지겠지 ㅜㅜ

업무용 맥 그리고 개인 맥에 Mac OS Sonoma를 설치 했다.

Xcode 14.3 이 실행이 안된다... Xcode 15로 업데이트 해야 하는... 

문젠 Xcode 15에서 빌드 이슈가 있는 라이브러리가 서드 파티 업체에서 해결이 안되서 Xcode 14.3으로 하라고 한다... (끙...)

구버전의 Xcode는 다음 링크에서 다운로드 받을 수 있다. (애플 개발자 멤버십 계정만 되는듯? )

https://developer.apple.com/download/all/

그리고 압축을 푼다음... 특정 경로에 넣어두고

Terminal을 실행 하여 다음과 같이 명령어를 입력 하면 실행된다.

터미널 입력 : [저장폴더]/Xcode.app/Contents/MacOS/Xcode 

 레퍼런스 :

https://stackoverflow.com/questions/76958016/is-there-a-way-to-run-xcode-14-on-macos-sonoma

QM6 세 가지만 개선하면 지금보다 좀 더 팔릴것이다.

첫째. 2열 시트 앞뒤 슬라이딩 기능 :
리클라이닝이 필요한게 아니라 2열 승차 공간을 줄여 적재공간을 늘릴수 있는 기능이 제공 되어야 한다. 형제 모델? 이라 할수 있는 닛산 엑스트레일에는 있는걸로 안다.

둘째. 시트 착좌감 및 왼발 풋 영역 개선 :
왼발 거치 판 봐봐라 .... 프랑스에선 수동 차량만 있나? 정말 대충 만든 느낌... 착좌감 ... 이건 케바케라

셋째. 보스 우퍼 제거 :
가솔린 기준으로 보스 우퍼가 트렁크 바닥에 위치해서 트렁크 하부 공간이 똥망이 되었다. 우퍼가 들어가기 보다는 서브 우퍼? 같은 작은 타입으로 교체되야 하지 않을까싶다. 보스 우퍼는 qm6 에게 있어서 감점 요소라고 본다.

다시 말하지만 트렁크 길이를 확장한 롱바디형이 나오지 않는 이상 트렁크 적재공간을 늘려야 한다.

스포티지나 투산 보다 적재공간이 작은건 실망 스럽다.

실내 폭도 좁지만 트렁크 공간 작은건 차 크기 대비 이해가 안된다.

I found it a few months ago.

Some of the image content on the service I manage.

Attributes for images with issues.

- image color space : Gray 

- color profile : General gray gamma 2.2 profile 

- image size : When width or height is divided by 2 and the remainder is 1. 

  => ex

   a.  width : 1000 / height : 800 --> correct 

   b. width : 1001 / height : 800 --> Found issue. ( black line is showing right edge in image )

   c. width : 1000 / height : 803 --> Found issue. ( black line is showing bottom edge in image ) 

   d. width : 1001 / height : 803 --> Found issue. ( black line are showing bottom and right edge in inage )

for example image

i'm not found same issue in iOS 15.7(iPhone or iPad) and iOS 16(Simulator).