Coffee & Chocolate 그리고 Computer Science...

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 관련 쉐이더 코드도 작성해 준다. 

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

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

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

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

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

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

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

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

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

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

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

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