포스트

단어장 프로젝트 (1)

새로운 팀프로젝트가 시작

디자인은 Codebase로 간다.

내가 담당하는건 단어 외우기 기능이다.

우선은 간단하게 Figma로 디자인을 했는데 그것을 기반으로 디자인을 하려고한다.

UIDesign

CleanShot 2024-05-13 at 16 55 08@2x

디자인은 이렇게 할 예정이다.

사실 디자인부분은 크게 언급할게 없을듯 하다.

simulator_screenshot_8195E05B-C462-459B-9F67-83C1E475F4E1

디자인을 하다가 셀간격에서 막혔다.

현재 셀간격을 줄수가 없다.

아무래도 CollectionView로 바꿔야 할듯 하다.

컬렉션뷰로 바로 전환에 들어갔다.

1
2
3
4
5
6
7
8
9
lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.minimumLineSpacing = 10
        layout.itemSize = .init(width: UIScreen.main.bounds.width, height: 50)
        var view = UICollectionView(frame: .zero, collectionViewLayout: layout)
        view.register(VocaQuizMainCollectionViewCell.self, forCellWithReuseIdentifier: "VocaQuizMainCollectionViewCell")
        return view
    }()

갑자기 width가 기억이 나지 않았다.

UIScreen.main.bounds.width 잊지 말자.

lineSpacing을 통해 셀간 간격을 줄수가 있게 되었다.

Simulator Screenshot - iPhone 15 Pro - 2024-05-13 at 21 22 28

우선 구현은 완료

이제 셀의 corner를 주면 될듯하다.

왜 안보이나 고민했는데

width: UIScreen.main.bounds.width 이녀석인것같다.

값을 낮춰보니 적용 완료.

Simulator Screenshot - iPhone 15 Pro - 2024-05-14 at 00 13 15

아무래도 width가 너무 길었던것같다.

게임 페이지도 디자인을 한다.

CleanShot 2024-05-13 at 22 51 38@2x

Simulator Screenshot - iPhone 15 Pro - 2024-05-14 at 00 13 18

갈색으로 뜨는 warning잡느라 시간이 오래걸렸다.

오늘은 기본 뼈대 디자인 완료

내일부터는 코드 시작.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.