YATA

YATA는 macOS용 자작 앱으로 Yet Another Telegra.ph App을 의미하는 약어이다. 약 2달 반 정도 개발하면서 생각나는 것들을 정리해본다.

선택한 페이지 웹 브라우저에서 보기

툴바에 버튼을 추가하여 왼쪽 목록에서 선택한 페이지의 내용을 웹브라우저에서 보는 것을 구현했다.

페이지 콘텐츠 형태 변환

NSTextView에서 몇 가지 텍스트 서식 및 문단 스타일에 대해 구현을 했으니, telegrap.ph에서 받아온 페이지 내용을 변환해서 보여주는 부분과 반대로 NSTextView에서 저장한 것을 telegra.ph API 문서에 나와 있는 형태로 바꾸는 부분을 구현해야 한다

서버에서 받은 것 보여주기 위한 변환

서버에서 받아온 페이지는 받아오면 내부 모델로 변환해서 저장하고 있다. 내부 모델을 순회하면서 NSAttributedString으로 변환을 해줬다.

사용된 HTML 태그별로 지정한 문단 스타일 또는 텍스트 스타일로 변환을 해주는 것을 구현했다.

서버로 보내기 위한 변환

앱의 편집기에서 텍스트를 입력하게 되면 NSTextView의 textStorage에 저장을 한다. 이를 분석해 변환했다.

먼저 NSTextStorage의 paragraph 속성 순환하면서 문단 스타일이 파악한다. 그리고 그 문단 안에서 지정된 텍스트 스타일을 하나씩 파악하면서 변환을 했다.

대략 이런 모양으로 구현을 했다

func convertText() -> String {

    for paragraph in textStorage.paragraphs {
        
        // 문단 스타일 확인.
        
        paragraph.enumerateAttributes( /* 인자 생략 */ ) { attrs, range, _ in 
        
            // 문단 안에서 지정된 텍스트 스타일 파악
        }
    }
    
    // JSON으로 변환된 것 문자열로 변환
    
    return result
}

새로운 페이지 생성 및 telegra.ph 서버 올리기 성공

새로운 페이지 생성을 위한 기본 작업이 완료되어 서버와 연동 작업을 해보았다.

구현한 다양한 스타일을 적용한 페이지를 만들었다.

작성 후, publish 버튼을 눌러 서버에 올렸다. 그리고 툴바에 있는 지구 아이콘 버튼을 눌러 웹 브라우저에서 확인해보았다.

잘 올라간다!!

이렇게 동작하는 것을 볼 때, 작은 기쁨은 선물이다. :)

메뉴 및 틀바 버튼 상태 변경

텍스트 편집기에서 커서 위치의 텍스트 스타일에 따라 메뉴 및 툴바 버튼의 상태를 변경하는 작업을 했다.

메뉴와 Popover 메뉴는 보일 때, 텍스트 스타일을 확인하여 맞게 변경을 했다.

툴바는 validateToolbarItem()를 구현하여 이 안에서 텍스트 스타일을 확인하여 툴바를 변경했다.

선택된 텍스트에 따라 메뉴에 선택 표시가 나타난다.

선택된 텍스트에 따라 툴바 버튼 모양 변경 및 popover 메뉴에 선택 표시가 나타난다.