MC2에서 도전해보았던 검색 기능에 대한 설명

[seoyounghan]

검색 기능 설명

안녕하세요. 오전반 타냐입니다 :) 이번에 MC2 시연할 때 많은 분들이 "이거 어떻게 구현했어요?" 라고 해주셨던 검색 기능에 대한 설명입니다.

검색에서 제가 생각했던 기능은 다음과 같습니다.

1. 영어의 대소문자 구분 없이 검색
2. 한글도 처리가 되어야 함
3. 검색에 해당되는 부분은 글자색을 빨강 처리해주기

구현된 화면 입니다

코드로 먼저 보시면

    func HighlightText(fullText: String, searchText: String) -> Text {
        guard !searchText.isEmpty else {
            return Text(fullText)
        }

        let ranges = rangesOfSubstring(fullText: fullText, searchText: searchText)

        var result = Text("")
        var currentIndex = fullText.startIndex

        for range in ranges {
            if range.lowerBound > currentIndex {
                let beforeMatch = fullText[currentIndex..<range.lowerBound]
                result = result + Text(beforeMatch)
            }

            let match = fullText[range]
            result = result + Text(match).bold().foregroundColor(.red)

            currentIndex = range.upperBound
        }

        if currentIndex < fullText.endIndex {
            let remainingText = fullText[currentIndex..<fullText.endIndex]
            result = result + Text(remainingText)
        }

        return result
    }

    func rangesOfSubstring(fullText: String, searchText: String) -> [Range<String.Index>] {
        var ranges: [Range<String.Index>] = []
        var searchRange: Range<String.Index>?

        while let range = fullText.range(of: searchText, options: .caseInsensitive, range: searchRange ?? fullText.startIndex..<fullText.endIndex) {
            ranges.append(range)
            searchRange = range.upperBound..<fullText.endIndex
        }

        return ranges
    }

일단 그래프 뷰에서는 모든 검색 가능한 택스트 들은 이 함수를 통해 반환되고 있습니다.
fullText는 원래 보여주는 모든 텍스트를 매개변수로 받았고, searchText는 검색창에 들어온 텍스트를 받았습니다.
그 후에 만약 searchText로 검색창에 들어온 값이 없다면 그냥 fullText를 반환해줍니다.
rangesOfSubstring을 통해서 fullText 안에서 찾은 searchText의 위치를 반환해줍니다.

해당 위치들을 ranges로 받아서 result 값을 <검색된 인덱스 보다 작은 인덱스에 있던 값들> + <검색된 값> + <검색된 인덱스 이후 인덱스에 있던 값들> 형식으로 더해줍니다. <검색된 값>은 볼드 + 빨간색 형태로 더해집니다. 😊

아쉬웠던 부분은 처음 생각했던 디자인 에서는 텍스트를 하이라이팅(배경이 노란색)으로 처리해주는 디자인이였지만 빨간색 폰트를 주는 방식으로 변경된 점입니다.
background가 들어가면 Text 형식이 아닌 View 형식이 되어서 처리가 어려워지는 문제가 있어서 해당 방식으로 구현하게 되었습니다.

swift에서 문자열 다루는 것도 어려웠고, 영어(대소문자 구분 없이 처리) + 한글 처리 를 동시에 하려니 조금 어려운 부분이 있었습니다!ㅜ
그래도 시연할 때 많은 분들이 질문을 주셨던 부분이라 뿌듯함이 있었습니다 👍🏻
제가 구현한 방식을 개선할 방법이나 백그라운드로 처리할 방법을 알고계신다면 댓글 남겨주세요 🙏🏻

[chongin12]

text 이어붙이는 개념이 멋지네요!!! 👍

[seoyounghan]

그 전에는 Text 자체를 이어붙일 수 있다는 생각을 해본적이 없었는데, 이번 프로젝트로 배워갑니다!

[anjiniii]

Range<String.Index> 는 처음 봤어요! String이 포함되어 있는 Index를 Range로 받아올 수 있군용!!
정말 많은 고민을 하셨던 흔적이 보입니다 ㅎㅎ
그리고 Text를 더할 수 있다니!! 검색 외에도 String 안에 여러 디자인 요소가 필요할 때 유용할 것 같아요!
너무 신기해서 몇 가지 시도해봤습니다! (영어 대소문자 처리는 고려하지 않았어요ㅎㅎ)

아래는 fullText를 하나씩 돌면서 searchText에 들어있는 글자인지 확인하는 방식입니다!

private func searchTextView(_ searchText: String) -> Text {
    let fullText = "SwiftUISwift"
    
    if searchText.isEmpty { return Text(fullText) }
    
    var result = Text("")
    fullText.forEach { text in
        let textString = String(text) // text가 String.Element가 되어서 String으로 변환해주었습니다!
        let isContain = searchText.contains(textString) // 현재 글자가 searchText에 포함되어 있는지 확인해요!
        let newText = Text("\(String(text))").foregroundStyle(isContain ? Color.red : Color.black)
        
        result = result + newText
    }
    
    return result
}

그리고 아래는 어떻게 하면 background를 쓸 수 있을까 고민하다가 해보았습니다!
그냥 HStack에 spacing을 0으로 두고 Text를 나열해주었습니다.. 하하..

@ViewBuilder
private func searchTextView(_ searchText: String) -> some View {
    let fullText = "SwiftUISwift"
    
    HStack(spacing: 0) {
        ForEach(Array(fullText), id: \.self) { text in
            let textString = String(text)
            let isContain = searchText.contains(textString)
            
            Text(textString)
                .background(isContain ? Color.yellow : Color.clear)
        }
    }
}

이미지는 순서대로 searchText, 첫 번째 시도?, 두 번째 시도? 입니당

위 형태처럼 Text를 이어줄 때는 Text가 길어지면 자동으로 내려가더라구요!
하지만, HStack으로 묶어줄 때는 Text가 길어지면 아이들이 쪼그라들어용.. 하하
background를 줄 수 있는 다른 좋은 방법은 없을지 고민해봐야겠습니당 흠 🤔