드리블 탑 디자인 앱 만들기 Part #1 레이아웃 코딩

자 우리 첫 시리즈에서는 디자이너들의 성지라 불리는 드리블 닷컴에서 앱 컨셉으로 멋진 디자인을 하나 선정해서 디자인을 직접 앱으로 까지 구현에 보는 시리즈를 진행할 예정입니다 그러면 시작해 보겠습니다 우선 구글에서 Dribbblecom을 검색합니다 그리고 ui 로 검색을 하셔서 상단에 보이는 것 중에 네 번째 작품 아주 멋진앱이죠 정재성님이 제작하신 한국 분이신 것 같네요 제작하신 멋진 디자인을 직접 앱으로 구현을 해 보도록 하겠습니다 우선 GIF스크러버로 이미지를 따구요 첫번째 시간은 현재 보이는 이 화면 Html과 CSS로 우선 구성을 할 거구요 뒷 시리즈에서 자바스크립트와 프로그래밍을 이용해서 실제 앱으로 만드는 과정을 진행할 예정입니다 기본적인 개발은 크롬의 개발자 도구를 이용해서 진행이 될 예정이구요 깃 허브에서 무료로 제공하고 있는 아톰이란 에디터의 일부 도움을 좀 받을 예정이예요 atom

io 에 접속하셔서 무료로 다운로드 받아서 사용하실 수 있습니다 자 그럼 시작해 볼까요 우선 작업 폴더를 하나 만들어 보겠습니다 Dribbble Todo 라는 폴더를 만들고 일단 폴더엔 index html 아 이래서 계속해요 cml tel 써서 본 모양 잡으시구요 타이틀은 드리블 투두리스트 라고 정하고 그 다음에 스타일 파일을 하나 만들어 주겠습니다 스타일 점 CSS 그리고 링크 스타일 시트 stylecss 여기 세팅이 되었습니다 그럼 이번에는 만든 파일을 탐색기에서 열어 주시면 작업 준비 가 되었죠 F12를 눌러서 개발자 모드를 실행해 주시고 모바일 모드 아이폰X사이즈로 선택을 하셔서 작업 준비를 합니다 개발자 도구에 소스탭에서 애드 폴더를 추가 하시면 작업 한게 바로 적용이 되요 이렇게 선택을 하시고 권한을 승인 해주시면 이렇게 바로 들어왔죠 이렇게 되고 태그를 만들어 볼게요 div 컨테이너 를 먼저 만드시구요 상단에 헤더 영역 컨텐츠 영역, 카드 영역까지 총 3개의 div 를 만들게요 컨텐츠 카드 에어리어 세 가지 영역을 만들고 새로고침 보이시죠 영역이 그럼 이쪽에 소스를 추가해 놨기 때문에 이쪽에 스타일을 플러스 버튼을 누르고 계시면 스타일 시트를 고를 수가 있어요 그러면 스타일에 컨테이너가 추가됐고 소스에 확인를 해보시면 스타일의 추가된 게 보이시죠 이런식으로 작업은 계속 진행 될 예정 입니다 그러면 기본적으로 html , body 가로 세로 사이즈를 지정 해주시고요 마진은 0으로 기본을 잡아주면 됩니다 보이시죠 순서는 바꿀게요 컨테이너 컨테이너 싸이즈도 세로 사이즈를 지정해 줍니다 영역이 넓어진게 보이시죠 컨테이너에는 배경색을 이쪽에 개발자 도구를 띄워서 배경색을 캡쳐 합니다 실제 배경색은 아래쪽에 그라데이션이 들어가 있어서 아래쪽을 다시 복사를 해서 배경을 linear gradient 라고 해 주시고 이렇게 코마를 이용해서 직접 입력해주시면 이렇게 그라데이션이 배경이 똑같이 적용이 됩니다 그러면 일단은 준비가 됐어요 화면 크기를 좀 비슷하게 맞춰주시고 이번에는 전체 컨테이너에 이제 컬러를 포인트 컬러를 흰색으로 지정해주세요 헤더를 꾸며 보겠습니다 왼쪽 가운데 오른쪽 총 세개의 div를 만들어 줄게요 레프트, 타이틀, 라이트 가운데영역에는 투두라고 입력을 해주겠습니다 새로고침을 눌러보시면 글씨가 작죠 모바일 사이즈에 맞는 뷰 포트를 지정을 안해줘서 그런건데요 다른 사이트에 보시면 뷰 포트 샘플이 있어요 복사해서 메타 뷰포트 태그를 넣어주시면 커졌죠? 안쓰는 창은 닫아 주시고 화면에 보이는 아이콘은 폰트어썸 사이트에서 제공하는 폰트를 이용할 예정입니다 폰트어썸닷컴 이라고 입력을 하시고 폰트어썸을 사용하기 위해서는 스타트를 누르셔서 링크를 만들어 주셔야 되요 링크 주소가 나오죠 클릭해서 복사 네 준비가 됐습니다 그럼 바로 아이콘을 검색해서 사용하실 수 가 있어요 메뉴 이 부분을 클릭 에서 복사 하시면 되구요 복사해서 붙여놓고 이번엔 오른쪽에 써치 마찮가지로 이부분 클릭해서 붙여 넣으시고 F5를 눌러서 확인 아이콘이 나오는게 보이시죠 이번엔 아이콘이 나왔으니 스타일링을 해볼게요 패딩 20px 그리고 디스플레이 플렉스 가로배열로 만들어 주시구요 그다음 헤더 아래에 있는 div에는 공통적으로 torx 꼭 초 속성으로 예 안녕 을 해주시면 3개가 나란히 이렇게 가로배치 가 됐습니다 헤더에 레프트는 text-align left 그리고 타이틀은 text-align center 그리고 라이트는 text-align right 이렇게 붙여 주시면 구성이 됬죠 그러면 이번에는 글씨체를 먼저 초반에 맞춰줄게요 구글에서 구글폰트라고 검색 하시면 네 구글에서 제공하는 폰트를 사용할 수 있는데 이중에 가장 비슷한 모양의 roboto를 추가를 해주시면 사용할 수 있습니다 기본 폰트웨이트는 400 이고, 그담에 500을 추가로 이렇게 해주시면 링크 소스가 나오네요 링크 소스는 헤더에 붙여주시고 아래쪽에 폰트패밀리를 복사해서 사용하시면 폰트 패밀리는 html body 에 넣어줄게요 새로고침을 하시면 바뀐게 보이시죠 그러면 이번에는 하단에 컨텐츠 영역을 만들어 볼게요 컨텐츠 영역은 처음에 my image 이미지가 들어갈 자리구요 그리고 중간위치에 큰 글씨 영역이죠 h2 Hello Jane 그다음에 아랫쪽에 p 태그로 그리고 제일 아래 p 태그에는 투데이라는 클래스를 입력하겠습니다 모양이 나왔죠 우선 콘텐츠 영역부터 디자인 해줄게요 여백을 패딩 40픽셀을 주시고 마이 이미지 컨텐츠 안에 있죠 마이이미지는 백그라운드 흰색을 주시고 가로 50px, 세로 50px border-radius로 원형으로 만들어 주시고 그리고 그림자를 만들어 줍니다 10px 만큼 내려온 그림자를 이런 느낌으로 예 이정도 모양이 되겠네요 안의 이미지는 구글에서 iu 를 검색해서 이미지를 하나 골라볼게요 copy image adress background image url 복사한 것을 붙여 넣으시고 background-size : 100px background-position 이정도로 맞춰 주겠습니다 그리고 h2 h2는 폰트 사이즈를 좀 키우구요 30정도로 font weight 두께는 기본 400 이정도 해주시면 될 것 같아요 이번엔 p 태그 p 태그는 마진을 없애주시구요 컨텐츠의 p 태그만 따로 스타일링을 해줄게요 투명도를 05 정도 주시고요 이후에 배경 색에 계속 바뀔 거라 색상을 직접 지정하지 않고 반투명 주었어요 그리고 하단에 따로 투데이라고 클래스를 준 영역있죠? 그부분은 폰트 크기를 12px 정도 주시고 투명도를 다시 진하게 해주시구요 마진을 50 정도 좀 줄일게요 싸이즈를 45 정도로 해 주겠습니다 모양이 대충 나오죠 그리고 이번에는 하단에 카드영역 카드영역은 전체 영역과 그리고 카드 위치를 잡는 카드에이리어를 이렇게 카드라고 먼저 해주고요 그리고 실제 카드 안의 디자인 영역은 inner라고 지정을 해주겠습니다 그럼 inner안에 좌측에 카드아이콘 모양 만들어 주시고 오른쪽에 셋팅 버튼 만들어 주신 다음에 하단의 내용을 하나로 묶을게요 bottom 이라고 하나 묶고 그 안에 p 태그를 9 tasks h2 , personal 여기까지 준비가 됐고 이 아래 영역은 스테이터스 라고 하나로 묶어 주시구요 스테이터스에 오른쪽에 숫자 영역과 왼쪽에 실제 바영역 그려야겠죠 왼쪽은 트랙이라고 할까요 트랙과 트랙 안에 있는 바 그리고 오른쪽에 83 클래스를 'per'라고 따로 주겠습니다 html 은 준비가 됐어요 이제 그러면 카드 영역을 우선 크기를 잡아볼게요 어 크기 확인을 위해서 임시로 백그라운드를 반투명을 줘 보겠습니다 그러면 상단 여백에 있는게 보이실 상단 여백은 컨텐츠에서 만들어 준 거라 padding-bottom 만 좀 줄이구요 세로 사이즈를 잡아야 겠죠 세로 사이즈는 전체 영역의 100% 에서 상단 영역이요 빠진 만큼 딱 계산 할 거에요 그래야 나중에 이렇게 화면아 움직였을 때 틀어지지 않고 아래쪽 영역에 맞게 조절이 되기 때문에 칼큘레이터 ( calc )를 사용해서 100% 마이너스 300px 상단 영역에 맞게 조절을 해볼게요 345 정도가 적당 하겠네요 상단 영역을 제외한 나머지 영역을 꽉 채우겠단 뜻이에요 이정도로 잡아주시고 이번엔 카드 실제 안쪽 영역을 잡아줘 보겠습니다 카드도 마찬가지로 임시로 사이즈 확인을 위해서 임시 배경색을 반투명으로 지정을 하시구요 세로는~ 100% 마찮가지로 가로도 지정 해주세요 그 상단에 카드에어리어 영역에서 하단 여백을 만들어 줄 거에요 패딩을 상단은 0 그리고 좌우 양쪽에 40씩 주시구요 하단은~ 50 정도 하단 영역 이 위로 안 올라오죠 이거는 보더 박스(border-box) 설정을 안해서 그런건데요 박스사이징을 다시 소스를 돌아와서 스타일 제일 위에 별은 박스사이징(box-sizing) 보더 박스(border-box)로 지정을 해주시면 위에 올라온 게 보이시죠 보더 박스를 설정하면 사이즈 설정 된 안쪽으로 패딩 영역이 들어와서 전체 지정한 사이즈의 영향을 미치지 않고 스타일링을 할 수 있습니다 자 이번엔 카드는 배경색을 흰색으로 만들어주시고 아 죄송 합니다 카드의 inner 영역에 스타일링 해줄 거예요 카드

흰색으로 만들어 주시고, 세로 사이즈는 꽉 채워주시고 그리고 컬러는 회색으로 지정해 주겠습니다 여백을 위해서 패딩을 입력을 해주시고 border-radius를 이용해서 라운드를 만들어 주시면됩니다 이제 임시로 적용한 백그라운드 필요가 없으니까 두개 다 삭제를 할게요 이렇게 삭제를 하구요 이번에는 그림자도 만들어 줍시다 이런식으로 그림자를 만들어 주고요 모양이 만들어졌죠? 이번엔 아이콘을 만들어 줄게요 아까와 마찮지로 폰트 어썸에서 user라고 검색을 하시면 비슷한 모양의 아이콘이 나오죠 복사 해서 카드아이콘 영역 그리고 오른쪽에 dot 라고 입력을 해 주시고 마찮가지로 비슷한 아이콘을 복사 해주시면 됩니다 자 볼까요? 들어왔죠? 그럼 이번엔 카드 아이콘을 모양을 만들어 보겠습니다 카드 아이콘은 우선 테두리를 만들어 주시구요 좀 연하게 만들어 줄게요 가로사이즈 50, 세로 사이즈도 50px border-radius로 원형으로 만들어 주시고 텍스트를 가운데로 line-height를 이용해서 가운데로 만들어 주시구요 그리고 사이즈를 좀 키울게요 폰트사이즈를 키우구요 컬러는 배경색의 중간정도 색상으로 이렇게 지정 해주시면 모양이 만들어집니다 그리고 float left로 왼쪽으로 이번엔 셋팅 버튼 float right로 오른쪽으로 붙여주시고 양쪽으로 조절이 됐죠 그리구 이번엔 카드의 bottom 인데요 position absolute를 이용해서 바닦으로 붙여주세요 bottom zero 카드 바깥으로 빠져 나오는게 보이시죠 그거는 바로 상단에 있는 inner의 포지션 relative를 이용해서 이렇게 안쪽으로 모양을 잡아줄 수 있습니다 다시 bottom 으로 와서 가로 사이즈를 100%로 만들어 주시고 좌측으로 붙이고 여백을 만들어 주겠습니다 네 이제 모양 잡는건 준비가 됐어요 이번엔 카드안에 있는 h2는 마진을 줄여 볼게요 10으로 줄여 주시고 컬러도 좀 진하게 더 진하게 할까요 이 정도가 괜찮겠네요 스테이터스도 만들어 줍니다 스테이터스는 float right로 오른쪽으로 붙여주시고 그리고 폰트 크기는 20px 그리고 가상 엘리먼트를 추가를 해 줄거에요 단위가 % 이다 보니까 ::after 를 이용해서 content % 를 입력해주시면 예 나온 게 보이시죠 나중에 개발에서 스크립트로 숫자 만 바꿔줄 예정이라 이렇게 작업을 했습니다 이번엔 트랙 트랙은 background를 회색을 주시고 세로 사이즈는 4px 정도 오른쪽이 숫자 영역을 뺀 만큼 가로를 좀 조정을 할게요 calc 를 이용해서 30px 정도를 빼주시면 됩니다 자 그리고 다시 'per'로 와서 margin-top 마이너스 값을 이용해서 자리를 잡아줍니다 이번엔 바 영역인데 바의 길이는 따로 inline으로 입력을 해 줄게요 html에서 직접 이미 라인으로 스타일 width 83% 이렇게 해 주는 이유는 나중에 개발 적용할 때 보시면 카드마다 숫자에 따라서 바의 길이가 달라질거예요 그래서 감안을 해서 미리 인라인으로 이렇게 길이를 잡아 줬습니다 스타일은 스테이터스에 그리고 세로는 4 px 잡힌게 보이시죠 또 배경색은 전체 배경색을 이용할 겁니다 컨테이너에서 사용했던 배경색을 복사해서 붙여 넣으시고 그라데이션이 새로 방향인데 여기서는 가로 방향이죠? linear-gradient에 가로 방향으로 to left 라고 입력해주시면 준비가 됐습니다 이렇게 크기가 늘어나면 아래쪽으로 늘어나는게 보이시죠 완성된 카드를 두개를 더 만들 거에요 영상에 보시면 이렇게 총 3개가 보이죠 그래서 카드 영역을 복사를 해서 하나, 둘 그러면 아래쪽으로 구성이 된게 보이시죠 이것을 속성을 가로로 만들어 줄 거에요 이것 때문에 이렇게 만들어 놓은건데 카드에어리어에서 display 를 flex 바로 배치되는게 보이시죠 카드 고유의 사이즈를 이용 할 거라서 이렇게 정렬이 되면 안되잖아요 카드영역에서는 flex none 속성을 부여해 주면 네 고유의 사이즈로 지정됩니다 예 그림과 같이 여백이 좀 필요하겠죠 그래서 margin-right 15px 이정도 조절이 되면 비슷하게 나왔죠 실제 영역이 전체가 움직이기 때문에 영역을 좀 잡아 줄게요 overflow , auto 이렇게 일단 1차 준비가 완료가 됐습니다 다음 시간에는 이제 영상 에서와 같이 상세페이지와 이렇게 움직였을 때 액션들을 만들어야죠 자바 스크립트 강좌가 될 것 같네요 첫 번째 시간 여기까지입니다 감사합니다

안드로이드 + 파이어베이스 SNS앱 만들기 part2 [회원가입 화면 구현]

안녕하세요 Bored Developer 입니다 오늘은 저번 영상에서 말했듯이 그 레이아웃을 만지면서 좀 더 앱 다운 형태로 만들어 가는 과정을 담을 건데요 자 먼저 무슨 레이아웃을 만들자 한번 볼까요 저번에 기획안 뭐 했었죠 회원가입 로그인 이거 그냥 순서대로 만들면 될 것 같아요 네 뭐 네 그런 것 같아요 자 그럼 뭐 회원가입 화면 부터 만들어 보도록 할까요 그 자 res 리소스에 들어가면 레이아웃이 있고 그 레이아웃을 우클릭하면 레이아웃 리소스 파일을 하나 만들 수 있습니다 이름은 activite_sign_up 이렇게 해서 만들면 하나 생성되는 게 확인하실 생성되는 거 보실 수 있죠 자 텍스트로 들어가 가지고 LinearLayout을 하나 만들어 줍시다 이 녀석이 뭐 하는 녀석이냐 그 이 안에 있는 View들을 순서대로 배치 시켜줘요 여기 우측에 보시면 순서대로 생기는 거 보이죠 계속 추가 할 때마다 네 이런 역할을 해주는데 저는 horizontal보단 그 왼 어 우측 정렬 보다는 위에서 아래로 아니 네 그런 정렬을 원하기 때문에 orientation을 찾아 가지고 vertical로 바꿔줍니다 그럼 이렇게 바뀌는 게 보이시죠 자 다른건 다 지워주고 어 우리 textView 모양을 좀 바꿔 주도록 합시다 좀 이쁘게 200dp 로 바꿔주고 dp 라는 개념은 안드로이드 에서 사용하는 개념인데 크기 단위인데 그 모바일 디바이스가 크기가 다양하잖아요 그래서 사용하는 개념인데 이렇게 dp 개념으로 dp로 작성을 하게 되면 그 어느 디바이스 에서 보든 크기가 다 똑같이 보여요 그래 가지고 이런 dp를 사용한답니다 이게 왜 안되는지 잘 모르겠는데 200dp 자 높이의 200dp로 하고 좌우는 match로 함으로써 꽉 차게 만들어 주도록 하겠습니다 wrap으로 하면 그 안에 있는 내용을 딱 그 크기만큼 차지 하는데요 match로 해서 꽉 차게 해 보겠습니다 크기 높이 를 200으로 했는데 왜 안 나오냐 이 녀석이 1이기 때문이죠 지우고 하면 다시 200으로 변하게 됩니다 자 text는 회원 가입으로 바꿔 주도록 하고 size가 너무 작아요 size를 키워 줍시다 24정도면 될 거 같아요 그리고 style도 좀 굵게 8 좀 굵게 해 주십시다 그리고 color도 좀 검은색으로 눈에 잘 안 띄니까 color색 검은 색으로 바꿔 주도록 합시다 이렇게 자 그리고 또 gravity 말 그대로 중력이죠 center를 가지고 가운데 모이게 하도록 합시다 자 이렇게 자 이렇게 타이틀은 완성됐고 LinearLayout을 하나 더 만들어 가지고 음 그 editText를 추가 해줄 건데 그 입력폼 만들 거에요 그 이메일 넣고 패스워드 넣고 그런 화면이요 자 봅시다 여기 text 누르면 나오는데 여러 개가 있죠 email있고 phone 있고 time, date, number 뭐 기타 등등 많잖아요 왜이리 많냐 이메일을 선택하면 그 이메일을 선택하는 그 이메일 인풋을 눌렀을 때 그 안에서 나오는 키보드가 이메일 형식으로 바뀌어요 그러고 많이 보셨을 거에요 Number로 만들게 되면 그 아래서 나오는 키보드가 숫자 만 나오게 되어 있는 그 키보드로 나오게 되고 뭐 그런 방식이에요 사용자의 편의를 위해서 이런 거 잘 고려해서 만들어 주도록 합시다 자 이메일 넣기로 했으니까 이메일 넣고 여기에는 패스워드 2개가 필요하죠 패스워드 처음에 입력하는거 하나랑 확인하는거 하나 이렇게 자 이렇게 3개가 생겼어요 그리고 그러면 너무 허전하니까 hint를 넣어 줘야 되요 넣어 주겠습니다 hint란 이게 무엇일까요 입력이 아무것도 없을때 그 자리에 있는 텍스트를 말합니다 자 무엇일까요 한번 보시면 알게 될 거에요 이메일 딱 치면 여기 보이죠 예 거기서 값을 입력하면 이 hint가 사라져요 네 이거 다들 한번 보셨을 거에요 어디서 사용자한테 최대한 공간을 활용하면서 암시를 해줄 수가 있는 거죠 자 이렇게 만듭시다 그리고 또 하나 더 이 좌우에 붙어있는 게 너무 보기가 안 좋은 거 같아요 그래서 여기 LinearLayout에 들어가 가지고 padding을 한 10dp정도 줘 보도록 합니다 해봅시다 네 이쁜거 같아요 이 정도면 충분히 이쁜거 같은데 아직 부족해요 얘네들 사이 공간이 너무 가까워 bottom 아래로 5dp 정도 띄도록 어우 잘 못했네요 5 dp 가 아니라 잠시만요 이게 맞지 않나요 아 padding이 아니라 padding은 안쪽 이니까 margin으로 주면 될 거 같습니다 margin에서 얘네 margin bottom 5누르면 네 이쁘게 떨어지는 걸 확인하실 수 있죠 얘도 넣도록 합시다 아래에 다가 버튼을 하나 넣을 거기 때문에 얘도 넣고 버튼을 하나 넣어주도록 합시다 이름은 회원가입 네 이렇게 깔끔하게 넣어 두도록 합시다 자 이제 어느 정도 다 된 거 같은데 음 아직 부족한 게 하나 있는 거 같기도 하고 어 네 아이디를 넣어 줘야죠 네 우선 설명 좀 할게요 지금 이 상태로 다 만들었다고 이제 실행을 한다고 화면에 나오지 않아요 왜냐 그 아직 이 녀석을 참조 하는 자바 파일이 없고 자바 파일을 만든다 해도 지금 manifests에서 MainActivity 이 파일을 첫 번째로 실행하도록 설정이 되어 있어요 그래 가지고 우리는 맨 먼저 SignUp 자바 파일을 하나 만들어 줄거고 manifests에서 그 파일을 먼저 실행하도록 그렇게 설정을 바꿔주도록 할 겁니다 자 한번 시작해볼까요 우선 id 먼저 지정해주고 넘어갈게요 자바 파일에서 음 이 VIew에 접근하려면 id로 접근을 하거든요 그래서 이 id 가 필요하답니다 잘 봐요 id 이름은 emailEditText로 할게요 얘는 passwordEditText 얘는 passwordCheckEditText 이 녀석은 signupButton 자 이렇게 하면 될거 같습니다 자 이제 여기 자바 파일 하나 만들어 가지고 SignUpActivity 자 만들어가지고 여기 MainActivity에 있는 녀석을 슥 복사해 가지고 슥 붙여 넣어 줍시다 오케이 자 이러면 될거같네요 하나 빼 먹었네요 자 이렇게 자 이제 아 이 녀석도 바꿔줘야 되죠 이제 main이 아니라 signup을 참조해 줍시다 자 이렇게 어느 정도 됐고 이제 manifests에서 이 SignUpActivity를 시작하도록 만들면 자 이렇게 만들면 딱 실행이 이쁘게 잘 될것 같습니다 자 한번 실행을 해보도록 합시다 자 여기에 하나 키고 핸드폰을 키고 이 녀석은 전에 만들었던 녀석이고 자 실행을 해보면 아 이거 살짝 오래 걸리네요 그럼 이거 실행되는 동안 이 노란 화면 이거 warning이여서 무시도 되긴 하는데 전 보기가 좀 안 좋아 가지고 좀 잠시 수정을 좀 해 주도록 할게요 이게 그 앱 링크를 안 달아줘서 그런 거 같은데 이쪽에서 그냥 대충 아무거나 하나 걸어주도록 합시다 googlecom 하나 걸어주도록 할게요 오케이 이렇게 해주면 이렇게 하고 다 끄면 네 잘 될 거 같습니다 이렇게 사라지죠 자 앱이 실행 된 거 같으니까 뭐 확인 하도록 할게요 자 이쁘게 나왔죠 여러분도 이쁘게 나왔을 거라고 생각하고 다음으로 넘어가기 전에 이메일 키보드가 잘 나오는지 확인하고 넘어가도록 할게요 여기 골뱅이 보이죠 골뱅이 잘 나오고 com 아주 편하죠 사용기 비밀번호도 *로 아니 으로 잘 나오고 여기 서도 잘 나오고 자 이렇게 완벽한 화면이 나왔고 이제 다 끝났으니까 여기 자바 파일 와 가지고 이제 실질적으로 회원 관리 로직을 작성하도록 할게요 자 봅시다 먼저 버튼 이벤트부터 가져올 거에요 회원 가입 회원 추가 회원 회원 추가 회원 회원 가입 버튼을 누르면 뭔가 로그가 찍히도록 한번 만들어 보도록 하겠습니다 자 아까 그 찾을 때 id로 찾는다 했잖아요 저의 xml에 파일에 View를 접근할려면 자 그 아이디를 접근하는 방법이 이 findViewById인데 이렇게 사용하시면 됩니다 id 아까 찾으려 했던 게 버튼이었는데 signButton 여기 있는 거 보이죠 setOnClickListener 리스너 뭐 듣는다 리슨 뭐 들어야 되죠 뭘 들어 클릭 됐는지 들어야 돼요 그래서 우리는 음 이렇게 setOnClickListener을 달아줍니다 자 이제 여기다 이 괄호 안 에다가 이 실제 들었을 때 할 로직을 넣어 줘야 되요 넣어주기 위해서 하나 작성해 주도록 합시다 리스너 하나 만들어주는 과정입니다 View

OnClickListener switch(vgetId) case Rid 만약에 이 녀석이 클릭 됐을 때 발동하는 녀석이죠 왜 이렇게 작성을 하냐 이 녀석 말고 클릭 리스너가 다른 것 도 많을 수 있으니까 이런 식으로 작성이 되는 거에요 제가 이렇게 작성 하도록 합시다 에 근데 솔직히 여기서 버튼이 이거 한게 밖에 없을 것 같아서 음 그냥 다르게 예 하나 만을 위해서 작성해도 되긴 하는데 나중에 확장성을 고려하면 이게 이렇게 작성하는 게 더 편할 수도 있어요 나중에 추가할 수도 있을까요 자 이렇게 해서 클릭이 잘 작동하는지 로그를 한번 찍어 보도록 하겠습니다 클릭 앞에는 태그고 뒤에는 내용인데 귀찮으니까 이렇게 할게요 클릭 클릭하고 alt enter 눌러 달라고 자꾸 말해주는데 해줍시다 자 이렇게 시작을 하면 어 버튼을 누를 때마다 여기 logcat에 클릭클릭클릭 계속 나올 거에요 자 한번 확인해보도록 합시다 그리고 여기 왼쪽에 저는 클릭하면 이 녹색으로 막 변하고 막 빨간색으로 변하고 막 그러는 걸 확인하실 수 있는데 그건 무시하셔도 돼요 저는 이게 Git이랑 연결되어 있어 가지고 이러는 건데 여러분 안 그래도 그 정상인 거에요 정상이라기 보다는 네 그게 평범한 거에요 자 한번 볼까요 회원 가입 버튼을 누르면 클릭 클릭 클릭 클릭 클릭 클릭 자 음 아주 완벽하게 된 걸 확인하실 수 있습니다 자 이제는 음 클릭도 다 됬으니까 이제 진짜 파이어베이스 연동을 한번 해보도록 하겠습니다 자 볼까요 인터넷을 하나 키고 파이어베이스 치면 맨 위에 뜰 거예요 자 여기에서 시작하기 누르면 구글 로그인은 다 되어있다는 가정하에 음 진행되고 있는 거구요 자 이건 아까 만들었던 프로젝트인데 지워버리고 여러분도 처음이니까 처음 하는 환경에서 시작하도록 하겠습니다 영구적으로 지워버리고 음 잘 지워진 거 겠죠 안 지워졌네요 어 자 아니 사용자 권한이 아니라 프로젝트 삭제 이렇게 지워버리고 이 부분은 없어요 하는거 아니에요 자 이제 다시 시작합니다 프로젝트 추가 눌러 가지고 SNS-Project 언더바가 안되니까 저 이름을 뭐라고 하죠 뭐 있었는데 아무튼 자 이렇게 하도록 하겠습니다 기존의 한도에 도달 했다는 데 뭔 소린지 잘 모르겠구요 왜 안 되죠 아 이 녀석 때문인가 왜 안 지워지죠 아까 지웠던 거 같은데 자 다시 지워주고 뭐죠 지운 거 같은데 네 지워졌습니다 지워졌고요 아 잠시만요 자 방금 좀 종료했다 했는데 그 이거 영상을 준비 하느라 그 프로젝트를 많이 만들었다 지웠다 해 가지고 지워지는데 한 일주일 정도가 걸린다고 하네요 그래 가지고 그 프로젝트 제한에 걸려 가지고 지금 당분간 개선해 못하는 상황에 처음 거 같네요 한 일주일 정도 후에는 개설 할 수 있겠지만 아무튼 그래 가지고 다른 계정으로 와가지고 음 마저 진행하도록 하겠습니다 이름은 SNS_Project로 진행하도록 하겠습니다 동의해 주시고 프로젝트 만들기 하시면 좀 기다리시면 생성이 될 겁니다 자 계속을 누르고 여기 안드로이드 를 눌러서 연결을 해 주도록 합시다 자 여기 패키지 이름의 뭘 적느냐 manifests로 가시면 여기 이렇게 package에 이름이 나와요 복사에서 붙여 넣기 해주시면 되고 이름은 SNS_Project 이름은 맞춰 주셔야 돼요 안 해도 되나 네 아무튼 맞춰주는 편이 좋을 거에요 자 이렇게 하고 이거 다운로드 받아야 돼요 이건 필수적 이니까 다운로드 꼭 받으시고 폴더를 열고 좀 전에 있던 파일이랑 겹치니까 다시 다운로드 받아 가지고 자 다운로드 됐네요 자 이 파일을 어디로 넣는냐 생성된 SNS_Project의 app에다가 넣어주면 됩니다 자 이렇게 해주면 됩니다 자 다음으로 넘어가면 이걸 하라네요 음 자 여기 종속성을 추가에 해줘야 되는데 음 네 여기 끄고 어떻게 하는지 천천히 해보죠 여기 Gradle Scripts 보이죠 여길 들어가 가지고 SNS_Project랑 app을 켜줍시다 먼저 프로젝트 부터 수정해 주도록 할게요 이걸 복사하고 클릭하면 복사가 되요 복사하고 여기다 붙여줍니다 아직 sync now는 하지 마세요 이거 다하고 한 번 하는 게 좋을거 같으니까 자 이거 복사하고 종속성도 복사 하고 들어가서 자 여기 붙여주도록 할게요 이 녀석도 복사해주고 아래다 붙여 주도록 하겠습니다 자 여기고 버전이 낮다고 하는 같은데 버전 올려주고 sync now 눌러 주시면 될 것 같습니다 자 이렇게 좀 기다리고 그래서 다음을 눌러주고 이제 이걸 총 다 추가 된 다음에 실행을 하면 실행이 되면 여기 구글이랑 통신이 잘 돼 가지고 전서 확인이 될 거에요 그러면 아주 성공적으로 파이어베이스가 연결이 된 겁니다 자 실행해 봅시다 자 실행이 됐네요 어 실행이 돼도 음 좀 더 기다리셔야 이게 통신이 원활하게 진행 될 거예요 조금만 기다리시면 여기 서도 확연히 됐다고 나을 겁니다 자 추가 가 됐고 콘솔로 이동해서 어 이제 그 회원 관리 하기 위해서 준비를 좀 합시다 authentication에 들어가 가지고 여기에 로그인 방법에 이메일 비밀번호에 사용 설정을 체크해주시면 체크하고 저장을 해주시면 이제 설정은 끝났다고 보실 수 있습니다 자 이제 문서로 가지고 파이어베이스 문서로 가서 이제 한번 회원가입을 진행해 보도록 하겠습니다 음 자 여긴 인증에서 파이어베이스 sdk 시작하기로 가시면 확인하실 수 있는데요 여기 종속성을 추가해 주셔야 돼요 아까 추가 한 거 말고도 하나 더 추가해 주셔야 돼요 자 이렇게 버전이 낮다는 것 같으니까 버전을 올려주시고 자 여기 그 에러가 뜨는데 실행이 된 걸로 봐서는 뭐 무시해도 되는 거 같긴 한데 별로 보기 좋지 않으니까 해결해 보도록 합시다 이거 쭉 복사해 가지고 구글에 한번 물어 보도록 하죠 자 이렇게 물어보면 어 근데 이러면 해결이 이건 보기 안좋으니까 이거 지워 버리고 자 이러고 sync now 누르시면 아주 멋지게 해결 되는 걸 확인 하실 수 있습니다 아 자 이제 얘네들은 오늘 영상에서는 이제 더 볼 필요 없으니까 얘들은 꺼버리고 manifests에서 하나 추가 해주도록 합시다 우리가 이제 뭐 그 있는 회원가입을 할 거니까 그 인터넷이 필요해요 인터넷으로 통신 해야 되니까 인터넷 퍼미션을 하나 가지고 와서 여기다가 추가 해주도록 합시다 자 이렇게 말이죠 자 이렇게 넣어주시면 됩니다 또 이제 우리는 인터넷 권한을 얻어 가지고 마음것 인터넷 통신을 할 수 있는 것이죠 자 이제 준비는 끝났고 음 한번 작업을 해보도록 합시다 자 문서 대로 보면 문서를 보면 어 여기 이대로 그냥 천천히 따라 하면 될 것 같아요 인스턴스 선언합니다 선언 하시고 이렇게 alt enter 눌러 가지고 추가해서 에러를 없애 주신 다음에 초기화를 해 주시고 음 다음에는 음 이 녀석 이 녀석은 딱히 필요 없어 보이기도 하는데요 우선은 넣어 주도록 하겠습니다 그리고 이 녀석이 실제로 회원 가입 로직을 처리하는 녀석인데요 함수를 하나 만들어서 관리 해 주도록 합시다 자 이렇게 말이죠 토스트는 필요 없고 음 여기가 실패했을 때 UI로직 여기가 성공했을 때 UI로직 자 태그는 태그도 하나 만들어 주도록 하죠 음 자 이렇게 만들어 주도록 합시다 이제 클릭 됐을 때 이 로직을 실행시키면 아주 깔끔하게 될 거 같은 같은데 이제 여기다가 이메일이랑 패스워드만 넘겨주면 클릭이 됐을 때 아주 정상적으로 로직 이 처리되면서 회원 가입이 될 겁니다 간단하죠 자 이제 이메일과 패스워드는 어떻게 넣어주냐 아까 위에서 버튼 찾았듯이 똑같이 editText를 findViewById로 찾아 주시면 된답니다 자 어떻게 하는지 볼 가요 String email = editText findViewById(Rid

emailEditText) setText 아니 set이 아니죠 getText 입력한 텍스트를 얻어오는 작업입니다 그리고 이 얻어온 값은 String 값이 아니기 때문에 String값으로 변환해 주도록 하죠 이렇게 하고 패스워드는 passwordEditText 자 이렇게 해서 값이 정상적으로 넘어갈 것이라 생각됩니다 자 별 문제 없어 보이는데 한번 실행해 볼까요 그리고 얜 앞에 editText를 붙여준 이유가 이getText를 사용하려면 일반 View는 getText를 사용하지 못해요 그 editText나 textView에서만 사용할 수 있는데 그래서 이 줄을 editText로 형변환을 해 준 겁니다 getText를 사용하기 위해서 이제 실행이 되면 실행이 되서 회원정보를 입력하고 회원가입 버튼을 누르면 여기에 사용자의 그 입력한 사용자가 표시가 될 거라고 저는 믿어 의심치 않습니다 한번 적어 볼까요 test@testcom 비밀번호는 123456 123456 자 한번 회원가입을 눌러 봅시다 한번 볼까요 logcat을 보면 success 성공했다고 나오고 과연 진짜로 나오는지 한번 확인해 봅시다 f5를 누르면 자 깔끔하게 등록된 거 보이시죠 자 이렇게 아주 편하고 빠르고 쉽게 회원관리를 할 수가 있습니다 다음 영상에서는 실제로 로그인을 해보고 이 회원 가입도 지금 로직 이 완전치 않잖아요 어 비밀번호 체크도 만들어 보고 좀 더 깔끔하게 만들어 보도록 하겠습니다 다음 영상에서 보도록 합시다 감사합니다

무선충전 안되는 폰, 무선충전 되게 만들기 (이렇게 간단해도 되나요…)

안녕하세요 리오팍고 입니다

오늘은 무선충전이 지원되지 않는 핸드폰에 무선충전이 되도록 기능을 넣어 보려고 하는데요 굉장히 간단하거든요 천천히 여러분들께 소개해 드릴 게요 함께 보시죠 먼저 준비물로는 무선충전이 지원되지 않는 핸드폰이 있어야겠죠 그 다음에 핸드폰 케이스가 있어야 됩니다

핸드폰 케이스가 있어야 되고요 그 다음에 정말 핵심적으로 필요한 것은 바로 이 녀석이에요 '무선충전패치' 입니다 무선충전패치 이 녀석인데요 무선충전패치의 가격은 한 4천원 정도 하는 것 같아요

4천원 정도 하는 것 같고요 구매하실 때 정말 중요한 점이 뭐냐 면 저는 현재 여기 c타입을 사용하고 있거든요 이 무선충전패치도 같은 핸드폰 과 같은 단자를 구매하셔야 됩니다 제가 사용하고 있는 핸드폰이 c 타입이기 때문에 저도 무선충전패치를 c타입으로 구매했습니다 그래서 어떻게 하는지 알려드릴 게요

핸드폰에 무선충전 패치를 꽂아 주는거에요 꽂아준 다음에 아까 제가 케이스 필요하다고 했잖아요 케이스를 이렇게 해서 숨겨주는 거죠 케이스 뒤쪽으로 아래서부터 위로 이렇게 해서 넣어버린 후 무선충전기에 갔다 댔을 때 패치 가 연결되어 있기 때문에 핸드폰은 자동적으로 무선충전 기능이 활성화 되는거죠

물론 이 무선충전이 가능해진다 는 장점이 있겠지만 반면에 발열 무선충전 방식이기 때문에 왔다갔다 하면서 발열이 이루어진 다라는 단점이 있고요 두 번째 단점으로는 충전속도가 유선에 비해서 빠르지는 않겠죠 또한 요즘에는 고속 무선충전 이라는 것이 나오곤 하는데 그 정도 속도는 안나오는 것 같아요 그래도 저 같은 경우에는 책상이나 자주 가는 곳에 무선충전 거치대가 있거든요 언제나 올려두기만 하면 속도가 조금 느리긴 하지만 그래도 충전이 간편하게 이루어지고 있기 때문에 크게 불편함을 느낀 적은 없었던 것 같아요 오늘은 간단하게 무선충전이 지원되지 않는 핸드폰에 무선충전이 되도록

무선충전을 할 수 있는 무선충전을 활용하는 방법에 대해서 소개해 드렸는데요 여러분들도 무선충전이 되지 않는 핸드폰 이시라면 저처럼 무선패치를 구매하셔서 이 아래쪽에 딱 숨겨 놓으시면 좋을 것 같아요 그러면 언제든지 무선충전이 가능 해진다는 것이죠 오늘 제가 이렇게 소개해드린 정보 나 동영상이 도움이 되셨다면 영상 아래쪽에 좋아요와 구독하기 버튼 꾹꾹꾹꾹 꾹꾹 눌러주시면 좋겠습니다 저는 여기서 인사드리도록 할게요

지금까지 리오팍고 이었습니다 감사합니다

웹애플리케이션 만들기 – 서버와 클라이언트

지금부터 서버와 클리어언트에 대한 수업을 시작하겠습니다 서버, 클라이언트라는 이 내용은 우리 수업에서 가장 큰 체계라고 할 수 있습니다

우리는 웹을 공부하고 있지만 이 웹이라는 것은 서버와 클라이언트라는 이 체계 안에서 동작하게 되는 것이기 때문에 서버와 클라이언트는 우리 수업에서 가장 중요한 내용이라고 할수 있어요 그러면, 이 웹에 있어서 서버와 클라이언트라는 것은 어떤 의미를 갖는지를 조금 더 구체적으로 한번 살펴보겠습니다 이렇게 컴퓨터가 두대가 있어요 한대는, 왼쪽에 있는 컴퓨터는 우리가 잘쓰는 노트북이고 오른쪽에 있는 컴퓨터는 보통, 서버라고 하는 컴퓨터들은 저렇게 생겼습니다 하지만 노트북이나 일반적으로 서버라고 불리는 컴퓨터나 생긴것은 다를지언정 실제로 메커니즘은 거의 동일합니다 다만, 우리가 서버라고 하는 컴퓨터들은 안정성이 굉장히 중요하기 때문에 부품이 좀 더 안정적인 신뢰할 수 있는 부품을 쓰고있긴 하지만 여러분의 노트북도 아주 훌륭한 서버로서의 역할을 할 수 있는 컴퓨터에요 그러면 둘 다 서버가 될 수 있고 둘다 클라이언트가 될 수 있다면 어떤 컴퓨터가 서버고 어떤 컴퓨터가 클라이언트가 되는지는 이것을 통해 알 수 있습니다 웹브라우져가 설치되어 있는 컴퓨터를 우리는 클라이언트라고 부르고요 웹서버라는 소프트웨어가 설치되어 있는 컴퓨터를 서버 컴퓨터라고 부르는 거에요 그래서 여러분이 웹브라우져를 키고 웹브라우져의 주소창에다가 주소를 입력하잖아요

포털싸이트라던지 여러가지, 저희 생활코딩의 홈페이지인 opentutorialsorg 라던지 그런 주소를 입력하고 여러분들이 엔터를 "땅" 치면 어떤 일이 생기냐면 바로, 웹브라우져가 설치되어 있는 컴퓨터를 통해서 그 주소에 해당되는 서버 컴퓨터에게 요청을 하게 됩니다 뭐를 요청하냐면 여러분이 알고 싶은 정보를 담고 있는 웹페이지를 요청하는 거에요 그러면 서버컴퓨터에는 웹서버라는 소프트웨어가 설치되어 있어서 그 웹서버 소프트웨어가 그 요청을 받아서 그 서버 컴퓨터에 저장 되어 있는(하드 디스크나 이런 곳에) 저장되어 있는(웹페이지 문서가 저장되어 있을 겁니다) 그 문서를 읽어서 그것을 다시 클라이언트 컴퓨터에게 쏴주는데요 그 쏴주는 작업을 "응답한다"고 부릅니다 즉, 클라이언트는 요청하고 서버는 응답한다 라고 하는 이 관계로 인해서 요청하는 쪽을 클라이언트 응답하는 쪽을 서버라고 부르는 겁니다 클라이언트라는 말은 한국어로 얘기하면 "갑" 정도 되겠죠 "고객" 이렇게 얘기할 수 있을 것이고요 고객이 하는 것은 요청을 하는거죠 그리고 서버는 "을 " 정도 될겁니다

다른 말로는 서비스업에 종사하시는 분들 이겠죠 그리고 우리가 식당가면 "서빙한다" 라고 얘기하잖아요 그 서빙에서의 "서빙"이 "서버" 라는 말과 같은 어근, 어원을 가지고 있겠죠 그래서, 클라이언트는 요청하고 서버는 응답한다 라는 바로 이 틀의 개념을 여러분들이 이해하는 것이 굉장히 중요한 부분이고요 그리고, 웹브라우져가 설치되어 있는 컴퓨터가 클라이언트 웹서버가 설치되어 있는 컴퓨터가 서버 컴퓨터가 된다라는 것도 잘 이해하시면 좋겠습니다 그래서, 인터넷이 연결되어 있는 환경에서 동작하는 어떤 웹이나 앱이나 게임이나 이런 모든것들이 결국에는 클라이언트 , 서버라고 하는 이런 큰 틀의 체계 위에서 동작을 합니다 그렇기 때문에 여러분들이 클라이언트와 서버라고 하는 개념을 이해하신다면 이것은 꼭 우리가 지금 배우고 있는 웹에 국한된 얘기가 아니고 게임, 또는 모바일 앱 여러가지 에플리케이션들, 그 모든 분야에서 다 적용되는 개념이 바로 서버와 클라이언트라고 하는 개념입니다 그리고 우리 수업은 서버와 클라이언트라는 것을 이용해서 "웹"이라는 것이 동작하도록 하는 수업인 것이죠 그러면, 웹에 있어서 서버와 클라이언트의 관계는 웹브라우져가 클라이언트가 되고 웹서버가 서버가 되는 것이죠 그리고 여기에서 웹브라우져라고 되어 있는 저 이름은 웹 클라이언트라고 바꿔도 큰 문제는 없습니다 웹클라이언트와 웹서버가 협력해서 웹이라고 하는 것이 동작하게 된다라는 것 그것을 이해하시면 됩니다

그러면 우리가 수업을 하기 위해서는 필요한 준비물이 있습니다 뭐가 필요하냐면 첫번째는 웹브라우져가 있어야 해요 근데 여러분들이 최소한 제 수업을 보고 있다면 대부분 웹브라우져는 설치가 되어 있을 것이고 그리고 여러분들에게 웹브라우져라는 소프트웨어는 굉장히 친숙한 소프트웨어일 것입니다 특별히 설명드릴게 별로 없어요 그런데 웹서버라는 것은 프로페셔널한 웹개발자나 IT관련한 엔지니어가 아니라고 한다면 웹서버라는 말을 지금 처음들어보신분도 있을거에요 즉, 뭔가 감각적으로 가깝게 느껴지지 않을거라는 겁니다 그래서, 일단은 우리가 관심을 둘것은 웹서버 라는 것에 관심을 둘거고 바로 이 웹서버를 컴퓨터에 설치를 해야됩니다 그런데 제가 아까 말씀 드린것처럼 서버와 클라이언트는 두대의 서로 다른 컴퓨터끼리 통신을 하는거라고 말씀드렸죠 "그럼 우리 컴퓨터가 두대가 있어야 되냐" 란 생각을 하실수가 있는데 두대면 좋기는 한데 공부하는 과정에서는 한대의 컴퓨터로 충분히 가능합니다

이 한대의 컴퓨터에 웹브라우져와 웹서버를 둘다 설치를 하는거죠 그리고 웹서버와 웹브라우져가 한대의 컴퓨터 안에서 통신을 하게 하면 됩니다 이해가 안가실수 있는데 실제로 설치를 진행하면서 이 얘기는 제가 더 자세하게 할겁니다 즉, 웹브라우져에다가 여러분이 주소를 치는데 그 주소가 다른곳에 있는 컴퓨터가 아니라 바로 그 웹브라우져가 설치되어 있는 컴퓨터를 가리키게 되면 그 컴퓨터 안에, 즉 같은 컴퓨터에 설치되어 있는 웹서버가 응답해서 웹브라우져에 페이지를 보여줍니다 일종의 원맨쇼를 하는건데 이 관계는 그냥 같은 컴퓨터에서 하는 것일뿐 컴퓨터가 다르다고 해도 동일하게 작동하는 것이기 때문에 우리가 공부를 하는데는 아무런 지장이 없습니다 그리고 최종적으로 실제로 여러분들이 웹서비스를 또 웹에플리케이션을 운영하기 위해서는 다른 컴퓨터가 필요하겠지만 그건 우리 수업 끝에서 실제 상황에서 서비스를 동작시키는 방법은 우리 수업 뒤에서 나중에 살펴보게 될거니까요 지금은 일단 학습환경을 구축하는 것부터 합시다 그러면 웹서버를 설치를 해야하는데요 웹서버로는 이런것들이 있습니다

APACHE, Nginx, IIS 이런게 있는데요 이중에 Apache와 Nginx는 오픈소스 진영이고요 그리고 IIS는 마이크로소프트의 제품입니다 그래서 이런 제품들간의 현재의 경쟁구도를 좀 살펴보면 보시는것처럼 Apache는 오래전부터 한번도 일등을 놓쳐본적이 없는 웹서버 분야에서는 절대강자라고 할 수 있습니다 웹의 시작과 함께 출발한 웹서버이고 웹이라는 것이 발전하는데 있어서 굉장히 큰 공헌을 한 APACHE라고 하는 웹서버입니다 우리 수업은 APACHE를 이용해서 웹서버를 구축을 할거에요 그 다음에 마이크로 소프트, 너무나 유명한 회사이고 여기 보시면 이 그래프상으로 봤을때 2009년도에 거의 정점에 도달했죠 그래서 APACHE를 턱밑까지 쫓아 왔다가 갑자기 쇠락의 기운이 보이기 시작하는 거죠 그 다음에 보면 Nginx라고 하는 것이 2007년부터 시작이 되어서 점점 성장을 하다가 상당히 높은 퍼센트까지 올라온 것을 볼수 있습니다 그리고 조금 흥미 삼아서 볼만한 것은 여기 구글이라고 되있는거 보이시죠 이 구글은 여러분들이 알고 있는 그 구글이라는 회사가 운영하고 있는 웹서버입니다

이건 우리가 쓸순 없어요 이건 구글이 쓰는 서버인데 구글이라고 하는 단일 기업이 사용하는 자사가 만든 웹서버 하나가 이 시장에서 차지하는 비중이 이렇게 크다는건 놀라운 일이죠 얼마나 큰 회사인지 알겠죠 그 다음에 우리가 살펴 볼 것은 말슴 드린 것처럼 APACHE라는 것을 우리가 설치할거고요 APACHE를 설치 할 때는 이런 주소로 들어가셔서 실제로 설치하는 것이 정석이긴 한데 APACHE를 설치하는 것은 조금 까다로운 일이에요 직접 설치하는 것은 그리고 우리는 APACHE 즉 웹서버만 필요한 것이 아니라 나중에 제가 말씀드리겠지만 우리 수업에서는 PHP라던지 MYSQL같은 데이터베이스나 서버사이드 언어들이 필요한데요 그게 뭔지는 지금 몰라도 되지만 이런 것들도 하나하나 여러분들이 직접 설치하려고 하면 힘이 들어요 특히나 클라이언트 즉 일반적인 사용자들이 사용하는 환경의 소프트웨어는 설치하는게 어려운게 없습니다 설치하는게 어려우면 사람들은 쓰지 않기 때문에 하지만 서버쪽의 소프트웨어는 일단 굉장히 많은 기능성들이 필요해요 그리고 엔지니어들이 사용할 것이라고 감안하고 만들어진 소프트웨어이기 때문에 개발자들, 소프트웨어를 만드는 사람들의 편의보다는 그 소프트웨어를 만든 사람의 편의가 더 많이 반영되어 있기 때문에 여러분들은 이 서버쪽에서 구동되는 소프트웨어를 설치하는 것이 굉장히 어려울 겁니다

심지어 어떤것은 한달이 걸릴때도 있고 어떤것은 설치를 못하고 포기하는 경우도 있을만큼 서버쪽에서 동작하는 소프트웨어는 설치의 편의성이 대단히 나쁩니다 아파치는 좀 덜한 편이지만요 아무튼 그래서 바로 그러한 어려움이 있다는 것을 알고 그런 어려움들을 도와주는 여러가지 솔루션들이 있는데 저는 bitnami라는 것을 이용해서 apache, php, mysql 을 한번에 설치를 할겁니다 이 bitnami라는 것은 방금 말씀드린 것처럼 바로 이러한 목적 즉, 서버 소프트웨어를 여러분들이 쉽게 한방에 설치할수 있도록 도와주는 그런 도구 이고요 그리고 bitnami말고도 국내에서 만들어진 "APM SETTUP"같은 것들이 있습니다 BITNAMI를 설치하기 위해서는 각각의 운영체제마다 다른 이름의 BITNAMI버젼을 사용하셔야 되는데요 윈도우 사용자라면 여기 있는 주소로 들어가셔서 wamp라는 것을 설치하면 됩니다 w는 window, a는 apache m은 mysql이고 p는 php라는 뜻이에요 맥 사용자는 mamp를 쓰시면 되는데 m은 mac 이고 pache mysql php 입니다

리눅스를 쓰시는 분은 lamp로 접속하셔서 설치를 하시면 됩니다 그러면 우리 수업 우리 후속 수업에서는 각각의 운영체제별로 자신의 컴퓨터에 웹서버를 설치하는 방법에 대해서 짚어보겠습니다 자신의 운영체제에 맞는 사용방법을 찾아서 따라 오시면 되요

웹에플리케이션 만들기 – JS, PHP 프로그래밍 9-2-1 : php 로그인앱 소개

이번 시간에 우리가 살펴볼 내용은 php로 로그인 어플리케이션을 만들어보는 법에 대해서 알아보겠습니다 그런데 이 수업은 우리 웹 어플리케이션 수업 전체가 끝나고 꽤 시간이 지난 뒤에 이야기가 좀 어렵다라는 피드백들이 있어서 새롭게 만들어 본 수업입니다 그래서 조금 맥락이 약간 어긋나 있는 듯한 느낌 또는 제 말투의 어떤 변화 이런 것들이 좀 느껴지실 수도 있어요 자바스크립트에서 로그인을 어떻게 하는 건지는 보셨고 자아, 이번엔 우리가 살펴볼 것은 PHP에서 어떻게 할 것이냐인데 보통 우리가 웹사이트에서 로그인을 한다고 하면 사실은 이런 느낌으로 로그인을 하죠 비밀번호 아이디도 있겠지만 ID와 비밀번호를 입력하는 텍스트필드라는 것이 있고 거기에다가 이렇게 비밀번호를 입력해서 제출 버튼을 누르면 그러면 사용자가 입력한 비밀번호가 서버로 전송이 되는 방식으로 로그인이 이루어집니다 물론 실제 서비스에서는 이렇게 비밀번호를 입력하는 부분에서 이렇게 글씨 내용이 보이는 것이 아니라 이렇게 별표 표시가 되는데 그런 것들은 지금 우리한테 중요한 게 아니죠 자 아무튼 제가 이렇게 입력하고 제출버튼을 누르면 여러분들은 어디를 봐야 되냐면 현재 우리가 실행시킨 이 PHP 어플리케이션은 8-1php 인데요 여기서 제가 제출 버튼을 눌렀을 때 이 URL에 어떤 변화가 생기는지를 한 번 유심히 살펴 보시면 됩니다 자 한번 제출 버튼을 눌러 볼게요 자, 보시는 것처럼 8-2php가 열렸죠? 그리고 뒤에 password는 111111 이라고 하는 비밀번호가 전달이 된 겁니다 그런데 지금 우리가 아직 8-2php가 어떻게 생겼는지 지금 아직 보지 못했지만 요 곳은 비밀번호가 1이 4개 일 때 로그인되는 애플리케이션이애요 근데 지금은 우리가 여섯 개를 입력한 상태였기 때문에 뉘신지 라고 물어본것이죠 자 그러면 제가 비밀번호 1111을 한 번 입력해볼께요 하나 둘 셋 넷 그리고 제출버튼을 눌렀을 때 URL이 어떻게 바뀌는지보세요 자 보시는 것처럼 8-2

php로 php가 열렸고 그리고 password는 1111 이 요렇게 뒤에 붙은 것을 볼 수 있죠 그리고 그에 따라서 로그인이 성공했기 때문에 안녕하세요 주인님이라고 하는 저런 텍스트가 화면에 표시가 된 것이죠 우리가 아직 코드가 어떻게 생겼는지 보지는 못했지만 여기서 중요한 것은 요렇게 생긴 화면에서 제가 비밀번호를 입력하고 뭐 꼭 비밀번호일 필요는 없습니다 비밀번호일 수도 있고 글을 작성하는 화면이면 글 제목일 수도 있겠죠 그리고 제출버튼을 눌렀을 때 예~ 보시는 것처럼 새로운 PHP 애플리케이션이 열리면서 이렇게 정보를 정보를 전달할 수 있다는 것이죠 그에 따라서 실행결과가 달라진다 라는 것 이것이 가장 중요한 내용입니다 자 그러면 우리가 여기서 조금 더 응용을 해서 방금 보셨던 이런 화면 있잖아요 이런 화면을 통하지 않고도 우리가 이 8-2php 아직 그 코드를 본 적도 없는 저 PHP 애플리케이션이 동작되는 결과를 다르게 할 수 있는 방법이 무엇일까요? 바로 여기 있는 password 라고 하는 적혀있는 이 부분에 우리가 직접 값을 입력해서 예, 여기 있는 이 부분에 결과를 다르게 할 수도 있다는 것이죠 자 예를 들어서 여기다가 1111 이라고 입력하고 엔터를 치면 안녕하세요 주인님 이 뜹니다 자 그런데 제가 여기다가 아무거나 막 입력해요 다시 말해서 틀린 비밀번호를 입력하고 엔터를 치면 보시는 것처럼 뉘신지라고 하는 텍스트가 뜨게 된다는 것이죠 자, 이것이 가능한 이유는 여기 보시는 8-2php 우리가 이제 만들 8-2php 가 이 물음표 뒤에 따라오는 password 의 값이 무엇이냐에 따라서 다르게 동작하고 있다 라는 것이 굉장히 중요한 사실입니다 물론 이 부분은 뒤에서도 여러 번 이것과 관련해서 여러분들에게 설명을 드릴 것이기 때문에 혹시 지금 이해가 안 간다고 하더라도 너무 실의에 빠지실 필요는 없습니다 원래 좀 어려운 내용이니까요 자 다시 한번 따져 봅시다 8-2

php 는 예~ password 의 값이 무엇이냐에 따라서 다르게 동작한다 그 얘기는 뭐냐 이 password의 값이 무엇인지를 우리가 만들 8-2php 는 알 수 있어야 돼요 그렇죠? 그리고 이 password 의 값이 무엇인지에 따라서 추측해보세요 8-2php PHP 애플리케이션은 그 password의 값을 1111 인지 아니면 1111 이 아닌 지에 따라서 로그인을 시켜주거나 로그인을 시켜주지 않거나 하는 것을 가능하게 하는 코드가 8-2php 안에 있으면 되겠죠? 그게 뭐겠어요? 바로 조건문인 것이죠 형태는 상당히 다르게 보일 수 있어도 이 자바스크립트와 PHP는 동작하는 방법은 사실은 거의 비슷합니다 자 그러면 간단하게 어 여기에 8-1php 즉, 사용자의 입력을 받는 화면을 한 번 살짝 살펴보고 우리의 주인공인 8-2

php의 내용을 좀 더 깊게 살펴보도록 하죠

파이썬 비행기 슈팅 게임 만들기 (Creating a Shooting Game with Python) (한글자막)

오늘은 파이썬으로 슈팅 게임 만들기라는 제목으로 강의를 준비했습니다 슈팅 게임이 뭔지부터 살펴보고 그리고 파이썬 설치 pygame 라이브러리 설치 슈팅 게임 만들기 이런 순서대로 진행하도록 하겠습니다

먼저 슈팅 게임이 뭔지 살펴볼텐데 슈팅 게임은 shooting game, STG라는 약칭으로 불리기도 하고 적의 공격을 피하며 무기를 쏘는 게임의 총칭을 의미합니다 슈팅 게임이 구조나 조작이나 간단한 형태라서 게임 역사 초창기부터 존재하였던 장르입니다 중력과 같은 복잡한 물리 엔진이 필요하지 않기 때문에 게임 제작 입문용으로 슈팅 게임이 자주 사용됩니다 파이썬을 전혀 해보지 않았다는 사람들을 위해서 파이썬 설치를 어떻게 하느냐 간략하게 살펴보도록 할께요 먼저 파이썬 홈페이지 사이트를 띄운 다음에 (pythonorg) 다운로드를 누릅니다 윈도우 사용자는 윈도우를 눌러서 윈도우에서 64비트면 64비트를 다운로드하여 설치하면 됩니다 다운로드 후 설치하면 이와 같은 설치 화면이 뜨는데 밑에 path 부분에 체크를 해주신 뒤에 install을 눌러주세요 파이썬 설치가 다 되어있다고 가정하고 pygame 라이브러리를 설치하는 부분을 살펴보도록 할께요

pygame이 뭐냐 pygame은 sdl 라이브러리 위에 구축된 멀티미디어 어플리케이션을 만들기 위해서 제공되는 오픈 소스 파이썬 프로그래밍 라이브러리입니다 pygame 로고도 귀엽게 만들어져 있습니다 다양한 pygame에 feature들도 있습니다 pygame 설치는 어떻게 하느냐 시작 – 실행 – command 창 열고 pip install pygame 명령을 수행합니다 이제 이 화면처럼 설치되는 과정을 거치면 되겠습니다 pygame이 설치가 잘 되었는지 확인을 해야 합니다 그래서 pygame을 실행 해 볼게요 idle python을 실행해서 import pygame을 쳐주면 pygame 194가 잘 설치되었다는 메시지를 볼 수 있습니다 이제 게임을 만들텐데 슈팅 게임 만들기 바로 이런 게임을 만들겁니다 게임이 재미있게 보이죠 소리도 들어가고 이게 최종 완성된 게임입니다 이 게임의 컨셉은 지구를 지켜라 밑에 배경 그림에 지구가 있죠 운석이 지구를 향해 떨어지는데 그 운석을 미사일을 쏴서 없애는 게임입니다

게임을 만들려면 굉장히 많은 리소스들이 필요합니다 예를 들어 배경화면, 폭발되는 그림, 미사일, 각종 폰트들 그리고 다양한 운석 그림이 필요합니다 근데 이걸 어떻게 준비하느냐 여러분들이 직접 찾아서 원하는 이미지들로 바꾸실 수도 있지만 강의 진행상 제가 일일히 정리해서 홈페이지에 올려놨습니다 suanlabcom 홈페이지에 들어가서 특강에 게임 리소스 버튼이 있습니다 youtube 설명 칸에도 링크가 있습니다 다운로드 한 파일을 압축을 풀어봅니다 압축된 폴더 안에 모든 리소스들이 들어가 있습니다 이제 게임에 필요한 여러 준비들이 끝났습니다 그 다음에 게임 화면을 처음에 구성해야 되는데 실제적인 게임을 만드는 코딩이 들어갑니다 여러분들과 함께 코딩을 할텐데요 새로운 코딩을 할 문서가 필요하기 때문에 file – new file을 클릭하여 새 문서를 띄웁니다 이제 이 파일에서 우리가 코딩을 작성할텐데 먼저 저장을 좀 해야겠죠 경로상 우리가 압축을 풀었던 pyshooting 폴더 안에 pyshootingpy 라는 이름으로 저장을 해볼게요 이제 우리가 게임 코드를 작성 해 보도록 하겠습니다 파이게임 라이브러리를 로드하고요 그 다음에 system 라이브러리, 게임은 시간과 관련 된 것이 있어야겠죠 그래서 세가지를 일단 먼저 로드해줍니다 그 다음에 게임 처음 화면을 블랙으로 하기 위해 RGB를 0으로 설정합니다 게임 화면 크기는 여러분들이 원하시는 크기로 설정하시면 됩니다 저는 480에 640으로 하겠습니다 그 다음에 게임 초기화를 위한 함수 ‘initGame’이 필요합니다 그 다음에 global 변수로 gamePad와 clock을 가져옵니다 pygame이라는 라이브러리를 또 초기화시켜 줍니다 gamepad를 구성하는데 패드는 paygame

Displayset 게임 전체 우리가 아까 정의했던 크기를 정의 해줍니다 그리고 ptgame의 캡션 즉, 게임의 이름을 파이슈팅이라고 지었는데 이 이름을 제목으로 띄워주는 부분을 말합니다 그 다음에 clock을 걸어줍니다 그 다음에 실질적으로 게임이 실행될 수 있는 함수인 rungame을 넣어줍니다 그 다음에 ongame을 false로 둡니다 각종 이벤트를 처리하기 위해서 while을 돌린 다음 event를 넣어줍니다 게임을 처음 할 때에는 이벤트가 없고 게임을 종료시키는 이벤트만 설정해둡니다 창을 닫거나 하면 파이게임 종료시키고 시스템 종료시키는 이벤트를 처리해 줍니다 그 다음은 화면을 검은 색으로 채우는 fill을 설정합니다 그 다음에 파이게임의 디스플레이를 업데이트 합니다 Clock tick을 60으로 한다는 것이 무슨 말이냐 하면 초당 프레임 수를 60으로 설정하여 게임 플레이가 초당 60으로 진행이 됩니다 그 다음 이 두개의 함수를 실행시키기 위해 Initgame과 rungame을 실행시켜 줍니다 F5를 눌러서 실제 동작을 시켜보겠습니다 이렇게 화면이 구성이 됐습니다 그 다음은 배경그림넣기 배경 그림을 그리기 위해서 이 객체를 그리는 drawobject라는 함수를 정의해 놓습니다 gamepad를 global로 가져옵니다 blit란 비티 현상과 관련해서 해당하는 오브젝트를 x,y좌표 위치로부터 그려라라는 의미가 되겠습니다 그리고 background를 가져옵니다 Background= pygame,image,load 에서 png파일로 정의해 둔 걸 가져옵니다 로드했고, 그리는 함수 만들었고, 그 다음 이제 그려야죠 그리는데 아까 블랙으로 색깔 지정한 걸 뺄게요 왜냐면 게임하면 블랙으로 안 칠해도 배경화면을 꽉 채우기 때문에 Drawobject로 background 0,0 이렇게 그려주겠습니다 확인 보시면 background가 정의되지 않았다 이걸 보시면 backround 정엽변수를 안 불러왔습니다 지구가 있고 우주가 있는 그런 배경화면이 넣어졌습니다 배경 그림과 함께 실제 전투기가 있어야겠죠 그래서 전투기를 넣어줍니다 fighter 넣어주고요 Fighter에 이미지를 로드해줍니다 전투기를 어느 위치에 할지 초기화가 필요합니다 이미지 사이즈를 가져온 뒤 전투기의 실제적인 폭과 너비로 지정을 해줍니다 그 다음에 전투기가 게임에 나타나야 하는데 처음에 어디에 나타나야 할지 전투기 초기 위치로 xy좌표로 잡아줍니다 폭에서 045 위치, 그리고 높이에서 09 위치 즉 밑에 부분, 중간에 위치하게 되겠죠 그리고 전투기로 화면을 그려줘야겠죠 배경화면 그린 다음에 drawobject로 전투기를 화면에 그려줍니다 중앙 쯤에 위치하도록 이렇게 비행기를 넣었습니다 그 다음은 전투기의 움직이는 부분을 설정해 줍니다 이 이벤트 처리 부분에 전투기를 움직일 수 있는 키보드 이벤트도 한 번 받아보도록 할게요 Event Type in pygame

keydown 키가 눌리면 이 이벤트로 들어옵니다 그런데 키가 무슨 키가 눌러있는지 또 한 번 체크해주어야겠죠 Event Key=pygamek_left 왼쪽으로 다섯칸 -5를 해주어서 왼쪽으로 움직이라는 의미입니다 오른쪽도 설정해줍니다 Fighterx를 +5로 설정하여 오른쪽으로 움직이도록 해줍니다 Left, right 키 눌렀을 때 움직이는 부분을 해주었습니다 Keydown은 키가 눌렀을 때, keyup은 키를 뗄 때 입니다 keyup이벤트가 들어오면 비행기가 멈춰야 겠죠 두 개가 들어오더라도 비행기 현재 좌표를 0으로 설정하여 손을 떼면 정지하도록 해줍니다 그 다음에 전투기 위치가 키보드 조작에 따라서 바뀌도록 재 조정해주어야 겠죠 실제 x위치에 다가 fighterx라는 즉 키보드로부터 변경된 위치를 x좌표 위치로 발현을 시켜줍니다 그 다음에 x가 0보다 작을 경우란 게임 왼쪽으로 끝까지 가는 경우 비행기가 움직이지 않게 하기 위해 음수가 될 경우에는 0으로 게임 밖으로 빠져 나올 수 없게 최대 왼쪽으로 갈 수 있는 부분을 고정해주는 겁니다 마찬가지로 게임 화면에 끝까지 오른쪽으로 갔을 때 비행기 전체 width값에 pad에서 width값을 뺀 나머지 값은 x위치로 즉 더 이상 오른 쪽으로 못가게 막아줍니다 이렇게 움직이는 것 까지 했습니다 그 다음에 비행기가 미사일을 발사해야겠죠 미사일을 발사하기 위해서 미사일 그림을 좀 가져올게요 미사일 그림을 가져 왔습니다 그 다음에 global 변수로 미사일을 선언합니다 그 다음에 무기 좌표 리스트 missileXY를 리스트 형태로 미사일 하나만 발하는게 아니잖아요 여러 개니까 여러 개 위치를 가지고 올 변수가 필요합니다 미사일을 스페이스키로 발사하기 위한 설정을 해줍니다 미사일 현재 위치를, fighter의 width를 2로 나눕니다 즉 미사일을 현재에 비행기의 중간에서 나가게끔 x좌표를 잡아주고요 y는 전체 y좌표에서 비행기 크기 만큼 빼주면 되겠죠 그러면 미사일이 전투기의 앞부분 중간에 발사되게끔 설정이 됩니다 그 다음에 만들었던 missileXY 리스트 변수에다가 missileX, missileY 좌표값을 그대로 저장해 줍니다 여러개가 나가야 되기 때문에 저장 해 줍니다 이렇게 미사일 여러 개가 발사되야 되겠죠 미사일을 발사한다라는 건 어디에 있어야 되느냐 비행기 그리고 나서 length를 구합니다 즉 0이 아니면 (1개 이상이면) 여러 조건에 따라서 미사일을 그립니다 Enumerate로 미사일 xy에 따라서 전체적으로 돌고 그 다음에 i와 bxy가 첫번째 부분에 -10을 해줍니다 미사일이 위로 발사 되므로 y좌표로 치자면 -10씩 미사일이 빠르게 이동하는 형태로 만들어 줍니다 그 다음 미사일 여러 개니까 bxy부분에 대한 값을 넣어줍니다 즉 -10 만큼 이동된 값이 미사일xy라는 리스값으로 바뀌어야합니다 미사일 xy값이 현재 -10만큼 이동된 값으로 바뀌어야 되기 때문이 이런 식으러 넣어줍니다 그 다음에 0보다 작거나 같을 때, 즉 미사일이 화면 밖으로 넘어갔을 때 화면 밖으로 넘어가면 미사일 리스트에서 제거해주어야 합니다 미사일이 실제 0이 아니면 다시 한번 미사일을 다시 한 번 그려줍니다 그 다음에 미사일을 발사해야 하는데 없앨 운석을 떨어뜨리겠습니다 운석을 그냥 떨구면 재미없으니 랜덤으로 30개나 준비했습니다 운석 30개를 random으로 가져옵니다 운석을 하나만 해도 되는 데 단순하게 하나만 있으면 게임 전체의 다이나믹스가 감소되겠죠 30개 부분을 이렇게 정의했습니다 운석이 랜덤하게 생성될 수 있도록 설정해줍니다 결국 불러오는 시점에서 랜덤으로 고르면 되기 때문에 아까 우리가 정했던 30개 중에서 1개를 랜덤하게 고릅니다 그런데 운석의 크기가 다르기 때문에 가져온 그림의 실제 크기를 가지고 폭과 너비를 가져옵니다 게임의 다이나믹스를 위하여 운석의 초기 위치도 랜덤하게 설정해 줍니다 그래서 운석의 x위치를 바꾸어 줍니다 Rockspeed 즉 운석이 떨어지는 속도인데 이건 초기값을 2로 지정을 해볼게요 운석이 실제 미사일이 발사되고 화면이 업데이트 되기 이전에 rockY, 운석은 y좌표로 움직이니까 그래서 rockspeed 2로 적용했던 부분을 rockY도 적용시켜 줍니다 그리고 운석이 지구로 떨어졌어요 pad의 전체 크기보다 rockY좌표로 넘어 섰을 경우 운석이 화면밖으로 지나갔기 때문에 새로운 운석을 만들어주어야 합니다 copy 후 추가 그러면 운석을 새로 고르게 됩니다 그리고 운석을 실제로 그리기 위해 rockX좌표, rockY좌표를 설정합니다 운석이 파괴되도록 만들어 보겠습니다 파괴되는 데 운석이 그냥 사라지게 할 수도 있겠지만 그럼 재미가 없으므로 폭파되는 이미지를 가져옵니다 그래서 explsion 이미지 파일을 가져와요 그리고 실제 전투기 미사일에 운석이 맞았을 때 부분을 처리하겠습니다 맞았을 때 (isShot) 갯수를 세 줄게요(shotCount) 그 다음 운석을 놓쳤을 때 정보도 입력하겠습니다 global변수로 explosion을 둘 다 넣어줍니다 그 다음에 미사일이 운석을 맞췄어요 그럼 이제 미사일을 발사 그리는 부분에서 미사일이 운석을 맞췄을 때를 처리해주어야 합니다 만약에 bxy[1]에 0번 째가 rockX 즉 운석 위치, 돌의 부분에 겹치냐 안겹치냐를 확인하는 부분입니다 미사일이 운석의 범위 안에 들어가면 기존 미사일을 제거해주어야 겠죠 미사일이 운석을 맞추었으니까 isShot을 True로 바꾸어 줍니다 그 다음에 맞았으니까 shotCount를 1더해줍니다 운석을 실제 그리기 이전에 만약에 isShot을 플래그로 뒀던게 True로 바뀌면 즉 맞췄을 경우에는 폭파해야 하니까 explosion으로 넣던 운석이 폭파되는 그림을 띄웁니다 그리고 폭파 시켰으니까 새로운 운석을 그립니다 그리고 isShot은 True에서 False로 바꾸어 줍니다 운석이 파괴되는 것까지 추가했습니다 그 다음에는 파괴한 운석수랑 놓친 운석수, 게임 스코어 정보가 있어야 합니다 카운터 정보를 받으면 나눔고딕으로, 사이즈 20으로 표현해보겠습니다 Rendering 하고 ’파괴한 운석 수’ 를 적어 줍니다 그 다음에 카운트로 온 운석수를 str으로 변환해줍니다 파괴한 운석수 색깔을 흰색으로 할게요 (RGB모두 255, 흰색) 위치는 10,0 왼쪽 위에 둘게요 그리고 운석을 놓친 수도 비슷하니까 복사해줄게요 (writeScore를 writePass로 바꿔주기) 위치를 오른쪽 위에 띄우고 빨간색으로 강조할게요 (RGB중 R을 255로) 실제 미사일이 운석을 맞추었을 때 스코어를 증가시켜주어야 되기 때문에 shotCount라는 변수를 반영하고 그 밑부분에 실제 운석을 맞춘 점수가 표시되게끔 shouCount를 설정 해 줍니다 그 다음 운석이 지구로 떨어진 경우 padHeight보다 운석y좌표가 넘어갔을 때 rockPassed를 1로 증가시켜 줄게요 놓친 경우도 마찬가지로 화면에 출력해줍니다 writePassed에 ‘놓친 운석 수 표시’로 이름을 바꾸어 줍니다 그 다음에 운석을 맞추면 속도를 증가시켜봅시다 isShot 부분에 맞추면 rockSpeed에 숫자를 넣습니다 02

씩 증가하는데 10보다 빠르면 게임 거의 불가능하기때문에 10으로 그냥 맞춰줍니다 조금씩 빨라지는 것이 느껴지시나요? 맞출수록 운석 내려오는 속도가 빨라지고 있어요 전투기가 운석과 충돌하거나 운석을 놓혀 게임오버가 되면 게임을 정지하고 다시 하는 부분을 추가해보도록 하겠습니다 게임에 메시지를 출력해야 하기 때문에 메시지 함수를 통해서 실행시킵니다 TextFont = pygameFontFont 게임 메시지는 60정도로 좀 크게 출력할게요 Textfont Render에서 색깔은 레드 (RGB 255, 0,0) 텍스트의 포지션은 Length에서 실제 포지션을 정해줍니다 TextPosCenter 정중앙에 출력한다는 의미입니다 이것은 실제적인 화면에 텍스트를 출력하는 부분이고 게임의 디스플레이를 업데이트 해줍니다 이건 뒷부분인데 미리 Sleep만 걸어 줄게요 우리는 동전이 무제한이에요 그래서 게임이 다시 한번 또 실행이 됩니다 ‘Sleep 2초 쉬고 게임 다시 실행해줘’ 이거에요 그 다음에 crash되는 부분 즉 충돌났을 때 아까 우리가 정의했던 메시지 함수에다가 전투기가 파괴됐다 라는 부분을 호출해줍니다 그 다음 게임오버된 부분 게임오버 되면 '게임오버가 됐다'를 띄워줍니다 실제 운석이 충돌되는 지에 대한 이벤트를 넣어줍니다 전투기가 위치가 바뀌는 부분을 읽고 위치가 바뀌어서 실제 다음 전투기를 그리기 이전에 전체 rock의 좌표와 Y라 보면 안되겠죠 X도 마찬가지로 그려줍니다 충돌하는 부분을 체크하는 겁니다 그래서 y, x좌표를 보고 실제 운석이랑 비행기의 어떤 부분이랑 겹치는지 안겹치는 지를 체크해서 만약 겹치면 충돌이 났다라고 띄워줍니다 그 다음은 운석을 계속 놓칠 경우 설정합니다 만약에 놓친 것이 3개면 게임오버가 되는 설정입니다 오타를 잘 체크해봅시다 🙂 위치도 잘 체크해 봅시다 🙂 게임오버를 확인해 봅니다 게임의 각종 소리를 넣어 보겠습니다 미사일이랑 global 변수랑 게임오버되는 오버사운드 2가지를 미사일 사운드, 게임오버 사운드 두개를 global 변수로 추가해 줍니다 그 다음 pygame

MixerMusicLoad 에서 실제 음악파일들을 받을 건데 Musicwav 파일은 제가 배경음악으로 준비를 했습니다 게임 배경음악인데요 유튜브 오디오 라이브러리에서 아주 좋은 걸로 찾아놨습니다 그 다음에 미사일이 발사할 때도 사운드를 발생해주어야 되기 때문에 Missile

wav파일 그 다음에 게임 오버 사운드 이렇게 load하는 부분이 끝났습니다 그 다음에 각각에 게임 중에 미사일이 발사되죠 스페이스 누르면 미사일 사운드를 플레이 시켜줍니다 그 다음에 게임 메시지 출력할 때 게임 오버 사운드를 씁니다 여러분 메시지 출력할 때 무엇을 해주어야 하냐면 배경음악이 재생되고 있을 거 아니예요 그 배경음악을 잠깐 멈추어 주어야 해요 그 다음에 게임 오버 사운드를 플레이 시켜줍니다 Sleep 2해주고 그 다음 배경음악을 다시 플레이 시켜주어야 합니다 그 다음에 운석을 만들어주는 부분 처음에 운석 만들어주는 부분에 운석이 새롭게 생성되는 동시에 사운드도 랜덤으로 고를 수 있게 설정해둡니다 DestroySound로 4개중에 하나를 고를 수 있게 해주고요 그리고 운석이 파괴되는 건 실제 맞추었을 때 IsShot, 맞추었을 때 파괴되는 폭발 그림 그려주고 여기에 Destroy 사운드를 재생해줍니다 파괴되고 새로운 운석 만들면서 이때 destroy 사운드를 랜덤하게 골라 주는 부분을 추가해 줍니다 이렇게 게임 동작을 하는지 확인해볼까요 소리 잘 나죠 배경음악도 나오고 미사일 쏘는 소리 그리고 파괴되는 소리도 나옵니다 이렇게 해서 지구를 지켜라라는 파이슈팅게임 완성이 됐습니다 완성! 여러분들이 게임을 가지고 다양한 변형으로 새로운 게임을 만들 수 있습니다 이미지를 바꿀 수 있고, 소리를 바꿀 수 있고 게임을 좀 더 다양한 장르로 여러분들이 원하는 게임을 쉽게 만들 수 있겠죠 이렇게 게임을 만드는 과정까지 살펴보았고요 다음에 또 좋고 유익한 강의로 찾아 뵙도록 하겠습니다 지금까지 이수안컴퓨터 연구소였습니다 감사합니다

갤럭시 순정카메라 셔터음을 무음으로 만들기 ???

반갑습니다 썽튜브입니다 안드로이드 쓰시는 분들 많이 계시죠 오늘은 굉장히 굉장한 안드로이드 어플 하나를 소개해 드리려고 합니다 유용한 정보니까 끝까지 꼭 시청해 주시고요 기본적으로 이 어플은 셔터음을 없앨 수가 있는 어플입니다 구글 플레이 스토어를 보시면은 셔터음을 없애서 사진을 찍을 수 있는 무음 카메라 어플들이 유무료로 굉장히 많이 제공되고 있습니다 보통 이런 어플을 찾으시는 분들은 셔터음이 안 나게 꼬름하게 사진을 찍고 싶으신 분들이죠 주변에 보면은 순정카메라 어플이 분명히 좋은데도 단지 셔터음 때문에 어쩔 수 없이 다른 어플을 써야 하시는 분들이 꽤 있습니다 오늘 소개해드릴 이 어플은요 순정 카메라 어플을 그대로 사용하면서 셔터음만 없앨 수 있는 기능이 있어요 뿐만아니라 이 어플에는 그외에도 좋은 기능들이 몇 가지 더 있는데 제가 써 보고 너무 좋아서 소개를 드리는 거니까 여러분들에게도 많은 도움이 될 수 있는 이 어플의 여러 가지 기능들 같이 한 번 보러 가시죠 아아아 ~ 잠깐만요 이 어플을 소개해드리기 전에 셔터음을 없애는게 불법인지 아닌지 얘기를 하지 않을 수가 없겠네요 요즘에는 스마트폰 카메라가 굉장히 비약적으로 발전을 하면서 카메라를 따로 들고 다니시는 분들 보다 스마트폰으로 사진 촬영을 하시는 분들이 굉장히 많이 있습니다 사진뿐만 아니라 동영상까지요 뭐 아시는 분들은 아시겠지만 갤럭시가 일본과 우리나라에서만 셔터음이 나도록 자동으로 설정이 되어 있습니다 그 외의 국가에서는 셔터음이 나지 않게 설정이 되어 있고요 혹시 셔터음이 나지 않는것을 좋지 않게 생각하시는 분들이 계실 수도 있는데요 셔터음이 나지 않는 카메라가 필요한 경우가 종종 있습니다 예를 들면 저같은 경우에는 오프라인 강의를 듣거나 세미나에 참석을 했을 때 앞에 설명 되고 있는 내용을 카메라로 조용하게 찍으면 굉장히 유용할 때가 많이 있어요 만약에 이런 경우에 셔터음이 울린다면 사진 촬영을 하게되면 민폐가 되겠죠 외국에서 사람들이 많이 가는 유명관광지를 가보면은 셔터음이 막 울리는 찰칵 찰칵 찰칵 찰칵 찰칵 소리가 나는 곳을 보면은 과장 조금 보태서 대부분 일본 사람 아니면은 한국 사람들이 있습니다 일본과 한국을 제외한 그 외의 국가들에서는 셔터음에대한 법적인 규제가 없습니다 엄밀하게 이야기를 하자면은 우리나라에서도 셔터음이 무음으로 되는 게 불법은 아닌데요 2004년 정보통신부에서 "카메라오남용 규제방안"이라고 셔터를 눌렀을 때 65dB 이상 소리가 나도록 제조사와 통신사에게 권고사항으로 제시한 바가 있습니다 우리나라 제조사와 통신사들은 그 권고사항을 잘 준수하고 있는 거고요 아 이건 좀 딴 얘긴데 아니 왜 카메라 오남용하는 사람들의 처벌을 강화해야지 일반적으로 아무 문제를 일으키지 않고 사용하는 대다수의 사람들이 왜 피해를 봐야 되는 아 잠시 이야기가 다른데로 샜는데요 어쨌든 우리 나라에서 무음으로 셔터음을 하는 것도 불법은 아니다 아 참고로 말씀을 드리자면 우리나라에서 셔터음이 나는 갤럭시를 외국에 가서 펌웨어 업그레이드를 하면은 셔터음이 나지 않는 갤럭시로 바뀝니다 반대로 외국에서 셔터음이 안 나게 사용하던 갤럭시를 우리나라에 가지고 와서 펌웨어 업그레이드를 하면은 다시 셔터음이 나는 갤럭시로 바뀌겠죠 아마도 현지에서 업그레이드 한 펌웨어는 그 현지에 맞는 펌웨어로 설정이 되어 있는 것 같습니다 이 어플의 여러 가지 기능들 같이 한번 보러 가시죠 구글 플레이 스토어에서 무료로 받을 수가 있습니다 어플 이름은 "NGC 4388" 입니다 음 이게 무슨 뜻인지는 잘 모르겠고 이름이 좀 특이하네요 그런데 개발자 이름이 더 특이해요 크롱 크롱 파닥 파닥?? 파닭 먹고 싶네요 한 번 눌러서 어떤 내용이 있는지 한 번 보겠습니다 자 뭐 특별한 내용은 없고 이메일 주소도 나와있고 아 주소가 딱 걸렸어 지구에 사시는 분이네요 열기를 눌러보겠습니다 자 이 어플은 호환성이 굉장히 높은 편이에요 아마 여러분들도 안드로이드 기종에 상관없이 다 잘 될 거라고 생각이 됩니다 우선 제일 위에 보시면 "볼륨키 동작 고정"이라는 메뉴가 있어요 이거는 뭐냐 여러분들이 휴대폰을 매너모드나 무음 모드로 사용하실 때가 있으실 거예요 그럴 때 무음모드가 된 상태에서 볼륨버튼을 조절하면은 뭐야 이거 이렇게 벨소리라는 제목으로 볼륨을 조절할 수가 있게 나와요 동영상을 재생하고 있거나 아니면은 음악을 듣는 상황이 아니기 때문에 일반적인 상황에서 볼륨 키를 누르면은 벨소리가 조절이 되면서 무음 모두가 풀려 버리죠 이런 상황을 의도치 않게 겪으신 분들이 있으실 거예요 나는 분명히 무음 모드로 해 놨는데 주머니에서 눌려서 벨 소리로 바껴있고 조용한 공간에서 갑자기 전화까지 오는 상황 그래서 이 메뉴를 활성화시키고 무음모드에서 볼륨키를 조정하면은 벨 소리가 아니라 이번에는 미디어 볼륨이 조절 됩니다 다시 말해서 "볼륨키 동작 고정" 이라는 말은 볼륨키를 미디어 볼륨 조절하는데만 사용하는 걸로 고정을 하겠다라는 말이에요 보통은 벨소리 크기를 자주 바꾸지는 않으시잖아요 굉장히 좋은 기능이예요 그죠 그리고 여기 보시면은 미디어 볼륨 조절 단계를 여러가지로 세분화하는 기능도 있어요 보통 갤럭시는 원래 볼륨 조절 단계가 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 열다섯 단계가 있는데 이거를 활성시키면은 30단계까지 세분화해서 조절을 할 수가 있습니다 그리고 특히 한 칸 이하일 경우 그러니까 아까 1단계 일 경우에는 1단계를 다시 10단계로 세분화시켜서 볼륨 조절을 할 수가 있습니다 여러분이 조용한 곳에서 미디어를 시청해야 된다고 하면은 1단계도 볼륨이 크다라고 생각하실 상황들이 있을 수 있겠죠 그리고 또 밑으로 가보면은 자 요거 요거 요거 요게 또 진짜 꿀 기능입니다 지금 여기 무음모드라고 되어있는 메뉴가 카메라 셔터음을 없앨 수 있는 기능인데 비활성화 상태에서 사진을 찍어 보겠습니다 자 사진을

소리가 나죠 이번에는 활성화시켜 보겠습니다 활성화시키면은 여기 무음타입을 설정 할 수가 있어요 항상 무음으로 하면은 핸드폰이 어떤 상황에서도 무음이 돼버려요 저는 자동으로하고 기본 카메라로 설정하겠습니다 이렇게 설정을 해 놓고 다시 사진을 찍어 볼게요 찰칵 어때요? 순정 카메라가 소리가 나지않죠 여기 선택된 앱으로 설정을 하시면은 다른 갬성있는 여러가지 카메라들 그 어플들도 무음으로 촬영할 수 있게 설정이 가능합니다 또 밑으로 내려와 보시면은 "문자로 매너모드해제" 라고 있어요 이게 뭐냐면은 핸드폰을 주머니에 넣어 놨는지 가방에 넣어 놨는지 핸드백에 넣어 놨는지 전화를 걸어서 찾아야 할 때가 있어요 그런데 휴대폰 벨소리를 만약에 무음으로 해 놨다 혹은 매너 모드로 해 놨다 이거를 활성화시켜 놓고 이 휴대폰으로 문자를 보내면은 매너모드가 풀리게 설정을 할 수가 있습니다 여기를 읽어보니까 아래 언락코드와 함께 크기% 를 함께 보내면은 해당볼륨으로 설정합니다 예를 들어서 "크롱크롱파닥파닥 30%" 저는 언락코드를 썽튜브라고 했어요 그리고 여기 밑에 또 옵션이 있어요 문자 수신시 바로 폰울림 문자를 보냈을 때 언락코드 저는 썽튜브라고 해놨으니까 "썽튜브50%" 라고 문자를 보냈다고 치면은 문자 수신시 바로 매너모드 해제뿐만 아니라 30초간 벨소리를 재생하게 바꿀 수가 있는 겁니다 실험을 한번 해보겠습니다 무음모드로 되어있는 상태고요 "썽튜브50%" 전송 해 보겠습니다 굉장히 유용한 기능들이죠 여기 보시면은 뭐 화면 켜기 연장하는 기능도 있고 화면을 더욱 어둡게 설정하는 메뉴도 있고요 여러가지 진짜 유용한 기능들이 많이 있어요 여러분들이 한 번 차근차근 읽어 보시고 유용하다고 생각하시는 기능들 한 번 써보셨으면 좋겠습니다 저는 굉장히 유용하게 쓰고 있는 어플이거든요 자 이렇게 굉장히 굉장하고 엄청나게 엄청난 어플을 하나 소개해 드렸는데요 앞서 말씀드렸지만 이미 구글 플레이스토어에는 무음셔터음을 지원하는 카메라 어플들이 굉장히 많이 있습니다 하지만 오늘 소개해드린 이 어플은 약간은 다른 방법으로 셔터음을 무음으로 사용할 수 있는 방법이기 때문에 나는 순정 카메라 어플 좋다 하시는 분들은 굉장히 강추 드리고 싶습니다 저 같은 경우에도 순정 카메라 어플이 마음에 드는데 뭔가 또 다른 카메라 어플들을 여러개를 사용 한다는게 갤러리를 관리하기도 힘들고 여러 가지로 번거로울 거 같아서 퀄리티도 괜찮은 순정 카메라를 계속 사용하고 싶거든요 그럴 때 셔터음이 필요 없다 라고 하면은 오늘 이 어플 한번 사용해 보시기 바라겠습니다 갬성있는 필터 낀 어플들 사용하고 계신 분들 계시죠 그런 어플을 사용한다고 하시더라도 셔터음을 또 안 나게 만들 수도 있고 셔터음 외에도 여러가지 좋은 기능들을 많이 가지고 있는 어플이니까 적절하게 사용하신다면 정말 좋은 어플 될 수 있을 것 같습니다 오늘 영상이 도움이 되셨다면 좋아요 구독 꾹꾹 눌러주시고요 오늘 영상도 끝까지 시청해주셔서 정말로 감사드리고요 저는 또 알차게 준비한 다음 영상에서 찾아뵙도록 하겠습니다 감사합니다

웹 애플리케이션 만들기 – 호스팅 1 : 웹호스팅 VS 서버호스팅

네, 이번 시간에는 호스팅이라고 하는 주제에 대해서 알아보겠는데요 지금까지 우리가 살펴 본 것은 자신의 컴퓨터에 여러분이 설치한 운영체제죠 그리고 거기에 PHP, MY SQL도 직접 설치했고 거기에 여러분이 만든 애플리케이션을 탑재해서 인터넷을 통해서 사용자들에게 서비스를 제공하는 것이 지금까지 우리가 했던 겁니다

다시 말해서 우리가 다 혼자서 한거에요 자, 그런데 제가 말씀 드린 것 처럼 여러가지 복잡한 이슈들이 있고 여러분의 집에서 서비스를 운영하는 것은 상당히 제한적이고 여러가지 불편한 점들이 많이 있습니다 그래서 그런 불편한 점을 대행해주는 비지니스가 있어요 그게 바로 호스팅 이라고 하는건데요 우선 HOST가 뭔지 부터 한번 살펴 보면 자, 이렇게 인터넷에 접속되어 있는 여러대의 컴퓨터들 하나 하나를 우리가 보통 호스트라고 부릅니다 자, 그런데 그 중에서 호스팅(HOSTING) 이라고 하는 것은 조금 관점이 달라요 호스팅 이라고 하는 것은 클라이언트 쪽이 아니라 보통 정보를 제공하는 사업자 즉 이쪽에 있는 저런 서버쪽 에서 사용되는 컴퓨터 또는 소프트웨어 이러한 것들을 제공하는 그런 사업자들을 우리가 호스팅이라고 보통 부릅니다 자, 그래서 이 호스팅에서는 어떤 환경을 갖추고 비지니스를 하냐면 이 사업자들이 일단 IDC 라는 것이 있습니다 IDC 는 Internet Data Center 라는 뜻이에요 그래서 이 IDC는 그냥 건물이에요

건물인데 엄청나게 크고 엄청나게 많은 컴퓨터들이 이렇게 빼곡히 자리를 잡고 있어요 즉 컴퓨터들의 집이라고 할 수 있습니다 그래서 이 IDC는 아주 안전한 곳에 또 전기가 차단되면 그 전기가 자동으로 자가발전을 시작하는 그런 인프라고 그리고 인터넷과 같은 네트워크가 아주 빵빵하게 들어와서 아주 원할하게 통신할 수 있는 그런 서버가 동작하기에 최적의 조건을 갖춘 그러한 공간을 우리가 IDC 데이터 센터(Data Center) 라고 합니다 그래서 이 데이터센터가 갖춰야될 가장 중요한 경쟁력은 일단은 안전한 보안 그리고 네트워크가 빵빵해야 된다 라는 것이죠 바로 이런 인프라를 갖춰놓고 또는 이런 인프라 안에 들어가서 사용자들에게 어떤 웹 애플리케이션을 운영하고자 하는 사람들에게 그 서버의 운영을 대행해주는 역할을 하는 곳이 바로 호스팅 사업입니다 자, 크게 대표적으로는 두가지로 웹호스팅, 그리고 서버 호스팅을 얘기할 수 있을텐데요 자 우선 웹 호스팅이라는 것은 웹이 앞에 붙어 있잖아요 그 얘기는 뭐냐면 웹 애플리케이션을 운영하기 위한 다시 말해서 웹 서버를 운영하기 위한 모든 것을 제공 하는 것을 우리가 웹 호스팅이라고 합니다 자, 그래서 기본적으로 서버, 여기서 얘기하는 서버는 하드웨어를 의미하는 것이고 또 운영체제까지 포함이 되는거죠 그리고 거기에는 당연히 빵빵한 인터넷이 연결이 되어 있어야 되죠 그리고 그러한 것들 뿐만 아니라 실제로 우리가 웹 애플리케이션을 동작하기 위해서는 이러한 것들이 필요했잖아요 데이터베이스, PHP, 웹서버 이런 것들이 필요했는데 그런 것들을 여러분들이 설치하는게 아니라 사업자가 미리 설치해 놓고 여러분들은 그냥 거기에다가 자신이 만든 애플리케이션을 업로드 하기만 하면 이제 동작하기 시작하는 것이 웹 호스팅 입니다 장점은 그냥 업로드만 하시면 되요 신경쓸게 없습니다 여러분은 자신이 만들고 있는 애플리케이션을 잘 만드는 것에 집중하면 된다는 것이고요 그리고 단점은 웹 애플리케이션을 동작하는 용도로만 사용할 수 있다는 겁니다

왜냐하면 여러분이 운영체제 레벨에서 접근해서 뭔가 할 수 있는 여지가 전혀 없기 때문에 그냥 웹사이트를 운영하는데만 사용 할 수 있어요 그리고 일반적으로 웹호스팅은 한대의 컴퓨터에 여러명의 사용자들이 들어가서 같이 한대의 컴퓨터의 자원을 공유하고 있기 때문에 만약에 이웃을 잘못 만나서 이웃이 대박이 나면 여러분한테는 슬픈 일이 오는거에요 왜냐 자신의 사이트가 느려지는거죠 바로 이러한 장점과 단점을 가지고 있는 것이 웹호스팅 입니다 하지만 가장 사용하기 쉽고 비용도 대체로 저렴하기 때문에 여러분이 자기가 직접 집에서 서버를 운영하는 것이 아니라면 제일 먼저 고려해 볼 만 한 것은 웹호스팅 입니다 자 그 다음에는 서버호스팅이라고 하는 형태의 호스팅이 있는데요 자, 이 서버 호스팅은 쉽게 생각해서 컴퓨터를 제공하는 겁니다 그리고 이 컴퓨터는 인터넷에 연결이 잘 되어 있기 때문에 여러분이 이걸 이용해서 서버의 용도로 사용할 수 있는거죠 자 그래서 이 서버 호스팅은 일단은 서버 컴퓨터를 제공합니다 예, 그런데 이 서버 컴퓨터에는 아까 우리가 (배운) 웹호스팅과는 다르게 웹서버, 미들웨어, 데이터베이스 이런 것들이 하나도 설치가 안되어 있고 그냥 컴퓨터 한대를 임대해 준거에요 그럼 여러분은 자신이 필요한 그런 것들은 직접 설치해서 운영하셔야 합니다

장점은 뭐냐면 웹호스팅과는 다르게 여러분이 컴퓨터로 할 수 있는 모든 일을 다 할 수 있어요 네, 그렇기 때문에 자유도가 높기 때문에 활용도가 높다는 장점이 있습니다 근데 단점은 직접 운영을 해야되요 자, 서비스를 직접 운영한다는거 결코 만만한 일이 아닙니다 네, 알아야 될것들이 상당히 많다는거죠 하지만 여러분의 집에서 여러분이 운영하는 것과는 다르게 서버 호스팅은 뭐, 장비라던지 어 그런 것들에 대해서는 어

업체들이 대행해 준다라는 차이가 있죠 하지만 여러분이 직접 운영하면 여러분은 자신의 장비까지 컴퓨터까지 직접 챙겨야 된다 라는 점에서 차이점이 있는거죠 지금 우리가 살펴본 호스팅의 두가지 형태 웹호스팅, 서버호스팅 이 두가지가 우리가 인터넷을 통해서 어떤 서비스를 사용자들에게 제공한다고 하면 가장 일반적으로 사용되는 가장 쉽게 여러분들이 접근해 볼 수 있는 전통적인 모델이라고 할 수 있습니다 자, 그러면 또 다른 모델이 있냐? 있습니다 클라우드 컴퓨팅 이란 것이 있는데요 이 클라우드 컴퓨팅 이라고 하는 것은 우리가 다음 영상에서 도대체 클라우드 컴퓨팅 이란 것이 무엇이고 이건 어떤 차이점이 있는지에 대해서 다음시간에 살펴보도록 하죠

웹애플리케이션 만들기 – MySQL 실습1 : PHP와 연동

우리가 이전 시간에 데이터베이스 이론 수업을 진행을 했구요 이번 시간에는 우리가 배운 그 데이터베이스를 실제로 활용해서 웹 애플리케이션을 만드는 구체적인 방법에 대해서 살펴보겠습니다

우선 복습 차원에서 예전에 우리가 작업했던 것을 다시 한 번 리뷰를 해 보죠 보시는 것 처럼 이런 구성이었어요 웹브라우저, 웹서버, PHP 그리고 데이터는 FILE에 저장되어 있는 상태가 우리가 지금까지 만들어오던 micro 한, 작은 opentutorials 예제가 이런 구성으로 현재 되어 있었다는 것이죠 그 중에서 저 FILE이라고 되어있는 부분, 데이터를 FILE에 저장하고 있었던 것을 좀 더 개선해서, FILE이 아니라 바로 MySQL이라고 하는 데이터베이스로 교체하는 작업을 이번 시간부터 우리가 진행을 할 겁니다 그래서 결과적으로 우리가 만든 애플리케이션이 동작하는 방법에는 차이가 없습니다 다만 그 내부적으로 정보를 파일에 저장하느냐 데이터베이스에 저장하느냐의 차이가 생겼을 뿐이구요

그런 맥락에서 이 PHP라고 하는 것은, 이 파일에 데이터 저장하고 읽고 이랬던 역할에서, 보시는 것처럼 이 데이터베이스 시스템과 또 웹서버 사이에서 이렇게 중계자와 같은 역할을 하게 됩니다 즉 사용자가 요청한 aphp를 웹서버가 처리할 수가 없기 때문에 PHP에게 위임을 하는데 그 aphp에 데이터베이스에 있는 정보를 가져와서 웹페이지로 만들라는 코드가 들어가 있다면 이 PHP가 중간에서 데이터베이스에 있는 정보를 가져와서 웹페이지를 만들어내는 일종의 중계자와 같은 역할을 한다는 것이죠 그런 맥락에서 이런 PHP 애플리케이션을 우리가 미들웨어라고도 부릅니다

그럼 PHP가 그런 일을 하기 위해서 무엇을 우리가 사용을 해야 되고 어떻게 프로그래밍을 해야 되냐면, 바로 “mysqli”라고 하는 이 PHP에 내장되어 있는 API를 사용을 해서 우리가 그런 목적을 달성할 수가 있습니다 그러면 지금부터 우리가 일단 실습 환경을 좀 구축을 해 보죠 실습 환경은 이미 다 구축이 되어있어요 우리가 기존에 indexphp라는 파일을 이용해서 샘플을 만들었죠

그리고 이 파일 내부적으로는 8개 콘텐츠, 즉 파일을 읽어드릴 때 사용하는 API를 사용을 해서 구축이 되어 있었습니다 바로 이런 부분들을 우리가 PHP로 데이터베이스를 핸들링 할 때 사용하는 mysqli로 교체 하려고 하는 겁니다 그 때 사용하는 것은 일단은 제일 위 쪽에 이렇게 PHP를 입력할 수 있는 부분을 만들어주시고요 여기에 제가 지금부터 설명 드리는 내용을 추가하시면 됩니다 그런데 데이터베이스를 핸들링하는 데이터베이스를 다루는 코드는 꽤 복잡하고 다양한 이 문제 상황들이 발생할 수가 있기 때문에, 여러분들이 어떤 문제가 발생했는지를 알고 계셔야 됩니다

그냥 보시면 화면에 아무것도 표시가 안 될 거기 때문에, 그래서 제가 예전에 여러분들에게 말씀 드렸던게 기억나실지 모르겠는데, 이 디버그라는 수업에서 문제가 발생했을 때 어떤 문제가 발생했는지를 알 수 있는 파일이 있다고 말씀을 드렸습니다 그 파일을 열어놓고 실습을 진행하셔야 돼요 그러면 그 파일을 찾는 법을 다시 한 번 remind를 시켜줄게요 우선 “FILE”에서 “Open File”을 선택하시구요 “Bitnami”디렉토리에서 “ampstack”으로 들어가신 후에, 그 중에서 “apache”로 들어 가시고, “logs”라고 되어있는 곳으로 들어가시면, “error

log”라는 파일이 있습니다 저 파일을 열어보시면 이렇게 생긴 화면이 뜨는데요 바로 여기에 에러가 있을 경우에 그 에러 내용이 여기에 표시가 됩니다 그 내용을 보시고 어디에서 문제가 생겼는지를 추적하시면 되구요 또는 다른 사람에게 질문할 때 이 에러 메시지를 다른 사람에게 보여주는 것을 통해서 문제 해결에 도움을 받을 수 있을 겁니다

그러면 이제부터 이곳에 들어가야 될 코드들을 우리가 하나씩 하나씩 살펴보도록 하죠 제가 표를 하나 준비 했는데요, 여기 보시면 이 MySQL monitor가 왼쪽에 있고요, 그 오른쪽에는 PHP에서 데이터베이스를 사용하기 위해서 PHP가 제공하는 내장 함수 API인 mysqli가 이렇게 있습니다 그리고 왼쪽 끝에 보시면 “서버접속”, “DB 선택”, “조회”, “출력” 이라고 되어 있는데요, 이것은 우리가 이 데이터베이스 클라이언트가 베이터베이스 서버에 접속해서 어떤 일을 처리할 때 일어나는 작업들을 순차적으로 나열한 것 입니다 그래서 우리가 이미 MySQL monitor를 사용을 해 봤잖아요 그리고 이제부터 사용할 것은 mysqli인데, 이 두 가지 모두 이 데이터베이스 서버 입장에서는 그 서버에게 무언가를 요청하는 클라이언트이기 때문에 본질적으로 하는 일이나 또는 그것을 조작하는 방법은 사실 같습니다

하나는 일반적인 프로그램이고 그리고 또 하나는 API라고 하는 그런 차이가 조금 있을 뿐 이예요 그래서 익숙한 MySQL monitor를 통해서 그것에 대응되는 이 mysqli의 사용 방법을 짚어보도록 하겠습니다 우선 제일 먼저 MySQL monitor를 사용할 때 우리가 제일 먼저 하는 일은 뭐예요? 이런 명령을 운영체제에서 입력하죠? 이 명령이 의미하는 것은, localhost에 존재하는 데이터베이스 서버에 접속할 때, 아이디 값은 “root”고, 비밀번호는 “111111”인 사용자의 명의로 접속을 하겠다 라는 뜻이죠 그것과 대응되는 mysqli의 명령은 이렇게 됩니다 여기 보시면 “mysqli_connect()” 이렇게 되어 있습니다

그것은 뭐냐면 mysqli_connect가 바로 함수라는 거죠 그런데 저 함수는 여러분이 만든 적이 없기 때문에 기본적으로 PHP에서 내장되어있는 함수예요 실제로 데이터베이스를 핸들링하는 작업은 아주 복잡한 로직들에 의해서 이뤄지기 때문에 mysqli_connect 라고 하는 저 함수의 실제적인 내용은 상당히 복잡할 겁니다 그런데 단지 우리가 저 mysqli_connect 그리고 입력 값들을 주는 것을 통해서 데이터베이스에 아주 쉽게 접속할 수 있다는 거예요 처음 보셨을 때는 이것도 복잡하겠지만, 사실이 코드 한 줄이 함의하고 있는 복잡한 메커니즘을 생각한다면 우리가 얼마나 편하게 이 데이터베이스를 사용할 수 있는 것인지 여러분들이 상상은 하실 수 있을 것 같다는 생각을 합니다

아무튼 mysqli_connect라고 하는 저 함수의 메뉴얼을 살펴보면 그 첫 번째 입력 값으로는 host, 즉 접속하려고 하는 서버의 주소가 와야 된다고 되어 있구요 바로 그것이 MySQL monitor로 치면 이 부분이라고 할 수 있습니다 그리고 두 번째 입력 값은 사용자의 아이디 여기에 해당 되구요 마지막으로는 사용자의 비밀번호를 입력하라고 메뉴얼에 적혀있어요 “순서대로 입력해야 된다”라고 적혀있습니다 그것은 마지막 것은 이것이 되겠죠? 그래서 여러분이 이 코드를 실행을 시키면, 내부적으로 우리 눈에 보이지 않는 메커니즘에 의해서 데이터베이스 서버에 PHP가 접속을 하게 됩니다

그리고 접속에 성공하게 되면, 접속 결과를 “conn”connect를 줄여서 쓴 거예요 “conn” 변수에 입력 값으로 변수의 값으로 이렇게 이것이 출력을 해주는 것이죠 그럼 우리는 이 “$conn”라는 변수를 통해서 우리가 접속한 바로 이 정보에 의해서 접속된 서버를 제어할 수 있게 됩니다 이 코드를 실제 PHP 애플리케이션 코드에 반영하도록 하죠 PHP 코드가 시작되는 여기에 저렇게 하고서, 우선 “mysqli_connect(‘localhost’” -큰따옴표 작은 따옴표 상관 없습니다- 그 다음에 우리는 “root” 아이디이니까 아이디를 “root”를 적고요, 그 다음에 비밀번호는 “111111”이라고 적고 “;”을 합니다

그러면 저 함수가 실행된 결과는 “conn” 변수라고 할게요, “conn” 변수에 담기게 돼요 그 다음에 우리가 MySQL monitor를 사용할 때는 생각해보면, 서버에 접속한 다음에 그 다음에 뭘 했나요? 잘 기억 안 나실 수도 있는데 바로 데이터베이스를 선택했습니다 그때 사용하는 명령은 “use opentutorials” 였죠? 이 중에서 “use”라는 것은 명령어예요 그리고 “opentutorials”라는 것은 우리가 만든 데이터베이스의 이름인데요 “opentutorials”라는 데이터베이스를 이제부터 사용하겠다라고, MySQL monitor에서 명령을 내린거죠

그러면 그것에 해당되는 mysqli API는 무엇이 있을까요? 이것입니다 보시는 것 처럼 이 함수는 “mysqli_select_db“ 라고 하고, 첫 번째 인자로는 “$conn” 변수를 주셔야 됩니다 conn 변수라는 것은 mysqli_connect라고 하는 것을 통해서 접속에 성공했고 그 접속된 정보를 이 “conn”이라고 하는 변수에 담은 건데요 그 정보를 “mysqli_select_db“ 의 첫 번째 인자로 전달해 주도록 약속되어 있기 때문에 그대로 쓰시면 되는 겁니다 그 다음에는 우리가 사용하려고 하는 데이터베이스인 opentutorials를, 이렇게 그 다음 줄에 적어주시면 DB를 선택하는 것까지 끝난 것이 돼요 그러면 우리 코드에 반영해 보죠

우선 “mysqli_select_db”, “db”데이터베이스 약자입니다 그 다음에 첫 번째 입력 값으로 “conn”을 주시구요 그 다음에 두 번째로는 “opentutorials ”라고 이렇게 코딩을 하시면 됩니다 이렇게 해서 우리가 데이터베이스에 접속하고 데이터베이스를 선택하는 것 까지 우리가 알아 봤어요 그런데 시간이 좀 많이 됐고 우리가 할 이야기가 좀 더 많이 있기 때문에 실제로 테이블에 접근해서 그 테이블에 있는 정보를 가져온 후에 그것을 웹페이지로 만드는 우리 수업의 정말 클라이막스는 다음 시간에 다음 영상에서 살펴볼게요

웹에플리케이션 만들기 – JS, PHP 프로그래밍 9-1 : JavaScript 로그인앱

이번 시간에는 로그인 기능을 구현하는 방법에 대해서 살펴보겠는데요 지금까지 우리가 배운 것을 중간 정리하는 단계라고 보시면 되겠습니다

특히나 조건문이 중요하게 사용이 될 거에요 우선 Javascript부터 살펴볼 건데요 여러분들 좀 검은색과 흰색이 왔다 갔다 하면서 눈이 아프실 거 같아서 제가 색깔을 좀 밝은 색깔로 바꿔봤습니다 잘 찾아보시면 색깔 이런 테마 같은걸 바꿀 수 있는 기능이 있어요 시작해보죠

저는 7php라는 파일을 만들었고요 여기에서는 Javascript를 이용해서만 로그인을 구현해 볼 겁니다 여기서 우리가 이 수업을 진행하기 전에 여러분들이 먼저 좀 알아두셔야 할 기능이 있는데 프롬프트라는 기능입니다 프롬프트

P R O M P T 여기에다가 비밀번호라고 이렇게 적어 주고요 우리의 페이지를 열어보면 이런 화면이 뜹니다 그리고 비밀번호를 물어봐요 거기에다가 111111이라고 입력하고 확인을 누르면 됩니다

여기보시면 여기 있는 이 프롬프트라고 하는 이 명령이 방금 보셨던 그 창을 띄운거에요 거기에 비밀번호라고 이렇게 적어 주시면 이 명령어로 인해서 이렇게 생긴 창이 뜨면서 여기에 있는 비밀번호라고 하는 텍스트가 여기에 들어가게 됩니다

그러면 사용자가 여기에다가 비밀번호를 입력할 수 있겠죠? 예를 들면 111111 그리고 확인을 누르면 되는데 사용자가 입력한 정보를 우리가 받기 위한 방법은 여기에다가 패스워드라는 변수를 이렇게 주면 됩니다 한번 해볼게요 이렇게 경고창이 뜨면 어떻게 된 거냐 하면 Javascript 이 부분에서 여기가 먼저 실행이 된 거에요 그래서 비밀번호를 이렇게 물어보는 거죠 그리고 여기에다가 뭔가를 입력하면 입력하고 확인 버튼을 누르면 그러면 여기에 있는 이 부분에 값이 바로 여기에 입력한 값이 됩니다

그러면 자연스럽게 그 값이 패스워드로 들어가서 패스워드의 값은 여기에 입력한 값과 패스워드의 값이 같은 값이 된다는 거죠 그래서 한번 확인해볼까요? 여기서 제가 documentwrite(password);라고 이렇게 하고 실행을 시켜보겠습니다 F5 그리고 1111 확인 버튼을 누르면 보시는 것처럼 사용자가 입력한 정보를 이 Javascript가 알아낼 수 있게 되는 거예요 바로 이런 작업들은 HTML, CSS는 할 수 없는 일입니다

즉 사용자의 생각을 받아내서 어떤 일을 처리하는 것, 그것을 Javascript나 php는 할 수 있지만 HTML이나 CSS는 할 수 없는 일이에요 그러면 그렇게 받은 정보를 가지고 우리 한번 로그인 기능을 구현해보죠 물론 이렇게 로그인을 구현하면 절대 안 됩니다 이거 아주 허접한 방법이에요 그런데 이건 이걸로도 우리 같은 시사점이 많죠

만약 패스워드가 1111과 같다면, 그러면 어떻게 되는 거예요? 정상적인 접근이 되는 거죠? 안녕하세요 주인님 만약에 패스워드가 같지 않다면 뉘신지? 이렇게 그리고 실행을 한번해보죠 비밀번호를 입력하라고 해요, 그러면 요거는 어디까지 온 거냐 하면 여기까지 온 거죠? 그리고 여기에 비밀번호를 입력하면 그거는 패스워드로 들어가게 됩니다

1111이라고 하고 확인을 누르면 여기의 값은 이제 1111이 되면서 얘와 비교를 하면 이거 전체는 true가 되죠? 그러면 자연스럽게 if 안에 있는 이 부분이 실행이 되겠죠 한번 해볼게요 확인 안녕하세요 주인님이 뜹니다

그 다음에 F5를 누르고 1을 하나만 넣어볼게요 그리고 확인 누르면 뉘신지가 뜨는 거죠 이로써 우리에게 있어서 이 웹페이지 전체가 말하자면 확정된 상태가 되요 확정된 상태 우리는 이 웹페이지를 더 이상 수정할 필요가 없어집니다

대신에 사용자가 여기에 어떠한 값을 입력했느냐에 따라서 이 if문에 있는 이 부분의 동작 방법이 달라지게 되는 것이죠 즉, 이 프로그램에서 변할 수 있는 부분을 완전히 프로그램 바깥쪽에 사용자가 조작하는 쪽으로 몰아내서 이제 우리가 일반적으로 얘기하는 제대로 된 프로그램 같은 모양이 나오게 된 것이죠 어때요? 그렇게 멋진 것은 아니지만 어쨌든 무언가 프로그램 같은 걸 만든 것 같지 않으신가요? 예 여기까지 하고요 다음 영상에서는 php를 이용해서 로그인을 하는 방법을 우리 살펴보죠