[TIL] 2022.04.28 (가위바위보 CLI게임, 인스타 UI 클론 코딩1)

CLI란 무엇일까?

 

CLI란?
- 명령 줄 인터페이스(Command Line Interface)의 약어.
- 터미널을 이용해 사용자와 컴퓨터가 상호 작용하는 방식이다.
- 간단하게 말하자면, 사용자가 입력한 것을 컴퓨터가 출력해주는 것을 말한다.

 

오늘은 사용자인 내가 입력을 하면 컴퓨터가 해당 입력값을 받아 출력을 해주어 터미널에 보여주는 가위바위보 게임을 만드려고 하였고, 앞에서 공부한 문법들을 생각하며 만들었다.

 

다음은 CLI 가위바위보 게임의 전체적인 코드이다.

 

import random

option = ['가위', '바위', '보']
computer = random.randint(0, 2)
computer_value = option[computer]

while True:
    user_value = input('가위, 바위, 보 : ')

    if user_value not in option:
        print("다시 입력해주세요.")
    else:
        break

print(f'플레이어는 {user_value}를 선택, 컴퓨터는 {computer_value}를 선택했습니다')

if computer_value == user_value:
    print('비겼습니다')
elif user_value == '가위':
    if computer_value == '바위':
        print('졌습니다')
    else:
        print('이겼습니다')
elif user_value == '바위':
    if computer_value == '보':
        print('졌습니다')
    else:
        print('이겼습니다')
elif user_value == '보':
    if computer_value == '가위':
        print('졌습니다')
    else:
        print('이겼습니다')

와! 이겼다!

 

 

컴퓨터는 랜덤한 값을 가지기 위해 import random을 해서 랜덤 모듈을 가져왔다.

computer 변수에 0~2까지 랜덤으로 돌아가는 값을 넣어주었고, 랜덤한 값에 해당되는 option 리스트 순서를 가져와 computer_value에 넣어주었다.

 

while True: 반복문을 사용하여 기본적으로는 계속 반복되게 설정해주고 사용자(나)가 입력한 값을 넣어주기 위해 input()을 사용하여 입력받은 값을 user_value에 넣어주었다.

 

이제 해당 값이 option의 내용과 맞는지 확인하기 위해 조건문(if)을 사용하여 코드를 완성하려 했다.

아뿔싸! 여기서 멍청하게도 위의 코드와는 다르게 맨 처음에 선언해주었던 코드가 생각났다.

 

# 이거 아님!
if user_value != option:
    print("다시 입력해주세요.")
else:
    break

 

해당 코드는 맨 처음에 적어주었던 코드이다.

이 코드를 사용하여 계속 실행시켜봤는데, '가위, 바위, 보' 중 하나를 입력하거나 틀린 값을 입력해도 자꾸만 무한 반복이 되는 것을 볼 수 있었다.

이게 어떻게 된건가 싶었는데, 문제가 확실히 있었다.

 

input()을 통하여 입력받은 값은 문자(string)의 형태를 가지고 있었고, option[]에 들어간 값들은 리스트(list)의 형태를 갖고 있었기 때문에 (string) != (list)가 되어 계속 반복되었던 것이었다.

 

금새 깨닫고 만 어리석은 너구리는 option 리스트 안에 있는 값이 입력받은 user_value 문자의 값과 비교할 수 있도록 다음과 같이 코드를 바꿔주었다.

 

# 이게 맞음!
if user_value not in option:
    print("다시 입력해주세요.")
else:
    break

 

해당 코드와 같이 바꿔주니 option 리스트에 있는 값이 user_value의 값과 다른가? 의 조건에 부합하게 되어 해당 조건문은 정상적으로 실행되었다.

 

이후에 입력받은 값이 맞는다면 break로 반복문(while)을 빠져나오고, print(f'플레이어는 {user_value}를 선택, 컴퓨터는 {computer_value}를 선택했습니다')와 같은 f string의 형태로 구성하여 출력해주었다.

 

이제 다음 입력받은 사용자의 가위바위보 값과 컴퓨터가 랜덤하게 생성받은 가위바위보의 값에 대한 승부를 내기 위해 해당 코드를 추가해주었다.

 

if computer_value == user_value:
    print('비겼습니다')
elif user_value == '가위':
    if computer_value == '바위':
        print('졌습니다')
    else:
        print('이겼습니다')
elif user_value == '바위':
    if computer_value == '보':
        print('졌습니다')
    else:
        print('이겼습니다')
elif user_value == '보':
    if computer_value == '가위':
        print('졌습니다')
    else:
        print('이겼습니다')

 

해당 코드는 computer_value의 값이 user_value의 값에 대한 조건문들이다.

 

1) if computer_value == user_value: 를 통해 computer_value의 값과 user_value의 값이 일치(==)하면 '비겼습니다'를 출력하며 터미널이 종료된다.

 

2) elif user_value == '가위': 를 통해 user_value의 값이 '가위'이면 if computer_value == '바위':가 실행되고 computer_value의 값이 '바위'이면 '졌습니다'를 출력하고, else:를 통해 아닌 조건이 되면 '이겼습니다'를 출력하도록 만들어 주었다.

 

-

 

이제 다음으로 인스타 UI 클론 코딩을 위해 인스타그램 페이지를 참고하여 html파일과 css파일을 구성해주었다.

 

참고한 Instagram 페이지

 

원래 SNS를 잘 안하는 나는 Instagram을 사용해보질 않아서 급하게 가입을 하여 테스트용 게시글을 하나 만들었다.

그렇게 생성된 게시글과 UI들을 보며 '이렇게 만들면 되겠구나..' 하고 기본적인 틀(Mockup)을 구성해주었다.

 

이번에는 같이 프로젝트를 하셨던 팀원분의 추천으로 피그마(Figma)를 이용하여 Mockup을 만들어 주었다.

 

Mockup

 

해당 Mockup을 참고하여 프로젝트를 진행하고자 하였다.

오늘은 그렇게 많이 하지 못하였는데, 이것은 밑에서 후술하도록 하겠다.

 

상단 nav, 들어가는 요소들에 대한 설정

<nav>
    <div class="nav_container">
        <div class="nav1">
            <img class="logo_text"
                 src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
                 alt="Instagram_logo">
        </div>
        <input id="search" type="search" class="input_search" placeholder="검색">
        <div class="nav2">
            <img src="https://cdn-icons.flaticon.com/png/128/4690/premium/4690939.png?token=exp=1651128060~hmac=2750315b4763ec7d2c29b355137e22b2"
                 alt="홈">
            <img src="https://cdn-icons.flaticon.com/png/128/2550/premium/2550207.png?token=exp=1651126067~hmac=560069e375c60d1033b95bb95931a56e"
                 alt="DM">
            <img src="https://cdn-icons.flaticon.com/png/128/3757/premium/3757685.png?token=exp=1651127957~hmac=ae629743c71b5f4fdc171ff7eb295036"
                 alt="탐색">
            <img src="https://cdn-icons-png.flaticon.com/128/1077/1077035.png"
                 alt="좋아요">
            <img class="pic" src="/image/r_icon1.png" alt="마이페이지">
        </div>
    </div>
</nav>

 

하나의 <nav>구역을 만들어주고 CSS를 통해 세부적인 디자인을 구성하였으며, <nav>구역 안에 Instagram 로고 / 검색 기능 / 바로 가기 아이콘 및 프로필 각각의 구역들을 따로 나누어주어 디자인을 추가로 진행해주었다.

 

우선은 3가지를 구성하도록 하였고, 오늘 하루는 급하게 마무리 지었다.

 

-

 

잠깐의 변명을 해보자면 오늘은 뭔가 많이 부족한 하루였다.

 

파이썬 게임 만들기에서 큰 힘을 쏟아내버렸던 것인가, 수면이 조금 부족하다는 느낌이 들어서 컨디션이 저조했다.

 

그리고 Mockup을 정한 뒤 코드 구성에 대해 생각하고 있다가 이번 프로젝트에는 Git을 활용하여 프로젝트를 만들고 공부하면 좋겠다! 라는 생각을 가졌다.

하지만 Git 사용법에 거의 무지하던 나는 Sourcetree를 이용하는 도중 여러가지 이해를 하지 못하는 상황에 놓여져서 많은 시간을 소비했다.

Github와 Git, Sourcetree를 이용하여 코드를 관리하려고 이것저것 시도를 하다가 만들어둔 프로젝트를 날려먹고 다시 만들고를 반복하며 피폐해진 것 같다.

늦은 시간까지 고생한 결과 Github에 파일을 올리는 것에 성공하게 되었고,

 

그래서 오늘 하루를 마무리하며 아직은 많이 부족한 나 자신에 대해 회의감이 들기도 하고 더욱 열심히 해야겠다는 생각이 들었다.

 

:I