[SwiftUI] Log in 화면을 만들어 보쟈📱

요즘 내가 가장 빠져있는 것은 우리 모공모공 스터디 모임..🥰

이제 문법 공부도 쬐애끔 진도도 나갔겠다,,

슬슬 SwiftUI 를 시작해보자는 차원에서 그 첫번째 과제가 바로 로그인 화면 만들기!

---

우리가 참고한 로그인 화면 구성은

1. 제일 윗 줄에 Log in 타이틀이 제일 크게 자리잡고     2. 아이디와 비밀번호를 입력하라는 메세지     3. 이메일 형식의 아이디와 비밀번호를 입력할 수 있는 텍스트필드     4. 약관에 동의하는 토글 버튼 생성      5. Sign in 버튼 생성

이런 형식의 가장 기본적인 로그인 화면 구성이었다.

 

 

그리고 덧붙여서 구현하기로 했던 조건들이 있었는데, 

1. 아이디는 이메일 형식만 입력될 수 있도록 한다.     2. 아이디와 비밀번호 칸이 모두 입력되어 있고, 약관 동의 토글 버튼이 활성화 되어 있어야 로그인이 성공적으로 이루어진다.     3. 비밀번호 텍스트필드 값은 암호화가 되어있어야 한다.

이렇게 3가지를 구현하기로 했었다.

(근데 왜 때문에 정신을 빼놓았는지.. 2번을 빼놓고 구현해버렸..ㅜ)

---

일단 제일 먼저,, 쉬운 것 부터 하자면 Login 타이틀을 만들어 줘야겠댜,,!

쉬운 것 먼저 하면 왠지 모르게 자신감이 생기그등여..

우리가 원한건 제일 위에 타이틀이 위치하게 하고, 왼쪽 정렬로 하기로 했다.

import SwiftUI

struct ContentView: View {    
    
    var body: some View {
        VStack {
            Spacer()
            
            // 로그인 타이틀
            Text("Log in")
                .frame(width: 350, alignment: .leading)
                .font(.system(size: 60))
                .fontWeight(.bold)
                .padding(.bottom, 40)

 

그래서 일단 Text 를 이용해서 Log in 타이틀을 쉽게 만들어 줄 수 있었다.

일단! 여기서 살짝 알게 된 것들..

 

1️⃣ 아무리 frame 에 alignment 를 .leading 으로 설정해도 왼쪽 정렬이 안되는 것이지..?

그래서 처음에는 HStack 에 넣어서 Spacer() 주는.. 아주..ㅎ 일차원적인 생각을 했다가~

생각해보니까 width 설정을 안해서 지금 이 Text 가 왼쪽정렬이 되어도 가로길이가 짧아서 안먹는구나..!! 하는 생각을 하게 되었지 뭐람..~

그래서 frame을 width: 350 으로 설정하니까 그제서야 원하는 결과가 나온 것이지 뭐람..~

 

2️⃣그전까지는 font로 글씨 크기 조절할때 .largeTitle 이렇게밖에 조절 안되는지 알았는데,,

.system 에서 size 조절하면 되는거 조원들때매 알았쟈나~ 신기하쟈나~ 그래 안될리가 없지..

 

3️⃣ padding도 그동안 ()생성자만 붙여서 기본으로만 사용했었는데 padding(.bottom, 40) 이렇게 어디다가 얼만큼 패딩을 주고

싶은지설정하면 이렇게나 ,, 내가 원하는 만큼 간격이 생기는것도 조원들때매 알았쟈나~ .top 으로 하면 위에도 생기고~

 

(뭐 고작,, 텍스트 하나 넣으면서도 이렇게 배우는게 많은거람,, 정말 스유 재밌는 놈임 ㅜ)

 

그래서 일단 구현한게 여기까지,, 말만 거창했지 한게 없네,,^^ 머쓱타드

 

---

그리고 이제 아이디랑 비밀번호를 적을 텍스트필드를 만들어 보쟈

 

Text("Introduce your credentials")
            .font(.system(size: 22))
            .frame(width: 350, alignment: .leading)
            .padding()

일단 너의 정보를 입력하라는 안내메세지를 만들어주고

아이디랑 비밀번호를 사용자가 입력을 하면, 그 입력한 값을 받아서 보여줘야하니까

일단 변수 만들어 보겠슘다..~

 

    @State var id: String = ""
    @State var password: String = ""

요기서 아주 중요한 @State 상태 프로퍼티를 사용하쥬

@State를 선언한 변수의 값이 변경된다면 view를 다시 생성해서 업데이트된 값으로 표시해줍니댜

그래서 아이디와 비밀번호를 새롭게 입력해서 새로운 값이 설정되면, 그에 따라 다시 뷰를 그리게 되는 것이쥬

@State 와 바인딩이 되는 프로퍼티에 $를 붙여서 표시를 해줘야하는 경우가 있는데, TextField 가 바로 그런 경우임. 

TextField 인스턴스를 생성할 때 이미 text 에 String값을 binding 해달라고 설정되어 있음. 그래서 $ 안붙여주면 빨간줄 바로 ㅃㅣ용임

 

<관련 디벨로퍼>

https://developer.apple.com/documentation/swiftui/state

State | Apple Developer Documentation

 

Group {
            // 이메일로 로그인하는 입력 텍스트필드. id 값을 받아서 넣습니당.
            TextField(" Enter your E-mail", text: $id)
                .frame(height: 60)
                .keyboardType(.emailAddress) //이메일 형식 키보드 타입
                .autocapitalization(.none) // 첫글자 대문자로 시작 해제
                .autocorrectionDisabled(true) // 자동완성 해제
                .overlay(RoundedRectangle(cornerRadius: 10)
                            .stroke(Color.blue, lineWidth: 2)
                 )
                .padding(.bottom, 20)

그래서 이렇게 TextField를 통해서 너의 이메일을 적어주라~ 하고 만들었숨다

여기서 또 알게된 몇가지가 있눈데,,

 

1️⃣ .keyboardType(.emailAddress) => 텍스트필드에 입력을 하게 될 때, 이메일 형식으로 입력해야 하니까 키보드스타일 자체를 이메일서타일로 바꿔줌. 가끔 앱을 이용하다보면 이메일 적으라고 함서 그냥 냅다 기본 키보드 나올 때,, 상당히 불편하잖슴,, 근데 이걸 이렇게 바꿀 수 있는 거였다는거 아니겠숨,, 이거 하나하나가 얼마나 사용자가 편하게 사용할지를 결정하는 거라고 생각함,, 내가 느껴봐쨔나..~ 그래서 숫자만 나오게 할 수도 있고,, 째뜬 이건 나중에 차근히 또 쓰면서 공부해봐야겄숨

 

2️⃣ .autocapitalization(.none) => 이것도 조원분께 배운건데 자꾸 아이디 입력할 때 보면 첫글자가 대문자로 나오는거임.. 얼마나 불편합니꽈 저는 소문자로 시작한다구욜,, 대문자로 시작하는 분들도 계신가효,,? 저는 못봤슴다,, 째뜬 그래서 첫글자가 대문자로 나오는거 해제해주는 기능!!! 얼마나 재밌습니까

 

3️⃣ .autocorrectionDisabled(true) => 않이,, 계속 이메일 다 입력해놓으면 자꾸 자동완성되어서 엄한 글자로 바뀌는거임,, 그것 또한 얼마나 화가납니까,, 내 앱이 다른 사람을 화나게 하면 되겠습니까,, 절대 그럴 수 엄따. 그래서 자동완성 해제해주는 코드임,,~ 최고다 진짜

 

4️⃣ .overlay => 이건 사실 비밀번호 입력할때, 비밀번호 입력한거 보이게 하는 그 눈 모양의 버튼 아십니까,,? 그거랑 textField랑 같이 묶어서 한 줄에 넣고 싶어서 설정한 overlay입니다. 그래서 여기서는 그렇게 필요한 기능은 아니긴 한데 패스워드 필드랑 모양 맞춰주려고 넣었숨다. 그래서 모서리가 10정도로 둥근 직사각형에 테두리는 파란색으로 2정도의 굵기를 줬다~ 이 말입니다~

 

 

그리고 이제 대망의 비밀번호를 구현해보겠슙니다 

사실 대망까지는 아니고 중망 정도..? 일단 그 비밀번호가 암호화 되었다가 눈 토글 버튼을 누르면 암호화된 비밀번호가 잘 작성되고 있는지 확인하는 작업을 구현하고 싶었음다

그래서 변수를 하나 생성해야 했숨다. 그 용도는! 암호화된 비밀번호를 보여줄지 말지 누르는 토글에 Bool 값을 할당해줄거라서~!

 

@State var showPassword: Bool = false

이 변수도 @State 로 상태변화를 확인할거고, false 일때는 암호화 되어있고 true 가 될 때 토글이 활성화 되어서 비밀번호를 보여줄거임

 

 	HStack {
                    if showPassword {
                        
                        // 비밀번호가 암호화 안될 때 : TextField
                        TextField(" Enter your password", text: $password)
                            .frame(height: 60)
                            .autocapitalization(.none)
                        
                    } else {
                    // 암호화 될 때 : SecureField
                        SecureField(" Enter your password", text: $password)
                            .frame(height: 60)
                            .autocapitalization(.none)
                    }
                    
    
                    // 암호화된 비밀번호 확인하는 토글 버튼
                    
                    Button {
                        showPassword.toggle()
                    } label: {
                        Image(systemName: "eye")
                            .foregroundColor(.gray)
                    }
                    Spacer()
                }
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.blue, lineWidth: 2)
                )
            }

이렇게 구현해 보았숩니다. 암호화는 여러 블로그 참조해서 구현해봤숨다

일단 if 조건문을 활용해서

만약 showPassword 가 true 면 TextField로 입력하고, false 면 SecureField 로 입력하게 해줘,,!!! 하는 코드를 구현합니댜

SecureField 는 텍스트필드와 비슷하지만, 사용자의 민감한 정보를 암호화해서 보여주고 싶을때 사용한다고 합니당

 

<관련 디벨로퍼>

https://developer.apple.com/documentation/swiftui/securefield

SecureField | Apple Developer Documentation

 

 

그리고 눈모양 이미지를 이용해서 showpassword 에 toggle 을 붙여서 버튼을 생성해줍니다~ 

그냥 토글 자체 객체로 사용하려고 했는데 뭔가 잘 안돼서 찾아보니까 토글이 Boolean 타입에 메소드로 사용할 수 있더라구엽

이 눈모양 토글이랑 비밀번호 입력란이랑 같이 나란히 놓고싶어서 HStack 으로 묶어서 한 줄로 표현함

 

그래서 일단 여기까지 구현한게

 

요로케 해보았찌요,, 왜케 뿌듯한겨,,,?

 

---

그리고 이제 이용약관(맞는지 모르겠지만 찾아보니까 그랬음) 체크하는 토글 만들기

토글 사용해야 하니까 Boolean 타입 변수 하나 생성 해주고

@State var agreeToTerms: Bool = true

그냥 토글에다가 넣어서 하면 되는거라 ..!!! 넣어서 얘도 @State 니까 바인딩 해주기~

Toggle("Agree to terms and conditions", isOn: $agreeToTerms)
                .font(.system(size: 20))
                .padding(.top,20)

 

 

---

그리고 이제 아이디랑 비밀번호 다 입력하면 Sign in 버튼 누르기

원래는 버튼 누르면 뭐,, 새로운 창이 열리거나 해야하는데 일단 우리는 로그인 화면만 구상하기로 해서 

로그인이 잘 되었는지 우쨌는지 결과만 알 수 있게 하기로 함

 

그래서 로그인 잘 되었는지 상태만 보여주는 텍스트 하나 만들고, Sign in 버튼 생성함

// 로그인이 되었는지 실패했는지 보여주는 텍스트에 담을 String 변수
@State var loginResult = ""


// 로그인이 잘되었는지 우쨌는지 보여주는 텍스트. 밑에 함수에 따라서 달라짐

            Text(loginResult)
                .foregroundColor(.red)
            
            
        // 로그인하는 버튼. 버튼을 누르면 loginCheck() 함수가 실행되고, 그에 따라서 위의 텍스트가 달라짐
        
            Button {
                loginCheck()
            } label: {
                Text("Sign in")
                    .font(.system(size: 25))
                    .frame(width: 300, height: 35)
            }
            .buttonStyle(.borderedProminent)
            
            
            
   // login 체크하는 함수. 아이디랑 패스워드를 조건절로 확인해서 성공했는지 우쨌는지 알랴줌
   
   func loginCheck() {
        if id == "yyomzzi@gmail.com" && password == "1234" {
            loginResult = "성공적으로 로그인이 되었습니다."
        } else if id == "" && password == "" {
            loginResult = "아이디와 비밀번호를 입력해주세요."
        } else if id != "yyomzzi@gmail.com" || password != "1234"{
            loginResult = "아이디 혹은 비밀번호가 일치하지 않습니다."
        }
    }

아 여기서 하나의 중대한 발견이 있었는데

Button 에다가 buttonStyle 을 넣어주고 싶어서 borderedProminent 로 설정을 하고, 아무리 frame 조절을 하려고 해도 안먹는것 아니겠는가,,? 그래서 왜 안되는지 아무리 검색해도 원하는 답은 나오지 않아서 않이 왜 안돼~~!~!~! 를 몇 번이나 외치다가

혹시 Text에 직접 설정하면 되려나? 하고 했는데 되는거임,,;,,;;;;;!!! 이게 왜 되는거지..? 그리고 왜 안되는거지..? 하다가 답을 못찾았는데 아마 buttonStyle이 리턴하는 값이 View 라서 스타일을 지정하고 frame을 지정하려고 하면 안될 거라는 조원분의 말씀..!!

공식문서 보니까 buttonStyle 이 메소드라는 것을 볼 수 있었움 ..!!! 덧붙여서 버튼의 내부 컨텐츠에 따라서 자동으로 크기가 조절되기 때문에 외부에서 frame 설정을 하게 되면 무시될 수도 있다는,, chatGPT 의 답변도 있었움,, 아직 확실히 이해한건 아니지만 어찌되었건 !!! 스타일을 적용하면 버튼의 내부적인 크기조절로 외부에서 프레임 조절이 안되는구나~~ 배울 수 있었음. 

 

<관련 디벨로퍼>

https://developer.apple.com/documentation/swiftui/view/buttonstyle(_:)-7qx1 

buttonStyle(_:) | Apple Developer Documentation

 

그리고 일단 loginCheck 함수는 일단 아이디와 비밀번호가 일치해야 한다는 가정 하에 함수를 구성해봤는데

다른 조원분들 보니까 이메일 정규식을 사용하신 것을 볼 수 있었음..!!! 

생각도 못했던 것인데 다음에는 꼭 정규식씨를 사용해야겠다고 생각했움

 

---

그래서 나의 찐찐찐최종본은 바로 이것 입니다

 

 

 

동영상으로 로그인하는 것까지 보여드리자면,, 

방황하는 마우스가 너무,,, 뚝딱이네,,,,,

 

 

어찌되었건 아직 많이 부족하지만 그래도 얼추 구색은 갖춘,,^^ 로그인 화면 완성..!!!!!!

조원들 다 비슷하지만 각자 다르게 구현한 것도 너무 신기했고, 그래서 참 많이 배울 수 있었던 로그인 화면 만들기

아직 더 구현해야할게 많아서,, 다음에 더 구현해서 공부한 거 있으면 포스팅 해야지 ~~!~!~!

 

그나저나 개발 블로그 이렇게 쓰는게 맞나 몰러,, 일단,, 해보자,,~~~!~!~!~!

 

혹시 이 글을 보실 수도 있는,, 천재만재 개발자분들은 언제든 제 글에 오류가 있거나, 혹은 이 글과 관련해서 공부하면 좋은 것들 있으시면 댓글 대 환 영 입니댜 ❤️‍🔥