본문 바로가기

전체 글69

버튼 블록 사용방법 알아보기 - 블록코딩 코듈라 앱인벤터 떤커블 앱을 만들다보면 가장 많이 쓰는 블록이 '이 버튼을 눌렀을 때 -을 실행해줘'는 블록이에요. 이 블록을 간단히 조합해서 아주 간단한 이런 앱을 만들 수 있어요. 남자 버튼을 누르면 남자 그림이 나오고, 여자 버튼을 누르면 여자 그림이 나오는 거죠. 1. 에셋준비 우선 에셋에 man.png와 woman.png 그림을 준비해두었어요. 2. 디자인 버튼 두개와 이미지 콤포넌트 하나를 준비했어요. Button1 , Button2 , Image1 그외의 것들은 디자인측면인 것들이라 안해도 됩니다. 이미지 콤포넌트는 하나만 있어도 되요. 같은 자리에 1을 눌렀을 때는 남자그림이, 2를 눌렀을 때는 남자그림이 사라지고 2가 나타나니까요. 3. 블록코딩 및 해석 Button1은 남자라는 버튼이에요. 누르면 Image1.. 2021. 7. 1.
버튼(Button) 컴포넌트 사용 방법 알아보기 - 코듈라 이번 포스팅에서는 버튼(Button)을 대하여 알아볼게요. 왼쪽 상단에 있어요. 왼쪽 기능 리스트에서 버튼을 끌어다가 핸드폰모양 위에 올려두세요. 우측에 Button1이 생겼죠? 그러면 우리가 버튼을 하나 만든 거에요. Button1에서 1이라는 숫자는 처음으로 만든 버튼이라는 의미입니다. 같은 방법으로 버튼을 또 끌어다놓으면 Button2가 생기고, 또 놓으면 Button3이 됩니다. 우측에서 Button1을 클릭하면 이렇게 다양하게 버튼을 꾸밀 수 있는 화면이 펼쳐집니다. 하나하나 어떤 기능인지 번역해두었어요. 정말 다양한 설정을 할 수 있죠? 크기도 바꾸고 색깔도 바꾸고 다양한 디자인은 여기서 이뤄집니다. 모양은 4가지 종류가 있는데 이런 모습으로 나타납니다. 기본설정(Default)으로 해두면 모.. 2021. 6. 29.
랜덤 블록과 리스트 결합해서 랜덤 이미지 띄우기 지난 포스팅에서 랜덤 블록의 기본 사용법을 설명해드렸는데요. 랜덤 블록과 리스트 블록을 함께 이용해서 다양한 앱을 만들수도 있다는 말씀도 드렸죠. 랜덤블록과 리스트블록의 콜라보. 그럼 이번 포스팅에서 바로 배워볼까요? 이번 포스팅을 읽고 나면 이런 앱을 만들 수 있어요 ! 1. 어셋 준비 일단 저렇게 보여 줄 이미지들이 필요하겠죠? 저는 4개의 이미지를 준비했어요. 아래 네 개의 이미지파일을 다운받아서 Assets에 올려주세요. 4개의 이미지를 모두 업로드하면 어셋준비는 끝 ! 2. 디자이너 화면 이제 화면 디자인을 해볼까요? 컴포넌트를 끌어다 놓습니다. 이미지 하나와 버튼 하나만 있으면 됩니다. 왼쪽 컴포넌트 모음에서 찾아 핸드폰그림 위에다 끌어다 놓으세요. Image 컴포넌트 한 개 Button 컴포.. 2021. 6. 26.
horizontal 과 vertical 헷갈릴 때 외우는 방법 가로 horizontal 세로 vertical 누군가에겐 별것도 아니겠지만 사람마다 진짜 안외워지는 단어들이 있을 것이다. 나에게는 그렇게도 헷갈렸던 단어가 바로 영어의 가로, 세로이다. 앱을 만들다보면 가로, 세로 설정을 하느라 자주 만나게 되는 녀석들이다. 나름 잘 외워놨다고 생각했는데, 실생활에서 갑자기 마주치면 이게 가론가 세론가 헷갈리기를 여러번. 다양한 방법으로 생각해서 외웠으나 머리에 확 들어오지는 않았다. 진짜 다양한 연상법을 써봤으나 실전에서 헷갈리고 마는 나를 발견. 그렇게 생각을 거듭하다가 이렇게 외워버리고는 헷갈린 일이 없다. V를 보고 세로의 시옷을 떠올리면 된다. 이 이미지 하나를 머리에 박아둔 이후로 절대 헷갈린 일이 없다. 첫글자가 대문자이든, 소문자이든 상관없이 잘 연상된다.. 2021. 6. 26.
랜덤 블록 사용 방법 배워보기 - 코듈라 앱인벤터 떤커블 랜덤블록은 지정한 범위에서 무작위로 선택한 숫자 하나를 보여주는 기능이에요. 기본적으로 1부터 100사이의 숫자로 지정되어있지만, 범위는 마음대로 조정이 가능해요. 앞 숫자는 범위의 시작, 뒤 숫자는 범위의 끝을 적으면 돼요. 10부터 20까지의 숫자 중에서 하나를 골라달라는 코딩을 할 때는 앞부분 숫자 블록에 10을 적고, 뒷부분 숫자블록에 20을 적으면 돼요. 랜덤 블록은 이러한 기본기능으로 써도 좋지만, 리스트와 결합해서 쓰기에 유용한 블록이에요. 예를 들어 여러 이미지들이 담긴 리스트에서 이미지 하나만 아무거나 선택해서 보여주기, 다양한 문장이 담긴 리스트에서 한 문장을 무작위로 골라 보여주기 등 요긴하게 쓸 수 있어요. 이번 포스팅에서는 가장 기본을 배우고 이런 것들은 나중에 배워봐요. 기본만 .. 2021. 6. 25.
보이는 컴포넌트와 보이지 않는 컴포넌트 - visible component non-visible component 컴포넌트의 종류는 크게 두가지로 나뉜다. 보이는(visible) 컴포넌트 보이지 않는(non-visible) 컴포넌트 처음에는 이 둘이 무슨 차이인지 감이 잘 오지 않지만 이렇게 생각해보면 쉽다. 보이는 컴포넌트는 말그대로 실제 사용자에게 보여지는 것들이다. 예를 들면 버튼, 레이블, 이미지, 리스트뷰 등이 있다. 이 컴포넌트들은 색이나 크기 폰트 등을 우리가 자유롭게 조정하며 사용자에게 어떤 모습으로 보일 지 정할 수 있다. 보이지 않는 컴포넌트는 사용자가 직접 눈으로 볼 수는 없지만 앱의 작업을 수행하는 것들이다. 예를 들면 소리, 시계, 저장소, 네트워크 연결확인, 익스텐션 등이 있다. 이 개념을 식당에 비유하여 생각해보면 쉽다. 식당 손님을 앱 사용자라고 생각해보자. 식당에 들어온 손님이 직접 눈.. 2021. 6. 24.

티스토리툴바