블록코딩/ㆍ코듈라31 버튼 블록 사용방법 알아보기 - 블록코딩 코듈라 앱인벤터 떤커블 앱을 만들다보면 가장 많이 쓰는 블록이 '이 버튼을 눌렀을 때 -을 실행해줘'는 블록이에요. 이 블록을 간단히 조합해서 아주 간단한 이런 앱을 만들 수 있어요. 남자 버튼을 누르면 남자 그림이 나오고, 여자 버튼을 누르면 여자 그림이 나오는 거죠. 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. 랜덤 블록 사용 방법 배워보기 - 코듈라 앱인벤터 떤커블 랜덤블록은 지정한 범위에서 무작위로 선택한 숫자 하나를 보여주는 기능이에요. 기본적으로 1부터 100사이의 숫자로 지정되어있지만, 범위는 마음대로 조정이 가능해요. 앞 숫자는 범위의 시작, 뒤 숫자는 범위의 끝을 적으면 돼요. 10부터 20까지의 숫자 중에서 하나를 골라달라는 코딩을 할 때는 앞부분 숫자 블록에 10을 적고, 뒷부분 숫자블록에 20을 적으면 돼요. 랜덤 블록은 이러한 기본기능으로 써도 좋지만, 리스트와 결합해서 쓰기에 유용한 블록이에요. 예를 들어 여러 이미지들이 담긴 리스트에서 이미지 하나만 아무거나 선택해서 보여주기, 다양한 문장이 담긴 리스트에서 한 문장을 무작위로 골라 보여주기 등 요긴하게 쓸 수 있어요. 이번 포스팅에서는 가장 기본을 배우고 이런 것들은 나중에 배워봐요. 기본만 .. 2021. 6. 25. 보이는 컴포넌트와 보이지 않는 컴포넌트 - visible component non-visible component 컴포넌트의 종류는 크게 두가지로 나뉜다. 보이는(visible) 컴포넌트 보이지 않는(non-visible) 컴포넌트 처음에는 이 둘이 무슨 차이인지 감이 잘 오지 않지만 이렇게 생각해보면 쉽다. 보이는 컴포넌트는 말그대로 실제 사용자에게 보여지는 것들이다. 예를 들면 버튼, 레이블, 이미지, 리스트뷰 등이 있다. 이 컴포넌트들은 색이나 크기 폰트 등을 우리가 자유롭게 조정하며 사용자에게 어떤 모습으로 보일 지 정할 수 있다. 보이지 않는 컴포넌트는 사용자가 직접 눈으로 볼 수는 없지만 앱의 작업을 수행하는 것들이다. 예를 들면 소리, 시계, 저장소, 네트워크 연결확인, 익스텐션 등이 있다. 이 개념을 식당에 비유하여 생각해보면 쉽다. 식당 손님을 앱 사용자라고 생각해보자. 식당에 들어온 손님이 직접 눈.. 2021. 6. 24. aia / apk / aix 확장자 한 번에 정리해요 블록코딩을 어느 정도 진행하다보면 슬슬 aia, apk, aix와 같은 다양한 확장자들이 눈에 들어오게 될 것이다. 비슷비슷하게 생겨갖고 초보자들을 헷갈리게 만드는 이것들의 정체는 무엇일까? 이번에 간단히 정리해버리자. aia 블록코딩 내용을 그대로 저장한 파일을 의미한다. 이 파일이 있으면 코딩내용을 그대로 불러올 수 있다. 이 파일을 코듈라나 앱인벤터에서 import aia 라는 메뉴를 선택하여 불러와 열면, 코딩내용을 그대로 볼 수 있다. 블록코딩 커뮤니티에서 코드에 대해 이야기 할 때, 화면 캡처로는 한계가 있거나, 코딩내용이 너무 길 경우에는 아예 이 aia 파일을 주고 받으며 이야기하기도 한다. 받아서 코드를 열어보고 어디서 에러가 발생하는지 알려주기도 한다. 가끔 귀찮거나 어려운 코딩일 경우.. 2021. 6. 23. 컴퓨터로 블록코딩 컴페니언 연결하고 싶을 때 - 코듈라 kodular connect to companion with nox 블록코딩작업을 하다보면 중간중간 내 앱이 스마트폰에서 어떤 모습으로 구현되는지 확인해야한다. 방법은 코듈라에서는 3가지가 있다. 1. 컴페니언 연결 2. usb로 연결 3. 빌드해서 확인 코딩이라는 것이 조금씩 수정을 거쳐서 작업물을 완성시켜나가는 것이기 때문에 작업 중간중간 코딩이 잘 되었나 확인을 해봐야한다. 이때 대부분 1번 방법인 컴페니언 연결을 통해서 작업물을 확인한다. 2번 방법인 usb 를 사용하는 경우는 본 적이 없는 것 같다. 나도 시도해보다가 에러가나고 잘 안되서 안쓰고 있다. 3번 방법인 빌드는 대부분의 작업이 완료되었거나, 파일 저장 기능을 넣었을 경우에 제대로 되는지 확인하고자 사용한다. 컴페니언 연결은 스마트폰을 켜서 하는데, 스마트폰으로 큐알코드 스캔찍는 게 가끔 번거로워서 그.. 2021. 6. 21. 버튼 보였다가 안보였다가 안되는 경우 해결 방법 - button visible true false error 이번에 만든 앱에 글 작성기능을 넣었다. 그런데 문제 발생 ! 새 글 작성 시 : 수정버튼 안보이게 기존 글 수정 시 : 수정버튼 보이게 이렇게 코딩을 했는데, 아무리 빌드해봐도 항상 버튼이 그대로 노출되는 것이었다. 몇 번이고 해봐도 그대로여서 검색 고고 button visible error kodular 라고 간단히 구글에 검색을 하면 코듈라 커뮤니티에 언급된 내용들 먼저 볼 수 있어 편하다. 역시 이 문제에 대한 언급도 있었다. 그래서 질문 전에는 검색부터 해봐야 한다. 아무튼 결론을 말하자면, 이유 버튼에 이미지를 적용시 show feedback 버그가 발생하기 때문이라고 한다. 해결방법 show feedback 체크를 해제한다. 문제 해결 ! 2021. 6. 17. 코듈라 리스트 뷰 이미지 앤 텍스트 블록 사용법 - how to use kodular list view image and text 리스트를 보여주는 방법은 두가지가 있다. 1. 일반 텍스트만 리스트로 보여주는 '리스트뷰' 콤포넌트를 이용 2. 작은 이미지와 함께, 타이틀과 내용을 구분할 수 있는 '리스트뷰 이미지 앤드 텍스트'를 이용 이번 시간에는 두번째 방법인 리스트뷰 이미지 앤드 텍스트를 사용하는 방법을 소개해보려고한다. 이름이 길어 복잡해보이지만, 말 그대로 '리스트로 보여주는 이미지와 글자' 라는 뜻이다. 이 블록을 사용하면 아래와 같은 리스트를 만들어낼 수 있다. 이제부터 기본적인 부분에 집중해서 찬찬히 살펴보자. 왼쪽에 작은 이미지들은 image라는 항목으로 설정된 부분이고 날짜부분은 title로 잡히는 부분이며 일기내용은 subtitle로 설정된 부분이다. 1 단 계 - 리 스 트 3 개 준 비 이 콤포넌트를 사용하려면.. 2021. 6. 13. 익스텐션이 뭐죠? 익스텐션이 뭐길래? 처음 앱인벤터로 블록코딩을 배울 때는 기본적으로 제공되는 블록을 익히는 것만으로도 내가 만들고 싶은 앱을 만들 수 있었다. 간단한 기능만 있으면 되는 앱이었기 때문이다. 이때만 해도 사람들이 왜 익스텐션(extension)을 구하고 토론하는지 이해못했다. 하지만 점점 앱을 구상하는 범위가 넓어지면서, 기능이 많은 코듈라에서도 부족함을 느끼고 나 역시 필요한 익스텐션을 찾아 헤매게 되었다. 익스텐션이란 우선 익스텐션(extension)이란 '확장기능'이라고 이해하면 된다. 앱인벤터, 코듈라, 떤커블 등에서 제공하는 기본기능 외에 더 필요한 기능이 있는 경우, 이 익스텐션을 설치하여 사용한다. 익스텐션에는 어떤게 있나? 예를 들어보자. 콤포넌트 배경색을 자기가 원하는 색으로 설정하는 것은.. 2021. 6. 10. 코듈라 빌드 실패 - DX execution failed 최근에 만든 앱에서 이러한 에러가 발생하면서 빌드가 안되는 문제가 있었다. 찾아보니 여러가지 원인이 있는데, 아마 너무 많은 콘텐츠를 넣었거나, 익스텐션에서 문제가 생겼을 수도 있다고 한다. 내 생각으로는 달력 익스텐션에서 문제가 발생하는 것 같았다. 원래 익스텐션 개발자가 제공한 상태에서 조금 변형하여 사용한 터라. 어쨌든 사용하고 있는 익스텐션을 뺄 수는 없어서, 원인이 된 부분으로 보이는 화면의 아이템들을 조금씩 제거해보았다. 이미지와 레이블 사이의 스페이스 콤포넌트들을 빼면서 한 화면에 너무 많은 콘텐츠가 담기지 않게 했다. 이제 빌드가 된다. 아마 이번 앱에 사용한 달력 익스텐션이 감당하기에 너무 많은 콘텐츠를 실행하게 한 게 원인이었던 것 같다. 문제 해결. 2021. 6. 9. 코듈라 빌드 실패 kodular build failed 어제부터 코듈라 빌드실패 에러가 계속해서 발생하고 있다. 종종 이렇게 빌드가 안되는 경우가 있는데, 이 경우는 서버가 다운되어서 그렇다. 코듈라 커뮤니티에도 이미 사람들이 이에 대해 질문을 올려놨는데, 답은 기다리라는 말 뿐이다. 서버 다운이니 당연한 이야기. 하루빨리 서버가 복구되기를 바라며 기다릴 뿐이다. 평소에는 상관없지만 어제는 어제까지 만들어야하는 앱이 있었기에 빌드 실패가 떠서 난감했다. 이전에 미리 빌드해놓은 게 있기는 했지만 말이다. 진짜 중요한 마감기한에 이런 일이 생기면 난감할테니 미리미리 빌드해놓고, 중요한 작업은 마감일에 임박해서 끝내는 일이 없도록 해야겠다는 생각이 들었다. 작업하던 어플들 빨리 마무리하고 싶은데 ㅠ 빨리 서버복구가 완료되기를 ! 2021. 6. 5. 이전 1 2 3 다음
