Coffee & Chocolate 그리고 Computer Science...

 Claude AI 를 이용해 Tuist를 공부하려고 봤더니... Tuist 설치 부터가 최신 자료가 아니였다.... (쿨럭)

그래서 현재 SKT 회선을 보유한 나로써는 병행해서 사용 하고 있는 Perplexity 서비스를 이용해 보았다.

일단...... 먼저 말하면.... 잘못된 정보? 라고 하기 애매한 ...

암튼 설치 하다 삽질을 더 했다. Tuist 라이브러리 설치에만 무려 오랜 시간이 소요 되었다. 

심지어... 예전 Tuist 설치 방식을 계속 알려주고 있었다... (이건 서비스 로직에 사소한 버그가 있지 않나.... 의심스럽다.) 

Brew 방식으로 설치하라고 해서 설치했다가..... ---> 삭제

RTX 방식으로 설치하라고 해서..... 설치 했다가 ----> 삭제 

그래서 물어봤다.

와........ 진심 화가나기 시작 하였다.... 

mise 라는걸 이용해서 설치하란다..... 근데...... 이상하게....... 2번 부터 안되었다... ( 하.... 머지...)

머지?........ 하아... 이때 부터 갑자기 쌔함이......... 

다음과 같은 과정을 진행했다.

먼가 잘되는거 같아 보였는데....

그리고 다음과 같은 일련의 과정을 해보니........

와........ 역시나..... 쌔한 기운은.... 어디 많이 못간다..... 

Tuist 명령어가 안되기 시작..... 

또 다시... 물어보고....

(과정은 생략했다...)

또 안되서 또 다음과 같이 물어보고...

하라는 해도 상황이 똑같다.... ㅋㅋㅋ

또 물어보았다...

(과정 또 생략....)

역시나 문제가 또 발생 다시 또 물어봄...

(과정은 역시나 생략.... , 왜나고? 똑같아서...)

머 당연히 문제 해결은 안되었기에...

과정은..... 또........  생략... 

그리고........ 

이쯤 되면........ 이제 누가 이기는지 해보자고 전투 모드로 전환....

역시나 또 안.... 되는...

열심히 알려주는데.... 먼가 내용이 똑같은? 게 많다.... 

하라는대로 해보니... 역시나 문제가 발생.... 또 물어봤다!

아니나 다를까.... 안된다. ... .(쿨럭 )

삽질을 통해서... 결국.... 되었다.

그래서..... tuist로 프로젝트가 생성되는지도 알아보았다. 

와.... 여기까지 하니... 새로운 문제가... 

(예전에는 구글을 뒤졌다면 지금은.... perplexity에게 물어본다. )

그래서 또 물어보았다...  

그러고 나서.... 궁금한게 생각나서 추가 질문을 하였다.

이렇게 해서......Tuist를 설치 했다.....

그리고 프로젝트 파일도 만들었더니.........

나는 만든 프로젝트가 UIKit 기반일줄 알았는데...... 

swiftui가 기본이였다....  ( 쿨럭 )

그래서 또 물어보았다...

그랬던 것이였다... 

다음 시간에는 UIkit 기반으로 만들어 봐야 겠다.

최근 공부를 시작하면서 최신?이라고 하긴 좀 어렵지만 실무에서 사용하지 못해왔던 여러가지들을 찾아 가며 공부를 해보고 있다 

물론 써봐야 확실히 감이 오지만 

오늘은 ...... 디자인 패턴? 이라고 해야 할거 같은데 MVVM과 TCA 차이점에 대해 알아 보고자 한다. 

제목과 같이 질문을 하니........ 다음과 같이 알려주었다. 

그리고 둘의 차이점에 대한 코드를 요청 하였다 

한번 더 살펴 보아야 겠다.....

좀 더 물어 봐야 겠음.

claude로 어떻게 공부를 할 수 있을까 궁금해서 기존에 필터 앱을 업데이트 하고자 다음과 같이 요청 하였습니다. 

"새로운 질문을 하지 swift 언어로 iOS 15 이상에서 카메라앱을 만들거야 동영상 촬영 앱이고 기능은 다음과 같아 1. 동영상 촬영 버튼을 누르면 촬영이 되고 10초뒤에 촬영이 자동 종료 되 2. 동영상 필터는 2개가 제공될거야 3. 필터는 흑백하고 카툰 필터 4. 녹화된 영상은 앱내에 저장하는데 사진앱으로 내보내기 기능을 제공 5. 녹화사에는 전면 카메라 녹화나 후면 카메라 녹화 둘중 하나만 되게 할거야 6. 고급 카메라는 PIP 기능으로 영상이 녹화되게 할거야 7. 카메라 촬영중에는 화면에서 10초 타이머가 보여지면서 촬영된 영상이 실시간으로 보이게 할거야 여기까지 "

이렇게 요청 하니 CIFilter 기반 이 나왔다.....

CIFilter로는 퍼포먼스가 안나오는걸 알고 있기에... 다시 요청 했다.

"아 미안해... metal framework로 구현해줘 CIFilter는 퍼포먼스 안나와"

다음과 같이 안내해 주었다.

코드를 보니.... 분류가 안되어 있어 재차 요청 했다.

"파일명 별로 구분좀 해줄 수 있을까?"

위와 같이 프로젝트 구조도 알려주었다. 

그래서 각각의 소스코드는 다음과 같다. 

// MARK: - Models/ShaderTypes.swift
struct Vertex {
    var position: SIMD3<Float>
    var textureCoordinate: SIMD2<Float>
}

enum FilterType {
    case normal
    case grayscale
    case cartoon
}

// MARK: - Shaders/CameraShaders.metal
"""
#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float3 position [[attribute(0)]];
    float2 textureCoordinate [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float2 textureCoordinate;
};

vertex VertexOut vertexShader(uint vertexID [[vertex_id]],
                             constant VertexIn *vertices [[buffer(0)]]) {
    VertexOut out;
    out.position = float4(vertices[vertexID].position, 1.0);
    out.textureCoordinate = vertices[vertexID].textureCoordinate;
    return out;
}

fragment float4 fragmentShader(VertexOut in [[stage_in]],
                             texture2d<float> texture [[texture(0)]],
                             constant int &filterType [[buffer(1)]]) {
    constexpr sampler textureSampler(mag_filter::linear,
                                   min_filter::linear);
    
    float4 color = texture.sample(textureSampler, in.textureCoordinate);
    
    // Normal
    if (filterType == 0) {
        return color;
    }
    // Grayscale
    else if (filterType == 1) {
        float gray = dot(color.rgb, float3(0.299, 0.587, 0.114));
        return float4(gray, gray, gray, color.a);
    }
    // Cartoon
    else if (filterType == 2) {
        float3 original = color.rgb;
        
        float2 texelSize = float2(1.0 / texture.get_width(),
                                1.0 / texture.get_height());
        
        float3 edge = float3(0.0);
        for(int i = -1; i <= 1; i++) {
            for(int j = -1; j <= 1; j++) {
                float2 offset = float2(float(i), float(j)) * texelSize;
                float3 sample = texture.sample(textureSampler,
                                            in.textureCoordinate + offset).rgb;
                edge += abs(sample - original);
            }
        }
        
        float3 quantized = floor(original * 5.0) / 5.0;
        float edgeMask = 1.0 - smoothstep(0.2, 0.3, length(edge));
        return float4(quantized * edgeMask, color.a);
    }
    
    return color;
}
"""

// MARK: - Controllers/MetalCameraController.swift
class MetalCameraController: NSObject {
    private var captureSession: AVCaptureSession?
    private var videoOutput: AVCaptureMovieFileOutput?
    private var textureCache: CVMetalTextureCache?
    
    private let metalDevice: MTLDevice
    private let metalCommandQueue: MTLCommandQueue
    private let pipelineState: MTLRenderPipelineState
    private let vertexBuffer: MTLBuffer
    
    private var currentFilterType: FilterType = .normal
    
    private let vertices: [Vertex] = [
        Vertex(position: SIMD3<Float>(-1, -1, 0), textureCoordinate: SIMD2<Float>(0, 1)),
        Vertex(position: SIMD3<Float>(1, -1, 0), textureCoordinate: SIMD2<Float>(1, 1)),
        Vertex(position: SIMD3<Float>(-1, 1, 0), textureCoordinate: SIMD2<Float>(0, 0)),
        Vertex(position: SIMD3<Float>(1, 1, 0), textureCoordinate: SIMD2<Float>(1, 0))
    ]
    
    override init() {
        // ... (이전 코드와 동일)
    }
    
    private func setupTextureCache() {
        // ... (이전 코드와 동일)
    }
}

// MARK: - Views/Components/CameraView.swift
class CameraView: MTKView {
    var renderDelegate: CameraRenderDelegate?
    
    override init(frame frameRect: CGRect, device: MTLDevice?) {
        super.init(frame: frameRect, device: device)
        setupView()
    }
    
    required init(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        self.device = MTLCreateSystemDefaultDevice()
        self.backgroundColor = .black
        self.framebufferOnly = false
    }
}

// MARK: - Views/Components/CameraControls.swift
class CameraControls: UIView {
    var onRecordTap: (() -> Void)?
    var onFilterTap: (() -> Void)?
    
    private lazy var recordButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("녹화", for: .normal)
        button.backgroundColor = .red
        button.layer.cornerRadius = 25
        button.addTarget(self, action: #selector(recordButtonTapped), for: .touchUpInside)
        return button
    }()
    
    private lazy var filterButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("필터 변경", for: .normal)
        button.addTarget(self, action: #selector(filterButtonTapped), for: .touchUpInside)
        return button
    }()
    
    private lazy var timerLabel: UILabel = {
        let label = UILabel()
        label.textColor = .white
        label.font = .systemFont(ofSize: 24, weight: .bold)
        label.text = "10"
        label.textAlignment = .center
        return label
    }()
    
    @objc private func recordButtonTapped() {
        onRecordTap?()
    }
    
    @objc private func filterButtonTapped() {
        onFilterTap?()
    }
    
    // ... Layout 코드
}

// MARK: - ViewControllers/MetalCameraViewController.swift
class MetalCameraViewController: UIViewController {
    private var cameraView: CameraView!
    private var cameraControls: CameraControls!
    private var cameraController: MetalCameraController!
    
    private var currentFilter: FilterType = .normal
    private var recordingTimer: Timer?
    private var remainingTime: Int = 10
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupCameraController()
        setupBindings()
    }
    
    private func setupViews() {
        cameraView = CameraView(frame: view.bounds, device: MTLCreateSystemDefaultDevice())
        cameraControls = CameraControls()
        
        view.addSubview(cameraView)
        view.addSubview(cameraControls)
        
        // Layout constraints
    }
    
    private func setupCameraController() {
        cameraController = MetalCameraController()
    }
    
    private func setupBindings() {
        cameraControls.onRecordTap = { [weak self] in
            self?.handleRecordTap()
        }
        
        cameraControls.onFilterTap = { [weak self] in
            self?.handleFilterTap()
        }
    }
    
    private func handleRecordTap() {
        if recordingTimer == nil {
            startRecording()
        } else {
            stopRecording()
        }
    }
    
    private func handleFilterTap() {
        switch currentFilter {
        case .normal: currentFilter = .grayscale
        case .grayscale: currentFilter = .cartoon
        case .cartoon: currentFilter = .normal
        }
        // Update filter in camera controller
    }
    
    // ... Recording and timer related methods
}

// MARK: - Utils/VideoExporter.swift
class VideoExporter {
    static func exportVideo(at url: URL, completion: @escaping (Result<URL, Error>) -> Void) {
        // Video export implementation
    }
}

// MARK: - Protocols/CameraRenderDelegate.swift
protocol CameraRenderDelegate: AnyObject {
    func renderFrame()
    func updateFilter(_ type: FilterType)
}

여기까지...  

직접 코드를 나눠어 넣었을때.... MetalCameraViewController.swift 파일에 먼가 이상함을 감지했다. 

to be continue...

최근 Claude 를 활용해서 필터 효과가 동영상 제작 앱을 하나 만들어 보았습니다. 

마무리 직압 중인데.... 무언가 남겨야 할 거 같아...

시작글을 올릴려고 합니다. 

이 동영상 촬영 앱은

Metal Framework를 사용한 소스코드이며 녹화와 화면에 실시간으로 보여지도록 되어 있습니다.

Swift 언어 기반에 SwiftUI는 사용하지 않았습니다. 

내일 부터 정리해서 올리도록 하겠습니다. 

지난 편에 이어서...  (링크 : 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화에 다시 찾아 뵙겠습니다.

감사합니다.