[SSC24] 03. 스스챌 개발일지 | 스타일가이드를 생성하고, 개발을 시작했어요 🎧 | Swift Student Challenge

 

스타일 가이드를 생성하며

어느정도 디자인의 큰 틀만 잡아두고 디자인 컨셉이나, 색감, 폰트 패턴들이 조금씩 정해진게 보여서, 스타일 가이드를 생성하고 하나씩 적용했다.

18, 19일 이틀에 걸쳐서 폰트와 컬러 스타일을 정의하고, 공통으로 사용하는 컴포넌트를 생성했다.

기획해가면서 디자인도 조금씩 수정했다!..

 

주제는 파킨슨병을 위한 투약일지이다.

파킨슨병 자체가 주로 50대 이후부터 나타나는 증상이어서 주 타겟이 어르신들이라는 점에서 색을 사용할 때 고려될 점이 분명히 있지만,, 스스챌이라는 대회(?)이기 때문에 색감에서 주는 앱의 컨셉과 느낌을 조금 더 살리고자,, 일단 진행한다!.. 

 

개발을 완료하고 사용성측면에서 좀 더 명확하게 해야겠다 싶으면 색상을 수정할 것이다 🫥

 

 

 

 

 

 

개발을 시작했어요-!

플레이그라운드앱에서는 컬러를 extension에서 지정해줘야 쉽게 불러올 수 있다..!

일반 앱에서는 컬러명 앞에 "."만 붙여서 사용할 수 있었는데, 플레이그라운드앱은 아직인가보다.

extension Color {
    static let Primary = Color("Primary")
    static let DarkBlue = Color("DarkBlue")
    static let Background = Color("Background")
    static let GrayAF = Color("GrayAF")
    static let GrayF6 = Color("GrayF6")
    static let TextBlack = Color("TextBlack")
}

 

 

폰트도 스타일가이드에서 지정해준 대로 extension에서 정의해줬다.

extension Font {
    static let onboardingTitle: Font = .system(size: 60, weight: .heavy)
    static let onboardingBody20: Font = .system(size: 20, weight: .semibold)
    static let onboardingBody18: Font = .system(size: 18, weight: .semibold)

    static let title1B: Font = .system(size: 40, weight: .heavy)
    static let title2B: Font = .system(size: 32, weight: .bold)

    static let headLine1: Font =  .system(size: 24, weight: .semibold)
    static let headLine2: Font =  .system(size: 20, weight: .semibold)
    static let headLine3: Font =  .system(size: 18, weight: .semibold)
    
    static let button1: Font = .system(size: 40, weight: .semibold)
    static let button2: Font = .system(size: 18, weight: .regular)
    static let button2B: Font = .system(size: 20, weight: .bold)
    
    static let button3: Font = .system(size: 20, weight: .regular)
    static let button3B: Font = .system(size: 20, weight: .bold)

    static let body20: Font = .system(size: 20, weight: .regular)
    static let body18: Font = .system(size: 18, weight: .regular)
    
    static let footnote: Font = .system(size: 16, weight: .regular)
}

 

 

플레이그라운드에서는 자동으로 파일을 정렬해준다. 내 맘대로 순서를 바꾸지 못한다는 것이다!!

그래서 파일명 앞에 숫자를 넣어줘서 관리하기 용이하도록 만들었고, 이만큼 뷰를 그렸다!-@!

 

어젯밤 자기 전에 개발하면서 생각보다 데이터 다루는 게 까다롭겠다는 생각이 들었다..

25일 내에 구현할 수 있을지 걱정되어서.. 시간을 좀 더 할애하려고 일찍 일어났다 🥲