본문 바로가기

AI교육118

5. 앱인벤터로 동물 소리 앱 만들기(앱인벤터 소리, 스크린추가 기능) 이번 글에서는 앱 인벤터의 이미지, 소리를 이용해서 동물을 설명하는 앱을 만들어보겠습니다. 1. 앱 화면과 기능 구상하기 이번에 만들 앱은 강아지, 고양이에 대해 알아보는 간단한 앱입니다. 강아지 그림이 있고, 설명 듣기를 클릭하면 강아지에 대해 설명하는 목소리와 텍스트가 화면에 나타납니다. 버튼을 클릭하면 동영상이 나오게 할 수도 있죠. 또, 강아지 그림 옆에는 고양이 그림이 있고 설명 듣기를 터치하면 고양이에 대한 설명이 들리고 텍스트가 화면에 나타납니다. 앱의 화면은 아래처럼 만들 예정입니다. 2. 데이터 수집하기 이전에 계산기 만들기와는 다르게 데이터의 수집 단계가 추가되었습니다. 동물 설명 앱에서는 '이미지'와 '소리' 데이터가 필요하기 때문에 무료 이지미와 무료 소리 데이터를 다운받았습니다. .. 2020. 9. 21.
4. 앱인벤터로 계산기 앱(application)만들기! 1. 계산기 앱 화면과 기능 구상하기 이번에 만들 앱은 더하기 빼기 계산기 앱입니다. 앱의 화면은 간단하게만 그려보았습니다. 앱에 필요한 컴포넌트는 아래와 같습니다. 레이블 : 앱 이름 표시 텍스트 상자 : 첫 번째 숫자 텍스트 상자2 : 두 번째 숫자 버튼 2개 : 더하기 버튼, 빼기 버튼 텍스트 상자3: 결과값을 출력 계산기라고 쓰여 있는 것은 '레이블' 이라는 컴포넌트를 드래그 - 앤 - 드롭하여 사용할 것이고 첫 번째 수, 두 번째 수는 '텍스트' 라는 컴포넌트를 가져올 것입니다. 더하기, 빼기는 '버튼' 컴포넌트를 사용하여 버튼을 클릭하면 더하기, 빼기가 되도록 할 것입니다. 마지막 결과 값은 '텍스트 박스' 컴포넌트를 사용합니다. 2. 새로운 프로젝트 만들기 화면 설계가 어느 정도 되었다면 이.. 2020. 9. 17.
3. 앱인벤터로 인사하는 앱 만들기 1. 인사 앱 화면 설계하기 앱 인벤터를 사용해서간단히 인사하는 앱을 제작해보겠습니다. 앱의 기능은 간단합니다. 인사 버튼을 누르면 "여러분, 안녕하세요?" 가 출력되게 하는 매우 간단한 앱이죠. 앱의 화면은 이렇게 간단히만 그려보았습니다. 2. 디자이너 탭에서 앱 화면 만들기 이제 앱 인벤터 디자이너 탭에서 화면을 만들어 보겠습니다. 인사 버튼을 누르면 텍스트창에 "여러분, 안녕하세요?"가 출력되도록 화면을 설계해보겠습니다. 앱인벤터는 사용 방법이 간단합니다. 버튼을 넣고 싶으면 버튼을 드래그 - 앤 - 드롭 방식으로 끌어오면 됩니다. 버튼을 넣으면 이렇게 컴포넌트 창에 버튼이 나타납니다. 버튼을 클릭해서 이름 바꾸기를 누르면 이름을 바꿀 수 있습니다. 저는 버튼의 이름을 '인사'로 바꿔봤습니다. 이제.. 2020. 9. 10.
2. 앱 인벤터 들어가기 1. 앱인벤터 접속 앱 인벤터에 들어가기 위해서는 먼저 인터넷에 접속해야 한다. 이 때 'Chrome', 'Safari', 'Firefox', 'Edge' 을 통해 웹에 접속해야한다. 'Explore'는 지원이 되지 않는다. https://appinventor.mit.edu/ MIT App Inventor An Overview of the App Inventor Sources -- Components Read about how the App Inventor sources are structured in this series of blog posts. This week we discuss the App Inventor components module. More appinventor.mit.edu 2. 앱 .. 2020. 9. 10.
1. 앱 인벤터 알아보기 1. 앱인벤터(App inventor)란? 앱 인벤터는 google과 MIT의 합작품으로 앱을 블록코딩을 통해 만드는 플랫폼이다. App inventor for Android https://appinventor.mit.edu/ MIT App Inventor | Explore MIT App Inventor File Path Updates Starting with Android 10 Android 10 changes how applications can store data. If you use the File component you will want to read this blog entry which discusses how MIT App Inventor is adapting to this change... 2020. 9. 10.
추상화란 무엇일까? 사람이 생각하고 표현하는 방식은 모두 다르다. 그래서 소통을 원활하게 하는 일은 쉽지 않다. 너무 세세한 표현은 집중력을 흐리기도 하고 시간도 오래걸린다. 원활한 소통을 위한 표현 방식 중 하나로 '추상화'가 있다. 추상화(Abstraction) '구체적인 정보는 숨기고 꼭 필요한 핵심만을 표현하는 것' '복잡한 것들을 목적에 맞게 단순화 하는 것' 그래도 아직 추상적이다. 현실 세계에서 살펴보면 책, 영화, 지도도 모두 추상화의 결과물이다. 장황한 스토리를 한 권의 책으로, 한 편의 영화로 축약하여 나타낼 때 '추상화'가 꼭 필요하다. 길거리의 쓰레기, 아스팔트 또는 흙길등의 정보 등 세세한 정보를 제외하고 길을 찾을 수 있게 만든 지도도 '추상화'가 들어간다. 프로그래밍에서도 추상화를 사용한다. 프로.. 2020. 9. 3.
구글 사이트 도구 - 머리글 이미지 변경 이미지 사이즈 구글 사이트 도구로 웹페이지를 만들 때 가장 불편한 점은 '글씨체' 를 못 바꾼다는 점이다. 구글 사이트 도구 웹페이지에서 맨 처음 보여지는 '머리글' 에는 텍스트를 작성할 수 있고, 배경 이미지를 넣을 수 있다. '머리글'에 텍스를 넣으니 기본 서체로만 글이 써진다. 글씨 크기는 '일반 텍스트, 굵은 제목, 제목, 부제목, 작게' 밖에 없다. '머리글' 에 이미지를 넣으려면 이미지 크기를 조절해야 한다. 가로 567 픽셀, 세로 265 픽셀 정도 조정해서 넣어보았다. 이미지에 들어가는 글자는 가운데에 맞게끔 좀 더 작게 적어주어야 한다. 구글 사이트에서 어떻게 나오는지 각각 확인해보자! 1. 핸드폰 화면 2. 태블릿 화면 3. 컴퓨터 화면 2020. 7. 13.
Adobe XD 란 무엇인가? 설치 방법 알아보기 티스토리에 작성하는 첫 글이다! 지난번 들었던 강의에서 UI구성을 할 때 adobe XD를 사용하라는 추천을 받고 Adobe XD를 설치하고 사용해보려고한다! Adobe XD란? Adobe XD란 디자이너가 디자이너를 위해 설계한 UI·UX 디자인 작업 툴이다. ※UI란? user interface의 약자로 간단하게 말해 '사람과 컴퓨터 시스템·프로그램 간 상호작용'이다. 더 간단하게 말해 사용자 환경이라고 할 수 있다. 사람에게 보여지는 화면, 화면 터치 등의 사용자 환경이라고 이해하면 편하다. ※UX란? user experience의 약자로 '사용자 경험'을 의미한다. 사용자가 어떤 시스템·프로그램 등을 느끼고 생각하는 총체적 경험을 말한다. Adobe사에서 'Sketch'라는 디자인 툴을 따라잡기 .. 2020. 7. 7.

티스토리툴바