코드와트 : IT기술개발공유

코딩강의6화 - flutter dart 앱개발 상속, 확장에 대해서 with gpt

코드와트 — Fri, 14 Mar 2025 15:07:45 +0900

https://youtu.be/vnM2J-Bagb0

*아래의 글은 유튜브 코드와트 채널에서 연재되는 강의를 글로 작성한 내용입니다.

*대화형식으로 진행되며, ai chat GPT를 활용한 코딩이 핵심입니다.

*시대에 맞게 코딩.개발의 조력자로써 ai를 잘 활용것이 목표입니다.

안녕하세요. 코드와트입니다.

오늘은 확장에 대해서 알아보겠습니다.

확장(extends), 상속(Inheritance)

현대의 대부분의 언어들은 extends 확장(또는 상속) 이라고 하는 기능을 가지고 있습니다.

확장은 말그대로 기존의 것을 가지고 확대, 확장 한다는 의미가 있습니다.

사전을 살펴 보겠습니다

사전을 찾아보니 우리가 오늘 해야할 일이 무엇인지 명확해 집니다.

우선 실행해보죠.

class A {
	var name = 'A';
	void testFunc(){
		print('클래스 A 테스트 입니다.');
	}
}

class B extends A {
	@override
	var name = 'B';

	@override
	void testFunc(){
		print('클래스 B 테스트 입니다.');
	}

}

main (){
	var b = B();
	b.testFunc();
  
}

A 라는 클래스, B라는 클래스가 있습니다.

B 클래스를 만들때 extends A 라는 키워드가 보입니다. 눈치 채셨겠지만 이게 부분이 바로 오늘 배울 확장(상속) 키워드를 사용하는 부분입니다. extends A 라고 명시하면 A에 있는 변수, 함수등을 B에서 가져다 사용할수 있는것이죠. B를 다시 보니 특이한게 보입니다. 바로 override 라고 하는 키워드 입니다.

override 는 기존의 A라는 클래스에 작성된 name, testFunc 를 가져와서 B에서 새롭게 구현하는것을 말합니다.

이것을 재정의 한다.

라고 말합니다.

즉 A 라는 클래스에 정의된 변수명과 함수명을 가져와서 B에 상황에 맞게 재정의하여 사용한다. 라는 말입니다. 물론 재정의 하지 않고, 그대로 A의 기능을 물려(사용)받을수도 있습니다.

‍♀️ “물려받는다고요?”

우리가 확장이라고 썻지만, 다른 관점에서 상속이라는 말로 표현하기도 합니다. extends 라는 키워드를 통해서 만들어지는 A-B의 관계가 마치 부모(Super)-자식(Sub) 간의 관계가 형성되는것 처럼 보이기 때문입니다.

‍♀️ ”쌤 상속? 확장??? … 부모-자식관계는 또 뭐죠?”

네 이해하기에 어려운 내용이 맞습니다.

이번에도 gpt 를 통해서 자세하게 한번 알아볼께요.

B라는 클래스는 A 클래스를 extends 함으로써 클래스의 재사용성이 올라갑니다. 쉽게 말해서 똑같은 기능을 하는 코드를 여기저기 만들지 말고 extends를 통해 기존의 기능을 사용하거나, 확장하는 형태로 만들어 나갈수 있는것이죠.

이제부터는 좀더 이해를 돕기위해 동물들을 빗대어 작성해볼께요.

개와 고양이는 동물입니다. 그리고 숨쉬기를 하고있죠.

만약 확장의 기능이 없다면 이런식의 중복 되는 기능들이 많아질수 있겠죠.

class Dog{

	void breathe(){
		print('숨쉬기...');
	}
}

class Cat{

	void breathe(){
		print('숨쉬기...');
	}
}

class Animal{
	void breathe(){
		print('숨쉬다...');
	}
}

class Dog extends Animal{
}

class Cat extends Animal{
}

확장의 기능을 사용하면 Dog, Cat 친구들에게 굳이 또 숨쉬는 기능을 만들어줘야 할 필요가 없습니다.

Animal 이라고 하는 부모(super) 로 부터 숨쉬는 기능을 물려받고 사용하기만 되죠.

여기서 Dog와 Cat은 자연스럽게 Animal의 자식(Sub)이 되는거죠.

main(){
	var dog = Dog();
	var cat = Cat();
	dog.breathe();
	cat.breathe();

}

자 여기서 개와 고양이만의 각각 고유한 숨쉬기 방법을 부여해보겠습니다.

여기서 필요한것이 바로 override(재정의) 라는 키워드 입니다.

기존의 부모클래스인 Animal 은 고칠필요가 없구요.

개와 고양이에서 각각의 숨쉬기 방법을 정의해 보겠습니다.

class Dog extends Animal{
	@override
	void breathe(){
		print('개의 숨소리');
	}
}

class Cat extends Animal{
	@override
	void breathe(){
		print('고양이의 숨소리');
	}
}

제 마음대로 정의한 숨쉬기 방법이니, 이부분은 심각하게 생각하지 말아주세요. 그게 중요한게 아닙니다.

전체 코드를 보고 실행해 보겠습니다.

class Animal{
	void breathe(){
		print('숨쉬다...');
	}
}

class Dog extends Animal{
	@override
	void breathe(){
		print('개의 숨소리');
	}
}

class Cat extends Animal{
	@override
	void breathe(){
		print('고양이의 숨소리');
	}
}

main(){
	var dog = Dog();
	var cat = Cat();
	dog.breathe();
	cat.breathe();
}

어떤가요? 개와 고양이만에 숨쉬는 방법이 만들어졌습니다.

몇가지 더 만들어보겠습니다. 새를 만들어 볼께요.

class Bird extends Animal{
	@override
	void breathe(){
		print('새의 숨소리');
	}
}

새를 만들었으니 main 함수에도 추가해줍니다.

main(){
	var dog = Dog();
	var cat = Cat();
	var bird = Bird();
	dog.breathe();
	cat.breathe();
	bird.breathe();
}

‍♂️ ”오… 그러면 동물들이 많아질수록 모든 코드를 다 작성하고 실행해야 되나요?”

맞습니다. 동물들이 많아질수록 당연히 코드작성이 많아지게 됩니다.

이번에는 좀 더 유연하게 대처해보겠습니다. 함수를 하나 만들어 보겠습니다.

이 함수는 매개변수(Parameter)로 Animal 타입(부모)을 전달받고 (숫자와 문자만 전달할수 있는게 아닙니다.)

animal 클래스에 작성된 breathe를 사용하는 간단한 함수입니다.

AnimalBreathe 라는 임의의 클래스를 만들고

그안에 Dog, Cat의 부모인 Animal 타입을 매개변수로 받는 breathe 함수를 만들어줬습니다.

class AnimalBreathe(){
	void breathe(Animal animal){  
		animal.breathe();
	}
}

AnimalBreathe 라고 하는 모든 동물의 숨쉬기 실행자를 생성하고 Dog 를 생성했습니다. 그리고 나서 dog 를 breathe를 호출할때 같이 전달해주었습니다.

main(){
	var animalBreathe = AnimalBreathe();
	var dog = Dog();
	
	animalBreathe.breathe(dog);  
}

전체코드입니다.

class Animal{
	void breathe(){
		print('숨쉬다...');
	}
}

class Dog extends Animal{
	@override
	void breathe(){
		print('개의 숨소리');
	}
}

class Cat extends Animal{
	@override
	void breathe(){
		print('고양이의 숨소리');
	}
}

class AnimalBreathe{
	void breathe(Animal animal){
		animal.breathe();
	}
}

main(){
	var animalBreathe = AnimalBreathe();
	var dog = Dog();
	var cat = Cat();
	
	animalBreathe.breathe(dog);
	animalBreathe.breathe(cat);
}

이렇게 함으로써 breathe 라는 숨쉬는 기능을 각각의 동물별로 구분하여 직접 실행해줄 필요없이 어떤동물을 만들던 그저 animalBreathe (위임) 의 함수에 전달하는것 만으로 각 동물들의 고유한 숨소리가 작동하게 되었습니다.

단순한 구문이지만 사실 여기에는 상속, 다형성, 업캐스팅 등 많은 지식들이 복합적으로 결합된 결과물 입니다.

아쉽지만 이부분은 뒤에서 좀더 자세하게 살펴보겠습니다.

헤이젠 hey-gen 을 이용한 나만의 ai 아바타 캐릭터 만들기

코드와트 — Wed, 12 Mar 2025 15:07:29 +0900

소개

ai탐험대 시리즈 입니다.

오늘은 컨텐츠 제작할때 활용도가 높은 아바타 생성 플랫폼을 사용해보도록 하겠습니다.

1. d-id 무료사용기

2. heygen 유료사용기

해당 컨텐츠는 유튜브를 통해서도 볼수있습니다.

https://youtu.be/qc2TCRtul9I

d-id

https://studio.d-id.com

우선 플랫폼에 접속해주시구요.

아바타 메뉴로 이동합니다.
상단에 보시면 이렇게 두가지 방식으로 개인의 아바타를 만들수 있는데요. 우선은 기본적으로 제공되는 아바타를 이용해볼께요.

스크롤 해보시면 하단에 많은 인물을 고를수 있습니다.

주근깨가 매력적인 엠마로 선택할께요.

아바타 비디오를 선택합니다.

그럴듯한 편집창이 나왔습니다.

간단한 표정정도 선택해볼수 있구요. 이곳에서 텍스트나 도형등을 이용하여 강의 영상, ppt 영상등 간단한 편집도 할수 있습니다.

간단한 동작도 셋팅이 가능합니다. 음성도 바꿀수 있구요.

마음에 드는 음성을 선택하세요.
그리고 나서 하단에 play 버튼을 눌러보세요.

아이고 경고창이 뜨네요. 우리가 너무 성급했습니다.

왼쪽 메뉴바에 보시면 스크립트가 있구요. 해당 메뉴로 이동하겠습니다.

스크립트를 작성하고 play 해보니 문제가 있습니다.
한글로 스크립트를 작성하면 한국어를 할줄 아는 목소리를 적용해야 합니다.

다시 한국말을 잘하는 음성을 셋팅해보겠습니다.

country 를 korea 로 바꿔줍니다. 무료버전에서는 되는게 몇개 없습니다.

맨 아래로 내려서 선택해주세요.

굉장히 구수한 이름이네요. 저는 순복씨를 선택하겠습니다.

이제 플레이버튼을 다시 누르면 이제서야 가입하라고 나옵니다.

가입하고 로그인하겠습니다. (가입 로그인 절차는 생략하겠습니다)

다시 화면으로 돌아와서 플레이 해보겠습니다. 약간 어색하긴 하지만 뭐 일단 넘어가겠습니다.

하단에 스피드 조절바를 이용해서 적당히 음성 속도조절도 해주시구요.

마음에 든다면 이제 실제로 영상을 만들어볼께요.

날 눌러요.

적당한 이름을 주고 넘어갈께요.
만드는데 1 크래딧이 소모 되는가 봅니다.

처음 가입하면 테스트 해볼만큼의 적당한 크래딧이 들어있으니 걱정마세요.

잘 만들어지고 있습니다. 잠시 기다려 주시면…

조금 어색함은 있지만 이정도면 훌륭합니다.

무료버전에서는 워터마크가 심하게 들어가 있습니다...

도저히 쓸수 없게 해놨네요........

저희가 작성한 스크립트대로 말하고 있습니다.

마음에 든다면 다운로드 하고 활용하면 됩니다. d-id 의 경우 적당히 맛보기 수준의 테스트만 해봤습니다.

heygen

이번에는 헤이젠으로 넘어가서 실제로 자세한 사용방법을 설명해보겠습니다.

최근 제가 잘 사용하고 있는 heygen 입니다.

https://app.heygen.com/home

헤이젠을 이용해서 작업해볼께요. d-id 와 다르게 일종의 명령어를 이용해 디테일한 아바타 생성을 할수 있습니다.

가입과 로그인은 따로 설명하지 않겠습니다.

hey-gen은 아바타 만들기, 음성 합성등의 강점을 가지고 있습니다. 실제 한번 해보죠.

처음 가입하면 일부 크래딧을 제공합니다. 이 크레딧을 소비하여 아바타 작업을 하는 것이죠.

몇번 하다보면 금방 소비되니 신중하게 해봅시다. (이메일을 돌려가면서 몇번 더 테스트 해볼수 있습니다)

아바타로 이동해보겠습니다. 아바타는 말그대로 우리의 모습을 투영한 대상을 말하는것이죠.

hey-gen 안에서 몇가지 방법이 있습니다.

ai 커맨드를 통한 대상 만들기
내 자신의 아바타 만들기
플랫폼에 제공되는 아바타 사용하기

ai 커맨드를 통한 대상 만들기

우선 첫번째 방법 입니다. 최근에 제가 코딩강의 영상에 많이 사용하는 방법이구요.

설명은 뒤에서 하기로 하고 일단 실행해 보겠습니다.

아바타로 이동해보겠습니다. 아바타는 말그대로 우리의 모습을 투영한 대상을 말하는것이죠.

hey-gen 안에서 몇가지 방법이 있습니다.

ai 커맨드를 통한 대상 만들기
내 자신의 아바타 만들기
플랫폼에 제공되는 아바타 사용하기

ai 커맨드를 통한 대상 만들기

우선 첫번째 방법 입니다. 최근에 제가 코딩강의 영상에 많이 사용하는 방법이구요.

설명은 뒤에서 하기로 하고 일단 실행해 보겠습니다.

해당 버튼을 눌러 진입합니다.

우선 우리가 해볼것은 Generate 입니다. 해당 기능은 커맨드 입력을 통해 ai를 만들어내는 메뉴입니다.

어떤 아바타를 만들어낼지 머릿속으로 상상해보세요. 그리고 내용을 입력하면 됩니다.

저는 아시아계의 미녀스타일 아바타로 만들어보겠습니다.

아무래도 영문으로 작성하는것이 좋을듯 합니다.

영작이 익숙치 않을경우 gpt 의 도움을 받도록 하겠습니다.

조금 길게 작성되어있지만… 자 이대로 한번 생성해보겠습니다.

현실감있는 아바타 생성을 위해서 스타일은 리얼리스틱으로 선택합니다. 잠시 기다리면 아바타 프리뷰를 볼수 있습니다.

한국의 대학생스러운 여성분이 나타났습니다. 첫번째 사진은 얼굴 비율이 커보입니다. 가끔씩 대두 스타일의 아바타가 튀어나와 놀랄때가 있습니다. 테스트를 위해 몇번더 generate again 해보겠습니다.

원하는 바가 있다면 좀더 세부적인 설명이 필요합니다.

붉은 계열의 스웨터로 변경해 보겠습니다.

녹색 신발도 신겨보겠습니다.

신이 인간을 창조 해낼때 이런느낌이었을까요? (뭔소리야 ;;;;) 잠시 물한잔 마시고 오면 끝나 있습니다.

진짜 동네 옆집 사는 대학생? 인것 처럼 익숙한 외모와 풍경을 만들어줍니다. 첫번째 두번째 사진은 좀 어색한것 같습니다. 그리고 분명히 풀샷으로 옵션을 줘도, 항상 upper body 형태를 제공해주네요. 일단 계속 실행해보겠습니다.

거의 동일한 유형의 사진을 만들고 있습니다.

보통은 이미지를 만들기 위해 랜덤한 값을 부여하는데

몇번 하다보니 hey-gen의 경우는 같은 얼굴유형을 유지하는걸 볼수 있었습니다.

저같이 특정 캐릭터를 만들고 외모나, 배경만 바꿔서 지속적으로 사용해야 할때 좋다고 느끼는 부분입니다.

마지막으로 한번더 해보겠습니다.

이번에는 이색적인 코스프레로 가보겠습니다. 겨울을 좋아하는 관계로…

HeyGen 아바타 생성 프롬프트 (영어)
“Create a realistic digital avatar of a young Korean woman in her early 20s with a bright and cheerful smile. She has flawless, fair skin, large expressive eyes, and a delicate facial structure resembling a K-pop idol. Her long, wavy dark brown hair flows gracefully, and she is wearing light, natural makeup with a soft pink lip color.
She is dressed in a festive Santa-inspired outfit: a red velvet dress with white fur trim, a matching Santa hat, and cozy winter gloves. Her pose is playful and full of holiday spirit.
The background features a snowy ski resort with ski slopes, chair lifts, and people enjoying winter activities. There is a decorated Christmas sled and a friendly reindeer standing beside her, adding to the festive atmosphere. The scene is filled with soft snowfall, and the lighting is bright and crisp, reflecting the winter wonderland vibe.”

HeyGen 아바타 생성 프롬프트 (한글 번역)
“밝고 활기찬 미소를 가진 20대 초반의 한국인 여성 아바타를 생성하세요. 그녀는 맑고 깨끗한 피부, 크고 또렷한 눈, 그리고 K-pop 아이돌처럼 세련된 얼굴형을 가지고 있습니다. 길고 웨이브진 짙은 갈색 머리가 자연스럽게 흩날리며, 은은한 핑크 립컬러와 자연스러운 메이크업을 하고 있습니다.
그녀는 크리스마스 분위기의 산타 코스튬을 입고 있습니다. 빨간 벨벳 드레스에 흰색 퍼 트리밍이 달려 있고, 산타 모자를 쓴 채 겨울용 장갑을 착용하여 따뜻한 분위기를 연출합니다. 그녀의 포즈는 장난스럽고 즐거운 크리스마스 분위기를 담고 있습니다.
배경은 눈 덮인 스키장으로, 스키 슬로프와 리프트가 보이며 겨울 스포츠를 즐기는 사람들이 있습니다. 그녀의 옆에는 크리스마스 장식이 된 썰매와 귀여운 루돌프 사슴이 함께하며, 전체적인 장면에 축제 분위기를 더합니다. 부드러운 눈이 내리는 겨울 원더랜드 분위기를 연출하며, 조명은 밝고 깨끗한 겨울 느낌을 강조합니다.”

일단 대충 아무거나 선택해주고… 보이스는 나중에 추가 하겠습니다.

만들어진 아바타를 선택하고 add motion으로 동작을 추가해주겠습니다.

이번에는 간단한 명령이니 한글로 작성해볼께요

잠시뒤에 모션이 추가된 아바타가 만들어집니다.

어쩔때는 굉장히 어색한 모션이 나오는데 이번에는 잘 나온것 같습니다.

모션을 좀 더 줘볼까요?

좀더 어려운 미션을 줬습니다. 미션이 어려웠는지 아무 동작도 추가가 안되었습니다.
여기서는 간단한 모션만 추가가 가능했습니다.

이번에는 hey-gen 의 강점중 하나라고 생각되는 부분입니다.

우리가 만든 아바타를 기준으로 여러가지 상황별로 의상, 배경을 만들어 낼수 있습니다.

당연히 얼굴은 그대로 입니다. 아바타를 생성하는데 얼굴이 바뀌면 아무 의미가 없게되죠.

이 부분은 유료 결제후에 사용할수 있습니다.

Generate looks via prompts by training a custom ai model.

실행해보겠습니다. 5분정도 시간이 소요됩니다.

이곳에서 다양한 룩을 만들어 낼수 있습니다.

프롬프트를 통해서 디테일한 뷰를 만들수도 있고 정해진 템플릿(세트) 으로 만들어 낼수도 있죠.

프롬프트를 통해서는 작업을 해봤으니 이번에는 편하게 만들어 보겠습니다.

look packs 라는 탭이 보이는데 이부분으로 진입해보겠습니다.

다양한 룩을 자동으로 생산해줍니다. 마음에 드는 룩으로 고른뒤 작업을 진행해볼께요.

우리 아바타가 산타 마을에서 휴가를 즐겼으니 …

사람이 맨날 놀고먹고만 하면 재미가 없습니다.

회사에 가서 일을 시켜보겠습니다.

단점은 20looks 을 자동으로 생성한다는것이죠.

크래딧을 잘 확인하면서 작업해야 겠습니다.

만들어질 동안에 잠시 멤버쉽을 확인해보겠습니다.

저는 Creator 멤버쉽으로 결제했구요. 아바타 몇개를 정하고 다양한 룩을 만들면서 한달 넉넉하게 쓸수 있었습니다.

지금 달러가 많이 비싸진 관계로… 업무상 쓰는게 아니라면 부담되는 가격이긴 합니다.

대박입니다. 정말 편리하게 다양한 룩을 제작해줍니다. 한번 더 해보겠습니다.

제가 크레딧이 많이 남아서 그런게 아니라 다양한 예제를 제공해드리기 위해….

우리 카페가서도 일 많이 하잖아요? 이번에는 카페에서 일을 시켜보겠습니다.

근데 보면 볼수록….

아바타가 아이라인을 너무 두껍게 그린게 아닌가 하는 생각이……(되돌릴수 없….)

성능은 대박입니다. 상당히 만족스러운 결과물을 주는것 같습니다.

주의할점이 있는데 바로 손가락 입니다. ai 가 특히나 과절이나, 손가락을 잘 못그려줍니다.

자세히 확인해보는게 좋겠습니다.

열심히 일했으니 체력관리 해야죠. 제가 못하는 갓생을 한번 살게 해줘보겠습니다.

바벨이 쇠골에 연결된?????? 무서운 사진이 생성됩니다.

이번에는 바벨을 휘어버리는 파워걸......

다 잘하는건 아닙니다. 가끔은 이런 엉터리 이미지도 생성해 냅니다만…. 적당히 걸러야 합니다.

대부분의 경우는 어색함이 있긴 하지만 나름대로 이미지를 잘 뽑아줍니다.

덤벨을 비닐도 안뜯고 쓰는 헤이걸 입니다....ㅋㅋㅋ

무게를 올려야 겠습니다. (점진적과부하적용)

????????????

미친 스트랭스 입니다....

저 바벨은 무슨 용도인지???????

엉터리 사진이 출력되고 있습니다.

계속 작업하면 한계가 느껴집니다.
사용해보시면 아시겠지만 ai가 손을 구현하는데 굉장히 어려워 합니다.
가끔 손가락이 4개이거나 혹은 없거나 ㄷ ㄷ ㄷ ㄷ ㄷ;;; 방향이 바뀌었거나…. ㄷㄷㄷㄷㄷㄷㄷ 등등

요정도 선에서 라이트하게 쓸땐 좋습니다.

홈트장면을 사용해서 아바타 영상을 만들어볼께요.

전체 화면 구조입니다. 여기서 아바타를 활용한 영상을 제작할수 있습니다. 간단한 발표자료나, 강의영상도 만들수 있구요. 일단 해보죠.

필요한 내용을 작성합니다.

아래는 그 영상에 따른 스크립트(대본)을 작성하면 되구요.

플레이 버튼으로 음성을 들어보면서 테스트 해보세요.

다양한 음성을 지원하고 있으니 테스트 해보시고 마음에 드는게 없다면 내 음성을 합성할수도 있습니다.

스크립트를 어떻게 구성하는지에 따라서 음성에 높낮이 속도 감정 등이 달라집니다.

여러번 테스트해보면서 세부적인 음성을 조절 하면 되겠습니다.

마지막으로 영상을 출력해볼께요.

조금 기다려 볼께요.

결론

이렇게해서 hey-gen 을 이용한 몇가지 방법으로 ai 아바타를 생성해보았는데요.

다양한 룩을 생성해주고, 간단한 설명만으로 아바타를 생성해주고, 내사진, 내얼굴로 아바타를 만들수도 있습니다.

다만 디테일한 퀄리티가 아쉽습니다.

주의
* 아바타 생성시 주의할점은 연예인 혹은 다른 누군가의 사진을 도용하여 아바타를 생성하면 안됩니다.
* 해외 배우 가수 등의 경우 아바타 생성시 필터링에 걸리는 경우가 있습니다.
*** 악용되는 경우를 방지 하기 위한 조치로 보여집니다.

코딩강의 5화 - flutter dart 앱개발 리스트와 맵 with gpt

코드와트 — Wed, 12 Mar 2025 11:40:14 +0900

https://youtu.be/To4Aj_2MdYY

*아래의 글은 유튜브 코드와트 채널에서 연재되는 강의를 글로 작성한 내용입니다.

*대화형식으로 진행되며, ai chat GPT를 활용한 코딩이 핵심입니다.

*시대에 맞게 코딩.개발의 조력자로써 ai를 잘 활용것이 목표입니다.

안녕하세요. 코드와트 입니다.

이번에는 리스트와 맵에 대해서 배워보겠습니다.

코딩 개발하면서 리스트와 맵은 가장 많이 사용하기 때문에 꼭 알아두셔야 합니다.

리스트

리스트는 말그대로 목록형태로 데이터를 표시하기 위한 저장형태를 의미합니다.

자료형(Data Type)이란?

데이터 저장을 위한 구조나 형태를 말합니다. 사실은 우리가 앞에서 쓰고 있던 int, double, String 또한 자료형의 한 종류였습니다.
마찬가지로 리스트 또한 목록 형태의 데이터 저장을 위한 타입이구나. 생각하시면 됩니다.

목록이란 뭔가요?

목록을 만들기 위해서는 일정한 순서를 가지는 데이터가 필요합니다.

도서관에서 대여한 책 목록
어제 과일가게에서 구매한 과일목록
지난번 중간고사 성적목록
이번달 카드결재 목록

등등 수없이 많은 데이터를 목록으로 만들수 있습니다. 어렵지 않죠?

이와 같은 열거된 나열된 형식의 데이터들을 코드 에서는 리스트(List) 라고 부릅니다.

리스트는 말그대로 목록 형태의 정보(데이터)를 담기위해 존재합니다. 긴말할것 없이 만들어보죠.

현실세계의 책장을 리스트로 만들어볼께요.

var bookshelf = ['삼국지', '해리포터', '영웅문', '반지의제왕'];

제가 좋아하는 무협, 판타지 서적이 가득찬 책장이 완성되었습니다. 이 책장에는 순서가 있습니다.

왼쪽에서부터 0번 부터 시작해서 3번까지 번호가 매겨져 있죠. 보이지 않지만 이와 같은 번호를 인덱스 라고 부릅니다.

코드에서 인덱스는 기본적으로 0부터 시작한다고 생각하면 됩니다. 그럼 이 책장에서 책을 꺼내볼까요?

var book = bookshelf[0];
print(book); //삼국지

‍♀️ "리스트가 목록이고… 목록형태의 데이터를 활용하기 위해 쓴다? 그리고 꺼낼때는 인덱스를 활용한다??? 너무 헷갈려요."

헷갈리는게 당연합니다. gpt를 통해서 자세하게 알아볼께요.

우리가 만든 리스트에 데이터를 추가 하거나, 빼거나 할때는 어떻게 해야할까요?

리스트에는 편리한 함수들이 기본적으로 만들어져 있어요.

때문에 추가하기, 삭제하기, 정렬하기 등의 편리한 함수를 그냥 쓰기만 하면 되지요.

자 이제 실제로 코딩해볼께요.

var bookshelf = ['삼국지', '해리포터', '영웅문', '반지의제왕'];
var book = bookshelf[0];
print(book); //삼국지

아까 만든 코드에서 값을 추가 하고 (책) 삭제하는 예제를 만들어볼께요.

var bookshelf = ['삼국지', '해리포터', '영웅문', '반지의제왕'];
var book = bookshelf[0];
print(book); //삼국지

bookshelf.add('호빗');
print(bookshelf); //"삼국지", "해리포터", "영웅문", "반지의제왕"

bookshelf.remove('삼국지');
print(bookshelf); //"해리포터", "영웅문", "반지의제왕"

어떤가요? 우리가 배운 함수 사용법 기억나시죠?

변수에 . 을 찍고 함수 사용

리스트를 생성(실체를 만들고)하고 bookshelf 라는 변수에 담았습니다.

담는 순간 bookshelf 변수의 타입은 리스트라는 타입으로 정해진 거에요.

그래서 리스트 형태의 변수인 bookshelf 를 통해서 . 을 찍고 add, remove 와 같은 함수를 사용할 수 있는것이죠.

하나 더 해볼께요. 이번에는 지난번 반복문 배울때 잠깐 배웠던 for in과 for each 라는 반복문을 사용해볼께요.

목록의 내용을 간단하게 순회 할때 사용하면 편리합니다.

var bookshelf = ['삼국지', '해리포터', '영웅문', '반지의제왕'];
for(var book in bookshelf){
	print(book);
}

for문 작성보다 정말 간단하게 반복문을 작성할수가 있습니다.

반복하면서 var book 이라는 변수에 책을 하나씩 담고 그걸 출력하는 예제에요. 하나더 해봅시다.

var bookshelf = ['삼국지', '해리포터', '영웅문', '반지의제왕'];
bookshelf.forEach((book){
	print(book);	
});

이번에는 forEach 라고 하는 함수를 사용했는데요.

구문이 조금 특이합니다만 우선 이렇게 사용할수도 있구나 하고 알아둡시다.

뒤에서 더 자세히 알아볼께요.

맵(딕셔너리)

우리는 일상에서 모르는 단어가 나오면 뜻을 찾아보기 위해 검색을 하고 사전을 찾아봅니다.

코딩이라는 단어를 찾아볼까요?

코딩이라는 키워드로 → 뜻이라는 데이터를 찾았습니다. 하나더 해보겠습니다.

Develop 이라는 단어(키워드)로 성장하다, 개발하다 등의 데이터를 찾아냈습니다.

이러한 방식은 코딩에서 키(key)와 값(value)이라는 개념으로 연결되어있습니다.

coding이라는 키 값과 value 라는 데이터(우리가 찾는 정보) 를 연결해주는것이죠.

이와 같은 방식의 데이터 저장형식을 맵이라고 불러요. Map은 지도의 의미 보다는 Mapping 즉 값과 값의 연결의 의미로 알고있으면 되요. 또는 다른 언어에서는 딕셔너리, 사전 그 자체의 의미로 불리웁니다.

‍♂️ "잘 모르겠는데요… 키 밸류? …. 맵이요?"

설명만으로는 이해가 어려운게 당연하구요.

gpt 조교를 통해 자세하게 알아볼께요.

일단 실행해봅시다. 책에 대한 정보가 담긴 사전을 만들어본다고 생각할께요.

책이름을 키워드로 넣으면 그 책에 대한 정보를 가져올수 있도록 하는거죠.

var bookInfo = {
'해리포터':'해리포터는...', 
'반지의제왕':'반지의제왕은...', 
'호빗':'호빗은...', 
'삼국지': '삼국지는...',
}

print(bookInfo['해리포터']);

이와 같이 책정보가 담긴 맵이라는 데이터구조에서 내가 원하는 키워드 즉 해리포터라는 키워드로 그 책에 해당하는 정보를 가져왔습니다.

{ 중괄호 열고 닫고 } 로 만들면 되고 그안에 데이터는 key : value 라는 쌍으로 이루어져 있습니다.

바로 이부분이죠.

'해리포터':'해리포터는...'

‍♀️ "쌤 ‘ ’ 은 우리 문자를 사용할때 썼던거 같은데 이것도 문자인가요?"

나이스! 아주 좋은 질문입니다. 문자 형태가 맞아요. ‘해리포터’ 라는 키워드도 문자이고 ‘내용’ 또한 문자가 맞아요.

그럼 숫자로도 할수 있나요? 맞아요. 숫자또한 키와 밸류로 사용할수 있습니다.

책이름의 키워드로 해당 책이 몇권 팔렸는지 확인 해볼께요.

main(){
  var bookSell = {
    '해리포터': 10,
    '반지의제왕' : 20,
    '삼국지' : 30
  };
  
  print(bookSell['삼국지']);

  var totalSum = bookSell['삼국지']! + bookSell['반지의제왕']! + bookSell['해리포터']!;
  print(totalSum);
  
}

이와 같이 숫자로 값을 표현할수 있고 숫자데이터를 합계를 내서 출력해봤습니다.

이번에는 키를 숫자로 할수 있을까요?

var bookInfoMap = {
    101: '해리포터',
    102: '반지의제왕',
    103: '삼국지'
  };
print(bookInfoMap[101]);
print(bookInfoMap[102]);
print(bookInfoMap[103]);

이와 같이 책 넘버가 있고 그 넘버로 책을 찾고 싶다고 했을때 이런식으로 대입하면 되죠.

데이터를 추가하거나 삭제하는것도 쉽습니다.

var bookInfoMap = {
    101: '해리포터',
    102: '반지의제왕',
    103: '삼국지'
  };

bookInfoMap[104] = '호빗'
print(bookInfoMap);

bookInfoMap이라는 변수명으로 [ 괄호 열고 새로운 키값 괄호닫고 ] = ‘호빗’이라는 새로운 밸류 즉 데이터를 대입해주면 됩니다. 어렵지 않죠? 101 의 데이터를 변경하고 싶다면? 그것도 쉽습니다. 그냥 새로운 데이터를 대입하면 되죠.

bookInfoMap[101] = '영웅문'

삭제도 쉽습니다.

삭제하는 함수인 remove 를 사용해서 지우고 싶은 키값을 넣어주기만 하면 끝이죠.

user.remove(101);

마무리

어떤가요? 생각보다 쉽게 리스트와 맵에 대해서 배워보았는데요. 코딩하면서 필수적으로 쓰이는 자료형이니 꼭 익혀두시는게 좋겠습니다.

코딩강의4 - flutter dart 클래스와 함수 그리고 생성자 with gpt

코드와트 — Fri, 7 Mar 2025 10:45:14 +0900

https://youtu.be/xJ47tK1t5Hg

*아래의 글은 유튜브 코드와트 채널에서 연재되는 강의를 글로 작성한 내용입니다.

*대화형식으로 진행되며, ai chat GPT를 활용한 코딩이 핵심입니다.

*시대에 맞게 코딩.개발의 조력자로써 ai를 잘 활용것이 목표입니다.

소개

안녕하세요. 코드와트 입니다.

지난 시간에는 제어문중에서 조건문과 반복문에 대해서 알아보았습니다.

2025.03.02 - [개발 코딩 정보 공유/코드와트 코딩강의] - 코딩강의3 - dart / flutter 기초 제어문 조건문과 반복문

if 조건문을 통해서 필요한 조건에 만족할때만 실행하는 구문을 작성해봤구요.
조건이 많을때는 else if 와 else 도 사용하는 방법을 배웠습니다.

for 문이라고 하는 반복문을 통해서 효율적으로 코드를 작성하는 예제도 구현해보았습니다.

오늘 내용은 이해하기 어려울수도 있지만, 집중해서 하나하나 천천히 같이 배워볼께요.

클래스

현대의 대부분의 언어들은 클래스라는 개념을 포함하고 있습니다.

이상한 단어가 등장해서 당황하셨을거라 생각이 드네요. 우선 class의 뜻을 한번 살펴보겠습니다.

우리가 알고있는 학급, 수업이라는 뜻 보다는 코딩에서의 클래스는

종류, 부류와 같이 비슷한 특성을 지닌 대상을 묶는 역할이라고 생각해볼께요.

‍♀️ "쌤… 도대체 무슨 말인지 모르겠어요. 클래스?? 종류?? ...왓?"

언제나 그랫듯이 일단 class 를 만들고 실행해볼께요.

class Student {
	var name = '홍길동';
	var age = '16';	
	var englishScore = '90';
	
}

이게 클래스 입니다. class 라는 키워드로 시작해서 Student 라는 이름을 만들어 주고 중괄호 { 열고 } 닫고 하면 끝.

그리고 나머지는 우리가 알고있던 변수 선언하는 방법이에요.

학생이라는 큰 틀안에 이 학생의 이름과 나이, 성적등의 데이터를 작성할수 있었습니다.

하나더 해볼까요.

class Car {
	var name = '김과자의자동차';
	var oil = 'gasoline';
	var speed = '200km';
  	var brand  = '포르쉐';
 	var type = '슈퍼카';
}

네 포르쉐. 상상속 자동차죠?

이처럼 Car 라는 class 를 만들어 관련 데이터를 정의 해줄수 있었습니다.

이렇게 함으로써 car에 대한 정보를 묶어서 그룹화하여 관리할수 있게 되었습니다.

그럼 이제 이클래스가 왜 필요하고 언제 어떻게 쓰는지 살펴볼께요.

class Student {
	var name = '홍길동';
	var age = '16';	
	var englishScore = '90';
	
}

class Car {
	var name = '김과자의자동차';
	var oil = 'gasoline';
	var speed = '200km';
  	var brand  = '포르쉐';
  	var type = '슈퍼카';
}

void main(){
	var student = Student();
	var car = Car();
	print(student.name);
	print(car.name);
}

우선 아까 만든 student class와 car class 를 작성해야 합니다.

main 함수에 보시면 var student 는 우리가 알고 있는 변수 선언입니다.

여기에 정수나 문자를 대입했던 기억이 있죠? 하지만 이번에는 이상한 걸 대입하고 있네요.

위에서 작성한 Student 라는 클래스 명을 작성하고 ( 괄호 열고 )괄호 닫는 이상한 코드가 보입니다.

이 코드가 바로 클래스(Class)를 객체화(Object) 시키는 코드인데요.

사실 우리가 열심히 작성한 클래스 라는것은 하나의 틀에 불과합니다.

‍♂️ "왓??????"

‍♀️ "쌤… 머리가 빙빙 도는데요? 설계도면인 클래스와 그걸가지고 만드는 실체가 객체라는건가요?"

맞습니다. GPT 조교한테 설명을 부탁해보죠.

class 그 자체로는 그냥 껍데기일 뿐이죠. 아무런일도 할수없어요.

물건을 만들기 위한 설계도면 이라고 생각하시면 되겠습니다.

설계도면으로 대상을 실체화 하기 위해서 바로 위에서 작성한 Student(); 라는 코드가 필요한거에요.

이해를 돕기위해 붕어빵과 붕어빵틀을 비유해보겠습니다.

붕어빵이 만들어지기 위해서는 붕어빵틀이 필요합니다.

붕어빵이 실체 = 객체(object) 이고

붕어빵틀 = class 입니다.

class 만으로는 아무일도 일어나지 않습니다. class로 실체를 만들어야 사용할수가 있는것이죠.

붕어빵을 만들어내는 코드가 바로 Student(); 라는 코드 입니다.

이 코드는 특수한 함수로써 생성자라고 불리웁니다.

함수

함수는 특정한 기능을 수행할때 작성하는 구문입니다.

사실 우리가 계속 써왔지만 인지하지 못했던 main이라고 하는 함수가 있었는데요.

void main(){
	print('메인함수');
}

바로 이코드 입니다. 우리는 이미 함수를 사용하고 있었어요.

main 함수는 특수한 함수로써 모든 프로그램의 진입점으로 쓰이는 함수 입니다.

쉽게 말해 시작(Run) 하면 우선적으로 main으로 진입한다고 생각하시면 되요.

‍♂️ "아 그래서 저희가 실행버튼을 누르면 main 안에 작성한 코드가 실행되는거였군요."

그럼 main함수 말고 우리도 함수를 만들수 있지 않을까요?

맞아요. 함수를 한번 만들어 볼께요.

void study(){
	print(name + '가 공부를 시작합니다.');
}

이와 같이 작성합니다.

앞에 있는 void 라는 키워드는 아무것도 리턴하지 않는다는 표시이고, 생략도 가능합니다.

함수는 매개변수 또는 파라미터 라고 하는 값을 전달 받고, 특정 값을 리턴할수 있는 특수한 친구 입니다.

즉 들어오는 input 이 있고 나가는 output이 확실한 친구이죠. 한번 해볼까요?

class Student {
	var name = '홍길동';
	var age = '16';	
	var englishScore = '90';
  
  
  //1번
  void study(){
    print(name + '가 공부를 합니다.');
  }
  
  //2번
  String returnScore(){
    return englishScore;
  }
  
  //3번
  int intOutScore(int addScore){
    return addScore + englishScore;
  }
	
}

하나씩 살펴볼께요

우선 이부분은 쉽습니다. void는 리턴이 없다는 뜻이고, study 라는 이름의 함수이며, print문을 실행한다는 뜻입니다.

void study(){
	print(name + '가 공부를 합니다.');
}

두번째는 리턴값이 있어요. void 가 아니라 우리가 앞에서 배웟던 문자형 타입 = String 이 들어가 있습니다.

점수 계산을 마치고 (특정기능) 영어 점수를 반환 하는 예제입니다.

//2번
String returnScore(){ //실행할걸 다 하고 String 형태의 리턴을 하겠다는 말이다.
  	print('점수계산중...');
	return englishScore;
}

이번에는 한발더 나아가서 파라미터 매개변수 를 전달받는 예제입니다.

//3번
int intOutScore(int result){
	return result;
}

맨앞에 int 라고 된걸 보니, 아까와 다르게 정수 형태의 반환값을 전달한다는 말이죠.

intOutScore라는 이름을 사용했고, 괄호 안에 int result 이부분이 바로 매개변수 입니다.

즉 이 함수를 사용할때 같이 전달해줘야하는 값이죠.

사용할때는 아래와 같이 사용합니다.

void main(){
	var student = Student();
	var score = student.inOutScore(80);
	print(score);
	
}

이 부분을 하나씩 살펴보시죠.

메인함수에서 Student 의 실체 = 붕어빵을 만들고
student 변수를 사용해서 . 을 찍고 inOutScore 라고 작성한뒤 괄호 열고 그안에 아까 우리가 작성한 파라미터로 전달할 값을 주면 됩니다. 위에서 int 타입이라고 했으니 int를 전달해야 겠죠?
var score 변수를 선언한 이유는 student.inOutScore(80); 가 int를 리턴하기 때문입니다.
print 문을 통해 리턴받은 값을 출력합니다.

‍♀️ “Student(); 는 우리가 class를 만들면서 정의하지 않았는데…어디서 나온거죠?”

생성자

생성자 함수는 특수한 용도입니다. 우리가 만들지 않아도 기본적으로 가지고 있으며, 사용할수 있습니다. 이 특수한 함수의 용도는 우리가 해당 클래스를 말그대로 생성할 시점에 사용하면 됩니다.

우리가 클래스를 만들때 이렇게 만들었죠? Student 라는 클래스 명을 작성했었죠.

class Student {
	var name = '홍길동';
	var age = '16';	
	var englishScore = '90';
  
  }

var student = Student();

생성자는 해당하는 클래스명을 따라갑니다. 그래서 Student()와 같이 생성자를 사용하는것이죠. 다양하게 생성자를 만드는 방법이 있지만 우선은 기본형의 생성자에 익숙해지도록 합시다.

실습

클래스, 함수, 생성자 등에 대해서 배웠으니 이제 자유롭게 내 아이디어를 구현하는 단계입니다.

단순하게 아까 했던예제를 통해서 확장해볼께요.

class MyCar {
	var name = '김과자의자동차';
	var oil = 'gasoline';
	var speed = '200km';
  	var brand  = '포르쉐';
  	var type = '슈퍼카';
  
  void drive(){
	  print('자동차가 달립니다.');
  }
  
  void stop(){
	  print('자동차가 정지합니다.');
  }
  
  void turnOnLight(){
	  print('라이트를 조작합니다.');
  }
}

void main(){
	var	myCar =	MyCar();
	myCar.drive();
	myCar.stop();
	myCar.turnOnLight();
}

어떤가요? 나만의 훌륭한 자동차를 만들었습니다.

단순한 문자를 출력하는 예제이지만 클래스, 함수, 변수선언과 같은 필수적인 구문이 모두 들어가 있습니다.

이 예제를 참고해서 자신만의 아이디어를 실제로 구현해보세요. 물론 아직은 콘솔창에 출력하는것이 전부이지만요.

코딩강의3 - flutter dart 앱개발 기초 제어문 조건문과 반복문 with gpt

코드와트 — Sun, 2 Mar 2025 18:18:34 +0900

https://youtu.be/RAO9WOqfIWQ?si=-rD8drbgYk3WYljE

*아래의 글은 유튜브 코드와트 채널에서 연재되는 강의를 글로 작성한 내용입니다.

*대화형식으로 진행되며, ai chat GPT를 활용한 코딩이 핵심입니다.

*시대에 맞게 코딩.개발의 조력자로써 ai를 잘 활용것이 목표입니다.

소개

안녕하세요. 지난시간에 이어서 오늘은 개발하는데 있어서 필수적인 제어문이죠?

조건문과 반복문을 배워볼께요.

조건문

우선 조건문이에요. 우리 영어를 배울때 if 가 무슨뜻인지는 다들 알고 있잖아요?

영어문장을 만들듯이 코딩할때에도 if 를 쓰는데요.

어디에 쓰는지 한번 알아볼께요. 우리가 해왔던것 처럼 아래의 코드를 그냥 무작정 실행해볼께요.

var name = '김과자';
if(name == '김과자'){
	print('안녕하세요' + name + '입니다.');
}

정확히는 모르지만 console 창에 실행이 잘 됐죠?

이와 같이 if 를 통해 작성된 블록을 if문 이라고 부르고,

이와 같이 특정 조건에 의해서 실행을 제어하는 구문을 조건문 이라고 불러요.

‍♀️"if… 제어문 …조건문…. 왔….?? 너무 어려워요."

아마도 생소한 단어들 때문에 어려움을 느끼겠지만 저런 구문을 만나면 이렇게 해석해보세요.

if(name == '김과자')

if([조건]){
	[실행코드]
}

if 를 "만약에… 이랬다면" 이라고 말하면서 따라가 볼께요.

1. 만약에 name 라는 변수에 들어있는 값이 ‘김과자’ 라는 문자라면 그렇다면 (조건이 성립하면)

2. { 로 시작하는 블록안에 진입하게 되요.

3. 그리고 그 안에 있는 코드가 실행되죠.

4. 우리는 간단하게 print 를 통해서 name 이 출력하는 예제를 작성했어요.

5. 그리고 나서 반드시 } 다시 닫아주셔야 되요. 항상 문단속을 잘 해야합니다. 열었으면 닫자!

‍♂️ "아 그럼 만약에 여러가지 조건이 많다면 어떻게 하면 되나요?"

if 와 함께 쓸수 있는 else와 else if 를 통해서 상황에 맞는 명확한 제어 블록을 만들수 있어요.

if문 말고도 switch case 라고 하는 문법이 있는데요.

이건 더 뒤에서 배워볼께요. 우선은 if 문만으로 충분합니다.

gpt 통해서 더 자세히 알아볼께요.

switch case 문은 참고만 해두도록 하세요. 우선은 if문을 중심으로 예제를 실행할거에요.

자 그럼 배운 내용을 바탕으로 코드를 작성 해볼까요?

var name = '김과자';
if(name == '김과자'){

}else if(name == '홍과자'){

}else if(name == '이과자'){

}else if(name == '박과자'){

} //else if는 계속 붙혀도 괜찮다.

추가 적인 조건이 많다면 else if 를 통해서 세부적인 조건문을 작성하면 됩니다. 원하는대로 계속 추가해주세요.

var name = '김과자';
if(name == '김과자'){

}else if(name == '홍과자'){

}else if(name == '이과자'){

}else if(name == '박과자'){

}else{ //그 외에 모든것들 처리하고 싶다면...
	
}

그 이외에 너무 많아서 일일이 작성하기 힘들다면 else 구문을 통해서 처리하면 되니까.

상황에 맞게 잘 응용하는것이 중요합니다.

또한 복잡한 조건을 만들어야 한다면 아래와 같이 중첩 되는 형태의 블록을 만들수도 있어요.

var name = '김과자';
var age = 20;
if(name == '김과자'){
    if(age == 20){ //if 블록안에 또 다른 if블록을 작성할수 있다. 

    }else if(age == 30){ //else if 도 당연히 가능!

    }
}

하지만 과도하게 블록을 중첩시키면 나중에 코드를 읽을때 분석하기가 굉장히 어려워진다는 점! 기억해야 합니다.

일명 조건문 지옥에 빠질수 있습니다.

if([조건]){
	if([조건]){
		if([조건]){
			if([조건]){
				if([조건]){
		
				}else if([조건]){
				
				}
			}else if([조건]){
			
			}
		}else if([조건]){
		
		}
	}
}

보기만 해도 눈이 아프죠? 이런 스타일의 코드 작성은 지양하는것이 좋습니다.

반복문

이번에는 for 라는 구문을 이용해서 반복문이라고 하는 블록을 만들어 볼께요.

반복문은 말 그대로 무언가를 반복해서 원하는 동작을 작성하는 문법이에요. 한번 해볼까요?

우선 가장 기본적인 형태의 for문이에요. 일단 실행해볼께요.

for(var i=0; i < 10 ;i++){
   print(i);
}

어때요? 잘 모르겠지만 console 창에 순서대로 무언가 출력되고 있죠?

이번에는 for을 쓰지 않고 console 창에 똑같이 표시하려면 어떻게 할까요?

print(0);
print(1);
print(2);
print(3);
print(4);
print(5);
print(6);
print(7);
print(8);
print(9);

이런식으로 코딩하겠죠? 이런 방식의 코딩은 굉장히 비효율 적이겠죠?

이렇게 반복을 통한 동작을 코드로 작성해야 할때는 for문 을 쓰면 됩니다.

‍♂️ "쌤 그냥 for문… 어려운데 안쓰고 반복되는 코드를 다 작성하면 되지 않을까요?"

반복되는 횟수가 적을때는 그렇게 해도 되지만,

만약 100번 1000번 반복해야한다면 어떻게 해야 할까요?

그렇기 때문에 for문을 통해 효율적으로 코드를 작성하는게 좋겠죠?

gpt를 통해서 좀더 자세하게 알아볼께요.

자 그럼 같이 해볼까요? 우선 0부터 10까지 숫자를 print 해보는 예제입니다.

for(var i=0; i < 10 ;i++){
   print(i);
}

하나하나 살펴볼께요.

1. var i=0 은 말그대로 i라는 변수에 0이라는 정수를 정의해줬어요.

2. i < 10 이건 무슨뜻일까? 바로 반복이 행해지기 위한 조건이에요. 즉 i변수에 담긴 값이 10보다 작을때만 반복을 진행할께. 라는 뜻이죠.

3. i++ 은 반복문이 한번 실행될때 마다 +1씩 증가된다는 뜻이죠.

4. 조건이 성립할때만 {} 안에 있는 print(i)가 실행되게 되어있어요.

조금 응용을 해볼께요. 그럼 숫자를 역순으로 출력할수도 있지 않을까요?

for(var i=10; i > 0 ;i--){
   print(i);
}

이런식으로 역순으로 출력도 가능해요.

조금만 응용한다면 다양한 형태로 반복문을 작성할수 있어요.

if와 마찬가지로 for문도 당연히 중첩이 가능해요.

for(var a=0; a < 10 ;a++){
   print(a);
   for(var b=0; b < 10 ;b++){
		   print(b);
		   ...
		   
		}
}

마찬가지로 과도한 반복문의 중첩은 코드를 읽을때 가독성이 굉장히 떨어지기 때문에 주의가 필요해요~!

좀더 다른 방식의 for문을 작성할수도 있어요.

var fruits = ['사과','딸기','포도'];
for(var f in fruits){
  print(f);
}

var fruits = ['사과','딸기','포도'];
fruits.forEach((f){
 print(f);
});

이와 같이 for in 과 foreach를 쓸수도 있어.

fruits 라는 과일 목록이 있고 이 안에 있는 것들을 순차적으로 반복해서 출력해주는 예제이죠.

우선 이런 방법도 있구나 하고 넘어가도록해요.

뒤에서 리스트 라는 자료형을 배울때 다시 알아보도록 하겠습니다.

실습

마지막으로 오늘 배운 내용을 사용해보고 넘어가도록 해요.

실습을 해보겠습니다. if 문과 for문을 사용해서 숫자를 출력해보는 거에요.

김00, 이00, 박00 라는 사람이 있고 이사람들을 각각 이름을 반복 출력하는 예제입니다.

두가지 예제를 준비했는데요.

1번예제

void main() {
  var name = '김과자'; 
  for(var i=0; i <= 10; i++){
     if(name == '김과자'){
       print(name);
     }else if(name == '이과자'){
       print(name);
     }else{ //그 이외의 전부
       print(name);
     }
   }
}

2번예제

void main() {
	var name = '김과자';
  if(name == '김과자'){
     for(var i=0; i <= 10; i++){
	     print(name);
     }
   }else if(name == '이과자'){
     for(var i=0; i <= 10; i++){
	     print(name);
     }
   }else{ //그 이외의 전부
     for(var i=0; i <= 10; i++){
	     print(name);
     }
   }
}

똑같은 출력결과가 나오지만 코드의 효율적인 부분을 따져보면 차이가 있습니다.

1번예제의 장점은 작성시점에 굉장히 깔끔하다는 것입니다.

for 문과 if문을 한번만 작성하면되죠.

하지만 실제 실행시에는 for문의 반복횟수에 따라 if조건문의 조건 검사도 비례해서 반복된다는 것이에요.

10번 반복 한다면, 10번 조건을 검사한다는 뜻이되죠.

100번 1000번 반복한다면??? 2번예제는 보기에는 비효율적으로 보이지만,

막상 실행해보면 if 조건문을 처음 한번만 거치고

그에 따른 반복문도 한번만 거치게 되어서 효율적이라 볼수 있어요.

‍♂️ "이런 예제들 처럼 … 문법을 자유자재로 다루려면 시간이 많이 걸리겠네요…"

시간을 내서 몇번만 연습해도 금방 익숙해질겁니다. 걱정마세요.

이렇게 해서 오늘은 조건문과 반복문에 대해서 알아봤습니다.

아주 기본중에 기본이고 자주 사용되는 코드이니까 확실히 익혀두는게 좋겠습니다.

코딩 강의2 - flutter dart 앱개발 숫자와 문자 그리고 타입 with ai(gpt)

코드와트 — Wed, 26 Feb 2025 14:28:31 +0900

*아래의 글은 유튜브 코드와트 채널에서 연재되는 강의를 글로 작성한 내용입니다.

*대화형식으로 진행되며, ai chat GPT를 활용한 코딩이 핵심입니다.

*시대에 맞게 코딩.개발의 조력자로써 ai를 잘 활용것이 목표입니다.

https://youtu.be/gLYu_CCW1oM

소개

안녕하세요.

지난 시간에 여러가지 언어를 실행해 보는 시간을 가졌습니다.

현대의 언어들은 생각보다 비슷한 구조와 문법을 가지고 있기 때문에 생각보다 복잡하거나 어렵지않았을거에요.

자 이제부터 우리는 이중에서 한가지를 선택해서 공부해 볼텐데요.

어떤 언어를 먼저 배우게 될까요? 바로 dart 라는 언어 입니다

‍♀️ "왜 수많은 언어중에서 dart 언어를 먼저 배우는 건가요?"

dart를 배우는 이유는 바로 우리가 이어서 배울 앱개발을 쉽게 하기 위해서에요.

우리가 매일같이 사용하는 스마트폰은 android나, ios 라는 두가지 방식의 환경이 만들어져 있어요.

우리는 dart 언어를 통해서 android나 ios 에서 실행할수 있는 앱을 한번에 만들수 있어요.

‍♂️"그럼 dart 라는언어가 제일 좋은건가 보군요!"

아쉽게도 제일 좋은 언어라는건 없어요.

상황에 맞게 환경에 맞게 각각의 언어들을 잘 활용하는것이 중요해요.

자 오늘은 지난시간에 이어서 무작정 실행하기 2번째 시간입니다.

오늘은 숫자와 문자에 대해서 배워볼께요.

지난 시간에 변수에 대해서 배워봤죠?

변수는 말그대로 변할수 있는 값이나 정보를 담는 일종의 상자라고 배웠습니다.

이 상자안에는 이것도 넣고 저것도 넣고 원하는걸 집어 넣을수 있는데요.

지난시간에는 ‘문자’ 이와같이 따옴표를 통해 문자열을 만들어준거 기억하시죠?

'홍길동' 이런식으로 문자를 만들어서 상자에 담아줬습니다.

그럼 숫자는 어떻게 하면 될까요? 너무 쉽습니다.

숫자는 그냥 상자에 담아주시면 됩니다.

var name = '홍길동';
var num = 123;

‍♀️ "왜 문자는 따옴표를 붙이고 숫자는 그냥 넣어요?"

좋은 질문이에요. 이건 그냥 정해진 규칙이라고 생각하시면 되요.

앞으로도 왜 이렇게 하지? 라는 생각이 들때에는 우리가 개발할때 지켜야 할 규칙이다. 라고 생각하면 되겠어요.

숫자를 좀 더 세분화 해볼까요?

숫자는 1,2,3,4… 같은수를 나타내는 정수,

3.14, 1.5 같은수를 나타내는 소수가 있어요.

이걸 dart에서는 int와 double 이라는 타입으로 나뉠수 있어요.

‍♂️ "타입이 뭔가요?… int, double … 온통 어려운 말뿐이네요."

어려운 말이 나왔죠? 타입은 인간, 기계, 동물, 식물 처럼 구분하기위한 하나의 기준이라고 생각하면 되요.

우선 타입에 대해서 자세하게 알아보도록 해요.

gpt 활용

생각해보자구, 이 상자안에는 한가지 종류의 물건만 넣어야 안전하게 꺼내쓸수있도록 만들어져있어요.

예를 들어 우리가 name 이라는 라벨이 붙은 상자를 꺼냈는데 막상 꺼내고 보니 그 안에 숫자가 들어있다면?

굉장히 당황스럽겠지? 마찬가지로 프로그램에서는 이런상황에서 오류를 만날수 있어요.

하지만 걱정할 필요없지.

현대의 개발도구들은 똑똑하기 때문에 오류상황을 대부분 사전에 막아 주기 때문이죠.

그런데 이번에는 왜 var이 아닌 int, String 같은 이상한 문자를 쓰는건가요?

좋은질문입니다! 지난 시간에는 특수한 상자인 var 이라는 키워드를 통해 이름을 넣어두고 사용했어요. 기억나시죠?

var 은 특수한 상자로써 문자를 넣으면 문자타입으로 정해지고, 숫자를 넣으면 숫자타입으로 정해지는 똑똑한 상자에요. 그래서 특별한 경우가 아니면 우리는 var을 사용해서 변수를 선언할 예정이에요.(편의를 위해)

실습

자 그럼 이론적인걸 배웠으니 실습을 해볼께요. 실습은 마찬가지로 웹상의 playground 우리의 놀이터에서 해볼거구요.

https://dartpad.dev

DartPad

dartpad.dev

까만 화면이 열려서 당황했을거에요. 여기가 앞으로 놀게될 우리의 코딩놀이터 입니다.

우선 지난번 내용을 복습을 해볼께요.

이름을 변수에 넣고 콘솔창에 출력해보세요.

잠시 시간을 드릴께요.

복습

void main() {
  var name = '김과자';
  print(name);
}

*위 코드와 같이 작성하면 됩니다.

오늘은 이 코드에 숫자까지 사용해보겠습니다.

자 var name = ‘김과자’; 밑에 코드를 작성해볼께요.

눈치 채셨겠지만 코드 한줄이 끝나면 항상 ;(세미콜론)으로 마무리를 해주셔야 해요. 규칙입니다.

void main() {
  var name = '김과자';
  var number = 100;
  print(name);
}

숫자 100을 변수상자에 담았습니다. 이 상자는 이제부터 int 라는 타입으로 정해진상태가 됩니다.(보이진 않지만)

그럼 숫자도 한번 출력해볼께요.

void main() {
  var name = '김과자';
  var number = 100;
  print(name);
  print(number);
}

고맙게도 print 가 문자든 숫자든 잘 출력해주고 있습니다.

이왕 숫자를 사용했으니 사칙연산을 해보도록 할께요.

void main() {
  var name = '김과자';
  var number = 100;
  var plusNumber = 100 + 100;
  var minusNumber = 100 - 50;
  var muxNumber = 100 * 3;
  var divNumber = 100 / 10;
  
  print(name);
  print(number);
  print(plusNumber);
  print(minusNumber);
  print(muxNumber);
  print(divNumber);
}

사칙연산에 사용되는 기호를 잘 익혀두세요.

코드를 작성하면서 항상 줄을 잘 맞추고 깔끔한 코드가 작성되도록 노력해야 합니다.

어떤가요? 콘솔에 잘 출력이 되고 있죠?

그러고보니 int 타입의 정수만 출력해줬네요? 그럼 소수는 어떻게 만들고 어떻게 출력하면 될까요?

나아가서 오늘 배운 int타입, double 타입을 활용해볼까요?

void main() {
  var name = '김과자';
  var number = 100;
  var plusNumber = 100 + 100;
  var minusNumber = 100 - 50;
  var muxNumber = 100 * 3;
  var divNumber = 100 / 10;
  
  //변수 선언할때 int타입, double타입을 사용
  int iNumber = 123;
  double dNumber = 3.14;
  String sName = '김구릉';
  
  print(name);
  print(number);
  print(plusNumber);
  print(minusNumber);
  print(muxNumber);
  print(divNumber);
  
  print(iNumber);
  print(dNumber);
  print(sName);
  
}

어떤가요? 생각보다 쉽게 코드로 작성할수 있죠?

코딩 강의1 - 앱개발 (flutter, dart, android, ios) 일단 실행해 봅시다.

코드와트 — Tue, 25 Feb 2025 11:48:46 +0900

*아래의 글은 유튜브 코드와트 채널에서 연재되는 강의를 글로 작성한 내용입니다.

*대화형식으로 진행되며, ai chat GPT를 활용한 코딩이 핵심입니다.

*시대에 맞게 코딩.개발의 조력자로써 ai를 잘 활용것이 목표입니다.

https://youtu.be/kD9Q6sgoaLU

소개

안녕하세요.

코드와트에 잘오셨습니다.

앞으로 여러분은 코딩을 배우고 나아가서 앱개발까지 해볼예정이에요.

요즘 주변에 코딩 / 개발에 대해서 관심을 가지는 경우가 많더라구요.

그리고 어딜가든 이런광고가 눈에 띄기도 하구요.

또 25년 부터는 코딩이 교과목으로 편성 된다는 이야기도 있죠?

그만큼 코딩의 중요성이 강조되는 시대인것 같아요.

바로 코딩을 통해 사회에서도,

우리 일상에서도 논리적으로 사고하는법,

그에 따른 합리적인 결과 도출을 할수있도록 돕는것 이것이 궁극적인 목표라는 생각이 듭니다.

그래서 되도록 어릴때 배울수록 좋겠죠? 또 나아가서는 개발자로 취업 기회를 얻을 수 있구요.

코딩을 배우고 업무 자동화를 통해서 업무력도 올릴수도 있구요.

그럼 여러분들은 이런생각을 하고 있을거에요.
"나도 과연 할수있을까?” 라는 고민을 하고 계실텐데요.
우선은 제가 추천드리는 방식으로 한번 그냥 따라해 보는겁니다.

고민은 시간만 늦출뿐이죠. 뭐든 그렇듯이 일단 시작해 보는겁니다.

오늘은 첫번째 시간으로 복잡한 설명은 일단 접어두도록 하구요. (차차설명)

일단 무작정 따라서 코딩하고 무언가 결과를 만들어내는게 목표입니다.

또한 우리는 시대에 맞게 GPT 등의 ai 기술을 최대치로 활용할 예정입니다.

여담이지만 gpt같은 ai를 사용하는것은 박사급의 조수를 부리는것과 동일하다고 합니다.

저희 강의에서는 기본적인 문법을 배워볼예정이구요.

복잡한 연산, 필요없는 수식은 사용하지 않을거에요.

최대한 코딩에 흥미를 가질수 있도록 하는게 목표입니다.

외울필요도 없습니다. 그냥 복사 / 붙혀넣기 하셔도 되구요.

편하게 그렇게 시작해보는 겁니다.

자 그럼 시작해보겠습니다.

우선은 저희가 배울 언어에 대해서 간단하게 소개해볼께요.

앱개발을 위한 대표언어들

자바 (가장 많이 쓰이는 대표 프로그래밍 언어)
kotlin (안드로이드 앱 개발에 쓰이는 언어)
swift (ios 앱개발에 쓰이는 언어)
dart (flutter 앱개발에 쓰이는 언어)

우리의 목표는 기초 문법 공부를 통해 프로그래밍방식을 이해하고, 나아가서 앱개발까지 해볼 예정이에요

요새 스마트폰 없는 사람 찾기가 더 힘들겠죠?

이 강의를 통해 앱개발을 하고 흥미느끼도록 돕는게 목표입니다.

“아니 왜 이렇게 많은 언어를 배움?” 하고 느끼실수 있겠지만

특정 언어를 배우고 나면 다른 언어를 배우기가 많이 쉽습니다.

쉽게 말해서 절반 이상은 먹고 들어간다고 생각하시면 됩니다.

그래서 절대 부담 가지실 필요가 없구요. 따라하다보면 저절로 익혀질거에요.

처음에 어떤언어를 선택하셔도 상관없습니다.

우선은 가장 기본적으로 많이 쓰이는 자바언어로 시작해볼께요.

우선 이사이트에 접속 하세요.

여러분은 로컬 pc에(여러분의 컴퓨터) 아무것도 설치할 필요가 없어요.

연습은 이런식으로 접속 해서 바로 연습해볼 겁니다.

그럼 왜 로컬 환경이 아니라 웹 환경을 사용하는가?

진행

우리는 처음부터 복잡한 개발 환경을 설정하지 않고,

웹 브라우저에서 바로 코드를 실행할 수 있도록 온라인 자바 실행기를 사용할 것입니다.

과장되게 말하면 환경셋팅하다가 하루가 지날수도 있구요.

이것저것 오류를 해결하다보면 이미 거기서 여러분은 “에이 안해~” 라는 말이 절로 나오게 될겁니다.

자바사이트

자바언어를 학습하기 위한 웹 환경의 놀이터라고 생각해주시면 됩니다.

https://dev.java/playground/

당황스러운창이 열리는데요. 일단 냅다 RUN을 눌러볼게요.

뭔지모르겠지만 결과가 출력되었네요? 그쵸?

헬로우 Duke? 누구죠? 우리 이름으로 바꿔볼께요.

각자 자기 이름으로 바꿔서 입력해주세요.

(코딩이나 개발을 배우면서 꿀팁을 드리자면 꼭 하라는대로 해야한다는것이에요

최대한 오타를 내면 안되요. 문법에 매우 민감하기 때문에 . 하나만 잘못찍어도 에러가 발생해요.)

저는 이렇게 바꾸었구요. 실행해 보겠습니다. 어떻게 하냐구요? 다시 Run 을 눌러주시면 됩니다.

어때요? 신기하죠? 제 이름이 출력되었어요.

이렇게 출력된 공간을 Console(콘솔) 창 이라고 불러요.

우리도 이름이 있듯이 이친구들도 다 이름이 있습니다.

그리고 우리가 이름을 변경할때 봤던 이부분있죠?

처음 보는 이 문자들이 굉장히 당황스러우실거라 생각이 드는데요. 하나씩 해석해볼께요.

우리 박사조교 gpt를 사용해서 궁금증을 해결해볼께요.

gpt에게 물어볼때에는 최대한 자세하게 앞뒤 정황 상세한 설명으로 물어보셔야 합니다.

자세하게 예제까지 추가해서 설명해줍니다.

var은 variable 의 약자로 즉 변수를 의미 합니다.

그럼 변수는 뭐죠? 뜻을 살펴볼께요.

일종의 상자가 있다고 생각하고 이 상자 안에는 장남감도 넣을수 있고,

옷도 넣을수 있고, 책도 넣을수 있는 공간이라고 생각하면 되요.

처음 할때 어려운 점은 실체가 없기 때문에 어려워요.

최대한 상상력을 발휘 하셔야 합니다.

그리고 하나만더 살펴볼께요. 이 요상한 문장은 또 뭘까요?

이부분을 보고 추측하셨을거라 생각이 드는데요. 맞아요. 해당 코드는 Console 창에 출력하기 코드가 맞아요!

이쯤되면 다른 문장을 출력하고 싶어지잖아요? 그쵸? 해볼께요. 다른건 건들지 마시구요 주의!

정확히 이부분만 수정해주겠습니다. 지우고 제 닉네임을 써넣었구요. 실행해주겠습니다.

어때요 예상대로 제가 입력한 문장이 출력된걸 볼수 있죠?

이제 응용을 해볼께요. “안녕하세요. 000 입니다.” 에서 000을 우리 아까 만들어둔 상자를 활용해볼께요.

바로 위에서 만든 name 변수를 사용하는것인데요.

완성된문장은 바로 이겁니다. 여기서 이상한게 또 있는데요. 쌍따옴표라던가, + 기호라던가? 이상한게 있죠?

gpt 조교에게 물어보겠습니다.

쌍따옴표는 텍스트문자를 표현할때 쓰는 기호입니다. 문장을 시작할때 “로 시작하고 “로 끝내주면 되요.

그럼 + 는 뭘까요?

말그대로 + 의 의미를 생각하시면 되요. 플러스는 더하기죠? 따라서 문자들을 하나로 합쳐준다 라고 생각하면 됩니다. 이제 왜 “ 쌍따옴표와 + 기호를 사용했는지 알겠죠?

이번에는 dart 언어를 실행해볼께요. 인터넷상에서 dartpad 사이트에 접속해주세요.

https://dartpad.dev/

DartPad

dartpad.dev

창이 열리면 당황하지 마시고, 마찬가지로 run을 눌러주세요.

무언가 실행이 될것이고 그 결과를 지켜보면 됩니다.

콘솔창에 출력이 잘되고 있죠.

조금 수정해볼께요. 이 부분들을 지워주시고 지울때는 세심하게~

그리고 우리가 원하는 형태로 작성해줄께요. 아까하고 패턴이 거의 동일합니다.

변수도 만들어주시고 이름도 넣어주세요.

print 를 통해서 출력을 하는것도 똑같습니다.

void main() {
  var name = '김과자';
  print('안녕하세요. 김과자 입니다.');
}

하나 더 해볼까요? 이번에는 kotlin 이라고 하는 언어로 이동 해볼게요.

https://play.kotlinlang.org/

Kotlin Playground: Edit, Run, Share Kotlin Code Online

play.kotlinlang.org

kotlin 은 안드로이드 개발에 주로 쓰이고 있죠. 마찬가지로 run을 눌러 실행하고 결과를 지켜보세요.

그리고 나서 동일한 패턴으로 수정해주시고,

다시한번 실행해볼게요.

fun main() {
    var name = "김과자";
    println("Hello, world!!!" + name)
}

어떤가요?

거의 동일한 문법으로 작성할수 있죠?

오늘 여러가지 언어를 사용해서 간단한 코딩을 해봤는데요.

제가 말씀드린대로 정말 쉽게 실행할수 있었을거에요.

백그라운드 개발 후기(WorkManager, 포그라운드서비스)

코드와트 — Thu, 8 Feb 2024 10:59:22 +0900

안녕하세요. 블루스웨터소프트 입니다.

프로젝트를 진행하며 겪은 이야기와 기술적인 이야기를 작성하고 있습니다.

클라이언트단에서 사용할 특정 sdk를 개발하는 중에 급하게 연락이 왔습니다.

"기존의 기능들을 백그라운드에서 동작하게 할수 있을까요?"

"네. 되긴 됩니다만..."

AOS, IOS 백그라운드 제한에 대해 말이 길어지게 되었고 관련 내용을 정리하여 보내주기로 합니다

Google, Apple은 업데이트를 거듭할수록 백그라운드 동작에 대해 매우 엄격한 제제를 가하고 있습니다.

그도 그럴것이 유저의 보안, 기기의 퍼포먼스적인 측면에서 백그라운드 동작은 매우 불리하기 때문입니다.

특정앱이 나도 모르게 무한정 실행되고 있다고 생각해보시면 어떻게 될까요? 배터리는 배터리대로, 보이지도 않기에 무슨 앱이 어떻게 동작하고 있는지 뭘 수집하는건지 알기도 어렵습니다. 여타 여러가지 이유들로 인해 대세는 백그라운드 제한인 것 입니다.

초기에는 백그라운드 동작에 대해서 굉장히 관대했습니다. 특히나 안드로이드에서는 service 에 모든 처리를 위임한 백그라운드 앱들이 난무하였습니다. 안드로이드 8.0 OREO 버전을 시작으로 굉장히 엄격해진것으로 기억합니다. 런타임 퍼미션 같은 새로운 권한 관리가 생겼고, 백그라운드 실행을 위해 Foreground service 등이 필수로 등장했습니다.

오래전에 해당 관련 글을 자세하게 썼던 기억이있습니다.

포그라운드 서비스의 구현

간단하게 기존의 foreground service 구현을 확인해보겠습니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" ...>
    <service
        android:name=".MyMediaPlaybackService"
        android:foregroundServiceType="mediaPlayback"
        android:exported="false">
    </service>
</manifest>

메니페스트에 service 타입을 명시해야합니다. (target API에 따라서)

참고: 앱에서 타겟팅하는 API 수준에 따라 앱 매니페스트에서 포그라운드 서비스를 반드시 선언해야 할 수 있습니다.

API 수준 29 이상: location 서비스 유형을 사용하여 위치 정보를 사용하는 모든 포그라운드 서비스를 선언해야 합니다.
API 수준 30 이상: camera 또는 microphone 서비스 유형을 사용하여 카메라나 마이크를 사용하는 모든 포그라운드 서비스를 각각 선언해야 합니다.
API 수준 34 이상: 모든 포그라운드 서비스는 서비스 유형과 함께 선언해야 합니다.

포그라운드 서비스를 만들려고 하는데 매니페스트에서 해당 유형이 선언되지 않았다면 startForeground() 호출 시 시스템에서 MissingForegroundServiceTypeException이 발생합니다.

필요하지 않더라도 모든 포그라운드 서비스를 선언하고 서비스의 서비스 유형을 제공하는 것이 좋습니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" ...>

    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA"/>

    <application ...>
        ...
    </application>
</manifest>

메니페스트에 권한을 요청해야 합니다. API28 이상을 타겟팅 한다면 반드시 권한을 작성해야합니다.

class MyCameraService: Service() {
//...

  	private fun startForeground() {
        val cameraPermission =
                ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)
        if (cameraPermission == PackageManager.PERMISSION_DENIED) {
            //권한 거부 처리
            return
        }

        try {
            val notification = NotificationCompat.Builder(this, "CHANNEL_ID") //채널ID
                .build()
            ServiceCompat.startForeground(
                this,
                100,
                notification,
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
                    ServiceInfo.FOREGROUND_SERVICE_TYPE_CAMERA //특정 타입 명세
                } else {
                    0
                },
            )
        } catch (e: Exception) {
            // ...
        }
  	}
}

그리고 서비스에서 channel, notification 등을 생성후 startForegroundService를 실행하게 됩니다. 문서를 보면 아시겠지만 최근에 디테일한 부분이 굉장히 많이 바뀌었고 복잡해 졌습니다. 문서를 잘 보고 다시 작업 해야 합니다.

어찌되었든 ForegroundService를 써야 하는 이유는 명확했습니다. 백그라운드에서 동작시 최대한 동작이 보장되어야 하기 때문 입니다. (메모리 상황에 따라서 죽기도 함) 때문에 포그라운드 실행시 noti, channel 등을 생성하여 알림창을 띄우고 유저에게 동작을 알리게 됩니다. 공식 문서의 내용을 보다보니 포그라운드 서비스 실행 제한 이라는 문서를 보게 되었습니다. 설마...

Android 12를 타겟팅하는 앱은 몇 가지 특수한 사례를 제외하고 백그라운드에서 실행되는 동안 더 이상 포그라운드 서비스를 시작할 수 없습니다. 앱이 백그라운드에서 실행되는 동안 포그라운드 서비스를 시작하려고 하지만 포그라운드 서비스가 예외 사례 중 하나를 충족하지 못하면 시스템에서 ForegroundServiceStartNotAllowedException이 발생합니다.

구글에서 매년 타겟 버전업을 강제로 시키고 있는 상황에서 이제 다른 방법으로 백그라운드 작업을 실행해라. 라는 말이었습니다.

WorkManager의 사용

개발하고있는 앱의 경우 문서에서 이야기 하는 몇가지 특수한 사례에 포함될것 같지 않았습니다. 때문에 WorkManager 를 사용하여 안전하게? 백그라운드 처리를 하기로 합니다. 사실 그동안에 WorkManager는 주기적인 예약 작업등에 많이 사용하도록 권장되어왔습니다.

심지어 앱이 꺼져도 백그라운드에서 작업을 처리 해야할때 유용합니다. (배치같이) WorkManager가 처리하는 지속적인 작업의 유형은 세 가지입니다.

즉시: 즉시 시작하고 곧 완료해야 하는 작업입니다. 신속하게 처리될 수 있습니다. (약 3분이상)
장기 실행: 더 오래(10분 이상이 될 수 있음) 실행될 수 있는 작업입니다. (약 10분이상)
지연 가능: 나중에 시작하며 주기적으로 실행될 수 있는 예약된 작업입니다.

우리 앱이 해당되는 부분은 장기 실행 부분 입니다. 대량의 파일 읽기 쓰기나 DB처리, 네트워크처리 등 다양한 이유로 백그라운드 작업이 필요할수 있습니다.

커스텀 worker 생성

Custom Worker - doWork 을 통해 장기 실행이 필요한 작업을 이곳에서 작성하게 됩니다.

class CustomWorker(var ctx: Context, var params: WorkerParameters) : CoroutineWorker(ctx, params) {
    private val TAG = "CustomWorker"

    override suspend fun doWork(): Result {
        val outputData = workDataOf("outputData" to "success")

        return try {
            //장기화 실행 포그라운드 처리
            setForeground(createForegroundInfo(ctx, "starting..."))

            initNotification(ctx)

            Log.d(TAG, "=== 이미지 분석 시작 : ${Date()} ===")

            loadImagesAndDocument(ctx)
            Result.success(outputData)

        } catch (e: Exception) {
            Log.e(TAG, "=== err CustomWorker ===")
            Result.failure()

        }
    }
}

포그라운드 처리를 위해 CoroutineWorker, setForeground 를 설정한뒤 notification, channel 등도 지정합니다. 기존의 foreground service 와 동일 합니다.

private fun createForegroundInfo(ctx: Context, progress: String): ForegroundInfo {
        val id = CHANNEL_ID
        val title = "장기화작업"
        val cancel = "취소"

        val intent = WorkManager.getInstance(applicationContext)
            .createCancelPendingIntent(getId())

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            createChannel(ctx)
        }

        val notification = NotificationCompat.Builder(applicationContext, id)
            .setContentTitle(title)
            .setTicker(title)
            .setContentText(progress)
            .setSmallIcon(R.drawable.custom_icon)
            .setOngoing(true)
//            .addAction(R.drawable.ic_delete, cancel, intent)
            .build()

        return ForegroundInfo(NOTIFICATION_ID, notification)
    }


    fun createChannel(context: Context){
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            val name = CHANNEL_NAME
            val description = CHANNEL_DESCRIPTION
            val importance = NotificationManager.IMPORTANCE_HIGH
            val channel = NotificationChannel(CHANNEL_ID, name, importance)
            channel.description = description

            val notificationManager =
                context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager?
            
            notificationManager?.createNotificationChannel(channel)
        }

    }

Worker를 만들었다면 실행은 굉장히 간단합니다. uniqueWork를 통해 정책과 초기화 단계에서 작업할 워커를 생성하고 각종 제약조건을 걸어줍니다. 충전중일때 동작할것인지, 네트워크는 연결되어야 할지 등등 많은 옵션을 지정할수 있습니다. 마지막으로 Custom Worker를 셋팅하여 최종 enqueue 를 통해 실행을 시킵니다.

 /**
 * 백그라운드 작업 - Workmanager
 */
    private fun executeWithWorkManager(context: Context){

        val workManager = WorkManager.getInstance(context)

        var continuation = workManager
            .beginUniqueWork(
                WORK_NAME,
                ExistingWorkPolicy.REPLACE,
                OneTimeWorkRequest.from(initWorker::class.java) //초기화 작업을 위한 워커
            )

        val constraints = Constraints.Builder()
            .setRequiredNetworkType(NetworkType.CONNECTED)
            .setRequiresCharging(false)
            .build()

        val doBuilder = OneTimeWorkRequestBuilder<CustomWorker>()
            .setConstraints(constraints)
            .addTag(TAG_CUSTOM_WORK)
            .build()

        continuation = continuation.then(doBuilder)
        continuation.enqueue()

    }

이와 같이 Work Manager를 통해 장기화 실행 처리를 진행했습니다. 이 장기화 라는 말에 속아 무한정 돌것이라는 기대는 안하는게 좋습니다. 동작시간은 최대시간 600초(10분) 정도가 한계입니다. (IOS는 더 제한적입니다 약 3분...)

마무리글

기기에 따라서 OS에 따라서 조금씩 다르지만 공통적인것은 구글이나 애플에서 정책적으로 백그라운드 제한을 심화 하고 있다는 것입니다. 그 덕에 개발자들은 변경된 정책을 보고 또 보고 업데이트 해야 합니다. 이러한 내용들을 사전 리서치하고 전달하는것 그리고 기획자를 잘 설득시키는것 또한 일이라고 하겠습니다. 안되는걸 되게 할수는 없지 않겠습니까?

역시나 쉬운게 없다고 생각하며...

참고 문서

https://developer.android.com/about/versions/12/foreground-services?hl=ko

https://developer.android.com/topic/libraries/architecture/workmanager/advanced/long-running?hl=ko

https://developer.android.com/develop/background-work/services/foreground-services?hl=ko

GPS 관련 기능 사용정리 (location manager, fused location provider)

코드와트 — Wed, 7 Feb 2024 21:00:11 +0900

안녕하세요. 블루스웨터 소프트 입니다.

사용자의 위치정보를 활용하여 기능 구현을 하는것은 이제 흔한 일이 되었습니다.

진행한 프로젝트를 기반으로 내용을 정리해보겠습니다.

최근에 작업에 참여하게된 프로젝트는 골프 관련 앱으로써 사용자의 위치 정보가 굉장히 중요한 요소 입니다.

위치 정보를 활용하여 라운딩 정보를 기록하고 모니터링, 분석 하는 앱 입니다.

위치 정보를 사용하지 못한다면 앱 기능의 절반은 사용 불가라고 봐도 무방할 정도 입니다.

때문에 다시한번 위치정보에 대한 내용을 정리하는것이 필요했습니다.

GPS의 이해

GPS(Global Positioning System) 는 미국 국방부에서 개발하여 현재는 군사, 공공, 민간 기업, 일반 등 다양하게 활용되어지고 있습니다. GPS의 연간 유지보수 비용은 약 7억5천만달러 입니다만 현재는 무료로 사용되어지고 있습니다.

우리의 일상속에서 GPS 의 기능을 찾아보면 이미 많은곳에서 쓰이고 있습니다.

현재 위치를 기준으로 배달을 시켜 먹거나, 택시를 부르거나, 중고거래를 하거나 굉장히 많은 일들이 이미 GPS 의 혜택을 받고 있습니다.

GPS 사용 구현에 있어서 단연 중요한것은 위치의 정확도 입니다. 위치가 정확하지 않다면 해당 개발 자체가 무의미 합니다. 만약 이런경우 기획적으로 방향을 틀어서 개발할수 밖에 없겠습니다. 다행히도 안드로이드에서는 정확한 GPS 활용을 위해 몇가지 방법을 제시합니다.

Location Manager 사용

Location Manager는 정말 간단하게 현재 위치 정보를 수신받고, 리스너를 통해 이벤트를 핸들링 할수 있습니다.

우선 권한을 추가해주겠습니다. Manifest에 아래의 위치 정보 관련 권한을 추가 합니다.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

system service 로 location manager를 지정하고 필요한 조건을 구성 합니다.

val locationManager = getSystemService(Context.LOCATION_SERVICE) as LocationManager
var location: Location? = null

//조건을 지정한다
val criteria = Criteria().apply {
    accuracy = Criteria.ACCURACY_COARSE
    isCostAllowed = false
}

val provider = locationManager.getBestProvider(criteria, false) //조건을 사용하여 위치정보를 획득

try {
    location = locationManager.getLastKnownLocation(provider) //최근 위치 정보를 획득함
    
    //위치정보 이벤트 리스너
    val locListener = object : LocationListener {
        override fun onLocationChanged(location: Location) {
        }

        override fun onStatusChanged(provider: String?, status: Int, extras: Bundle?) {
        }

        override fun onProviderEnabled(provider: String) {
        }

        override fun onProviderDisabled(provider: String) {
        }
    }
    
    location?.let {
        Log.d("LocationManager", "=== ${it} ===")
    } 

	//위치 정보를 주기적으로 업데이트 받는다
    locationManager.requestLocationUpdates(provider, 500L, 1f, locListener)
} catch (e: Exception) {
    Log.e("locationManager", e.message ?: "=== Unknown Exception ===")
}

이렇게해서 간단하게 위치 정보를 가져올수 있습니다만... 더이상 Location Manager는 사용할 필요가 없게되었습니다. 구글에서 Fused Provider 를 사용하라고 권장하고 있기 때문입니다. (Location Manager 의 내부메서드 들도 deplicated 되었습니다.)

Fused Provider 를 이용하면 GPS, NETWORK 등의 복합적인 방법을 통해 좀더 정확한 위치 정보를 획득하고, 낮은 배터리 사용률을 가지며, 최신의 업데이트를 지원하고, geo fencing, mapapi 등의 관련 서비스로의 연계가 쉽고 편리합니다. 이모든 장점을 두고 굳이 Location Manager 를 사용할 이유가 없겠지요

여기서 잠깐 Android 에서 위치정보를 획득하는 방법에 대해서 정리해보겠습니다.

크게 GPS를 활용하는 방법과 Network (통신사 cell point , wifi ap 등) 를 활용하는 방법이 있습니다.

위치정보 제공자의 이해

GPS Provider

GNSS(Global Navigation Satellite System) 위성 항법 기술을 활용한 위치 정보를 수신받습니다. 당연히 실내에 있거나 혹은 지하, 산속 등에서는 굉장히 제한적입니다.

Network Provider

통신망 제공자나 WIFI AP 등을 통해 위치정보를 계산하는 방법 입니다. 실내에서도 위치정보를 어느정도 파악할수 있습니다. 다만 Cell 타워 간격이나, WIFI ap 의 유무 등으로 인해 변수가 존재합니다. 때문에 안드로이드는 내부에서 지속적으로 사용자의 네트워크 정보를 수시로 가져갑니다.

이 두가지를 섞어주면 참 좋을텐데... 그래서 나온게 바로 Fused Location Provider 입니다.

이렇게 최신의 기술이 응집된? Fused Location Provider 를 구현해보겠습니다. 굉장히 간단합니다.

Fused Location Provider를 사용한 사용자의 마지막 위치 가져오기

google-play service 에서 제공하는 play-services-location 를 추가합니다.

apply plugin: 'com.android.application'

...

dependencies {
    implementation 'com.google.android.gms:play-services-location:21.1.0'
}

FusedLocation을 선언하고 onCreate에서 초기화 합니다.

private var fusedLocation: FusedLocationProviderClient? = null

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
    fusedLocation = LocationServices.getFusedLocationProviderClient(this)
}

fusedLocationClient.lastLocation
	.addOnSuccessListener { location : Location? ->
    location?.let{
    	Log.d("", "=== ${location} ===")
    }
    
}

lastLocation에 리스너를 등록하고 위도 경도 등의 정보를 가지고 있는 Location 정보를 전달받게 됩니다. 그런데 왜 Location? 일까요? 특정 아래의 이유에 의해서 null 이 들어올수 있기 때문입니다.

기기 설정에서 위치가 사용 중지되어 있습니다. 위치를 사용 중지하면 캐시도 지워지므로 이전에 마지막 위치를 가져온 경우에도 결과는 null일 수 있습니다.
기기에서 위치를 기록한 적이 없습니다. 예를 들면 새 기기이거나 기본 설정으로 복원된 기기일 수 있습니다.
기기의 Google Play 서비스가 다시 시작되었으며 서비스가 다시 시작된 후 위치를 요청한 활성 통합 위치 정보 제공자 클라이언트가 없습니다. 이러한 상황이 발생하지 않도록 새 클라이언트를 만들고 직접 위치 업데이트를 요청할 수 있습니다. 자세한 내용은 위치 업데이트 받기를 참고하세요.

주의할점은 가져온 위치정보값이 반드시 최신의 값은 아닐수 있다는데 있습니다. 마지막으로 기록된 위치가 현재 나의 위치라고 볼수는 없기 때문입니다. (현재 이동한 위치가 기록이 안됐거나) 그래서 정확한 현재위치를 표기하기 위해서는 다른 방법으로 구현해야 합니다.

Fused Location Provider를 사용한 현재 위치 가져오기

getCurrentLocation() 메서드를 활용하는 것입니다. 최신의 위치를 가져오는 가장 좋은 방법입니다. requestLocationUpdates 를 활용하여 위치를 업데이트 하고 가져오는것보다 안정적 입니다. requestLocationUpdates를 사용하여 중단시키지 않으면 배터리 등의 소모가 많을수 있습니다.

Fused Location Provider를 사용한 위치 업데이트 등록

private var locationCallback: LocationCallback? = null

override fun onCreate(savedInstanceState: Bundle?) {
	//...
    
    locationCallback = object : LocationCallback() {
        override fun onLocationResult(locationResult: LocationResult?) {
            locationResult ?: return
            for (location in locationResult.locations){
            	Log.d("locationCallBack", "=== location: $location ===")
            
            }
        }
    }
    
    //...
}

override fun onResume() {
    super.onResume()
    startLocationUpdates()
}

private fun startLocationUpdates() {
    fusedLocation.requestLocationUpdates(locationRequest,
            locationCallback,
            Looper.getMainLooper())
}

업데이트 요청을 시작했다면 중지하는 로직도 필요합니다. 화면이 전환되거나, 앱이 백그라운드로 들어갔다면 위치 정보 획득 중단을 요청할수 있습니다.

override fun onPause() {
    super.onPause()
    stopLocationUpdates()
}

private fun stopLocationUpdates() {
    fusedLocationClient.removeLocationUpdates(locationCallback)
}

override fun onResume() {
    super.onResume()
    if (requestingLocationUpdates) startLocationUpdates()
}

화면 전환시 위치정보를 업데이트 하려면 requestingLocationUpdates 를 활용해서 onResume 에서 startLocationUpdates 합니다.

이러한 복잡성 때문에 간단한 현재위치 조회의 경우 getCurrentLocation을 통해 가져오라고 권장하고 있습니다.

마무리글

사실 위치 정보를 활용한 앱들은 이전부터 꽤 많이 작업했습니다만, 정리를 안해둔 탓에 매번 찾아보고 다시 공부해야 했습니다. Location Manager 와 Fused Location Provider 에 대해서 이번 글을 작성 하며 지식을 정리하는 계기가 되어 기쁜 마음입니다. 이제는 거의 사용되지 않는 Location Manager의 구현을 작성한 이유는 사용되지 않는다면 기존의 히스토리를 알아둘 필요가 있기 때문입니다. 왜 더 좋은지 왜 사용해야 되는지에 대한 이해가 쉽게 되기 때문입니다. 누군가 참고를 위해 이글을 읽는다면 앞 내용만 보고 Location Manager 를 사용하지 않기를 바랍니다

문서참고

https://stackoverflow.com/questions/6775257/android-location-providers-gps-or-network-provider

https://manorgass.tistory.com/82

https://developer.android.com/reference/android/location/LocationManager

https://developers.google.com/location-context/fused-location-provider?hl=ko

https://developer.android.com/training/location/retrieve-current?hl=ko

https://developer.android.com/training/location/request-updates?hl=ko

BLE(beacon), Objc-swift, mdm 프로젝트 진행

코드와트 — Wed, 7 Feb 2024 20:00:05 +0900

소개

안녕하세요. 블루스웨터 소프트입니다.

프로젝트를 진행하며 느낀점과 기술적인 부분을 정리 하고 있습니다.

P사의 프로젝트를 진행하다보면 어려운 점은 다름아닌 보안 입니다.

외부로 통하는 경로가 막혀있기 때문에 필요한 lib 등 오픈소스 활용도 어렵습니다.

신청을 통해 필요한 경로를 오픈해주기는 하지만 오래걸리고 까다롭기도 합니다.

개발하는 입장에서는 굉장히 불편한 일이지만 보안이 철저한것은 어찌됬건 환영할일 입니다 (울면서 웃는 나)

그동안 하드웨어와 앱단의 ble 연동을 원하는 프로젝트들이 있었습니다.

이번 경우도 마찬가지로 ble를 통해 앱과 디바이스(혹은 특정 단말장치)를

연동하여 특정 기기를 필터링 하길 원하였습니다. 특별히 어려운 점은 없어 보였습니다만...

함정이 존재했습니다 (이후 글에서 설명)

블루투스 저전력 프로토콜(Bluetooth Low Energy)은 2010년 블루투스 4.0(Bluetooth Smart) 이후부터 채택되어 사용되기 시작습니다. ble 의 큰 특징은 이름에서 알수 있듯이 아주 작은양의 배터리 만으로도 수년간 동작할수 있는 특징이 있습니다. 속도와 데이터의양이 크지 않아 작은 데이터를 주고받는 가전제품, 센서 통신 등에 활용됩니다.

해당 프로젝트에서는 현장에서 사용하는 Ble 기기 (beacon) 들을 필터링 하여(제조업체별) 기기들의 상태 및 모니터링 하는데 목적이 있습니다. 처음에 단순히 스캐닝만 하고 적당히 표시해주면 될것이라 생각했습니다. 문제는 해당 기기의 정확한 스펙이나 정보가 부족하여 일일히 테스트 해보며 코드를 구현하게 되었습니다.

필수 권한

따로 lib를 쓸 필요가 없기에 CoreBluetooth 를 통해 작업 하였습니다. CoreBluetooth를 사용하기 위해서는 권한관련을 추가해주셔야 합니다. iOS 13 이상에서는 NSBluetoothAlwaysUsageDescription iOS 12 이하 버전에서는 NSBluetoothPeripheralUsageDescription를 추가 해야 합니다. (필수)

잘 모르면 둘다 추가해보자.

BLE 사전 지식

관련을 작업하기 위해서는 선행 지식이 필요합니다. 중앙장치인 Central와 주변기기인 Peripheral 아래의 이미지를 보면 아시겠지만 주변기기는 데이터를 송신하고 중앙에서 받고 처리하는 형태 입니다. 기존의 서버 클라이언트와 비교해서 개념을 이해하면 더 쉬울듯 합니다.

기존의 클래식 블루투스와 다른 점은 페어링 형태로 특정 타겟과 연동하는 방식이 아닌 ad(광고) 형태로 끊임없이? 데이터를 발송한다는데 있습니다. 이는 ble 방식의 특징으로 발송된 ad 데이터를 중앙기기에서 받아서 처리 하게 되는 방식입니다. 실제로 이전에 했던 프로젝트를 예를 들면 특정 ble 기기 주변에 근접한 중앙기기들에게 쿠폰을 발송, 유저에게 사용을 유도 한다던가 마케팅 적으로 활용할수 있습니다.

개발시 특정 테스트기기를 두고 구현을 진행했습니다.

BLE 테스트 구현

var centralManager = CBCentralManager(delegate: self, queue: nil)
var timer: Timer!

@IBAction func onClickBleScan(_ sender: Any) {//버튼을 두고 테스트 스캔을 시작 합니다.

	if(centralManager?.state == .poweredOn){//특정 상태값 확인
    	showLoading()
    
		self.centralManager?.scanForPeripherals(withServices: nil, options: [CBCentralManagerScanOptionAllowDuplicatesKey:false])
		self.timer = Timer.scheduledTimer(timeInterval: 5,
                                              target: self,
                                              selector: #selector(self.stopBleScan),
                                              userInfo: nil,
                                              repeats: false)

     }
}

타이머를 둔 이유는 5초 동안 스캔후 특정 finish 동작을 수행하고 싶어서였습니다.

@objc func stopBleScan(){
    if(centralManager!.isScanning){ //스캐닝 상태 파악
        centralManager!.stopScan() //스캔 중단
    }
    
    if let _ = timer {
        timer.invalidate()
        timer = nil
    }

    hideLoading()

}

extension BleViewController: CBCentralManagerDelegate {
	func centralManagerDidUpdateState(_ central: CBCentralManager) {
        switch central.state {
        case .unknown:
            print("===블루투스 상태 알수 없음===")
        case .resetting:
            print("===블루투스 서비스 리셋===")
        case .unsupported:
            print("===기기가 블루투스를 지원하지 않습니다===")
        case .unauthorized:
            print("===블루투스 사용 권한 확인 필요===")
        case .poweredOff:
            print("===블루투스 비활성 상태===")
        case .poweredOn:
            print("===블루투스 활성 상태====")
        @unknown default:
            print("===default===")
        }
    }

	func centralManager(_ central: CBCentralManager, didDiscover peripheral: CBPeripheral, advertisementData: [String : Any], rssi RSSI: NSNumber) {
             print("==== UUID : \(peripheral.identifier.uuidString) RSSI : \(RSSI.intValue) name: \(peripheral.name) ====")
             print("=== advertisementData : \(advertisementData) ===")
	}


}

블루투스 상태를 확인하고 스캔되는대로 데이터를 확인하여 필요한 작업을 요청할 생각이었습니다. 실제로 블루투스 스캔을 진행하면 주변에 엄청나게 많은 기기들의 신호가 잡히는 걸 볼수 있습니다. 필요한 기기들만 리스팅 되도록 하는게 필수적이었습니다. 보통의 경우 UUID를 키로 삼아서 해당 기기를 컨트롤 하면 되겠다고 생각하기 십상입니다. 주의 해야 할 점은 ios는 특정 블루투스 기기의 실제 uuid를 보여주지 않는데 있습니다. 실제로 스캔해보면 계속 바뀌는 값을 확인할수 있습니다. 기기의 고유한 비콘 id 값을 확인하려면 특별한 방법이 필요합니다. 페어링을 하거나(해당없음) 제조사의 모델값을 전달 받아서 활용하는 방법 입니다. 표준값이 존재합니다만 해당 기기 스펙마다 조금씩 다를수 있기 때문에 연동하고자 하는 기기의 정보를 제대로 파악 해야 합니다.

해당 기기가 어떤 업체의 beacon 기기인지를 사전에 확인하는 것이 중요하게습니다.

Ibeacon, eddystone 등 업체도 다양하고 조금씩 특징이 다릅니다. UUID 를 검색해도 의미가 없기에 고유값으로 활용할 beacon Id 값을 찾아야 했습니다. 그냥 보이지는 않고 내부의 manufacturer data 를 규격 대로 해석해야 볼수 있습니다.

예를 들어 … 0059 355 asdfb234234 sdf fffff 0000 이런식의 코드를 비트연산으로 디코딩 하여야 확인할수 있습니다.

앞 자리는 회사 id, 그다음은 beacon id , voltage, 등등 어떤 정보인지는 기기마다 조금씩 다릅니다.

let advData = AdvertisementData.init(advertisementData)
        var beaconName = advData.localName ?? ""
        if let mData = advData.manufacturerData{
        	 //corp Id
            let manufactureID = UInt16(mData[0]) + UInt16(mData[1]) << 8
            var mId = String(format: "%04X", manufactureID)
            print(mId) //->ex 000D
        
        	//beacon Id parse
            mData.forEach { mInt in
                beaconId += String(format: "%02X", UInt16(mInt))
            }
            print("=== beaconId: \(beaconId) ===")
        
        }
        
        //...
        
 }

//특정 장치만 리스팅 하기위함.
if(beaconId.contains(filterPrefix)){
	print("=== beaconId : \(beaconId) ===")
}

이렇게 긴 과정을 통해 beacon id 값으로 특정 기기만 검색하고 서버로 데이터를 전달할수 있게 되었습니다.

Objc-Swift 혼용

해당 프로젝트는 조금 특이한 구조로 이루어져 있습니다. Objc로 된 소스와 Swift 가 같이 혼재된 형태 입니다. 더 특이한 것은 AppDelegate 단은 Objective-c, 이후에 화면단은 Swift 로 되어있습니다. 굉장히 정신없는 구조라서 까닥하다가는 뭘하러 가는건지 길을 잃어 버리기 십상입니다. Objective-c 와 Swift 를 같이 쓰기 위해서는 특별한 셋팅이 필요합니다.

아래와 같이 Project -> Build Setting -> Swift Compiler -> Objective-C Bridging Header 를 설정해주셔야 합니다.

지정한 경로에 해당 브릿지 파일을 만들어 주고 필요한 Objc 클래스를 import 하면 됩니다.

bridge 파일을 생성한다.

#import "AppDelegate.h"
#import "DeviceUtil.h"
#import "NSData+AES128.h"

해당 프로젝트의 특이한 점은 AppDelegate 가 Objective-C 로 되어있다는 점 입니다. 시작점이 Objective-C 라는 이야기는 Objective-C 에서 Swift 를 호출하는 방법도 작성해야 한다는 말입니다. 필요한 클래스에 @objc 어노테이션을 활용하면 간단합니다.

@objc 
class TextUtil: NSObject {
   @objc static let shared = TextUtil()
   
}

그리고 swift를 사용할 objc 클래스로 이동하고 import , 그리고 사용하면 됩니다.

#import "Pooo-Swift.h"

[[TextUtil shared] file:@"AppDelegate" msg:@"=== 여기서 이동 시작 ==="];

MDM 관련

해당 프로젝트에서는 이미 MDM 관련 기능을 제공하고 있기에 최소한의 사전 지식이 필요했습니다. MDM은 수 많은 기기들을 관리 하는 일종의 보안 솔루션 (보안, 감시, 제한 등) 으로 일반적으로 사용할수 없는 위험한? 기능들을 제공하고 있습니다. 보안이 중요한 업계에서는 이미 많이들 사용하는 솔루션 입니다. MDM의 기조는 사용자를 억압하고 제한하는 것입니다. 때문에 사생활 침해 등의 우려는 덤으로 따라오는 옵션이었습니다. 때문에 업무용 폰과 태블릿을 따로 지급하고 해당 기기에만 MDM 을 설치하는 것이 표준이 되고 있습니다만(이번 프로젝트는 그렇지 않습니다 ) 너무 불편했기 때문에 EMM : Enterprise Mobility Management 이라는 새로운 솔루션이 등장합니다. 좀더 세세하게 특정 앱이나, 서비스만을 통제할수 있고, 사생활 침해 등은 최소화 하는 솔루션입니다. 이번 프로젝트의 경우 위치 정보를 기준으로 카메라를 막고, 스크린샷을 막는등 필요한 제한기능을 사용하고 있었습니다. Apple 기기를 MDM 관리 하기 위해서는 개발시 상당히 긴 시간이 필요한것으로 보였습니다. Apple 에서 제공하는 공식 MDM 서비스는 따로 없고 아래의 서비스 등록한뒤 타사의 MDM 솔루션을 사용 해야 됩니다.

애플 등록

Apple DEP(Device Enrollment Program)
APPLE MDM (ABM(Apple Business Manager)

타사 솔루션

- VMware AirWatch

- IBM MaaS360

- Microsoft Intune

- Citrix XenMobile

- Cisco Meraki System Manager

- Jamf

- Hexnode MDM

- SimpleMDM

마무리글

사내배포 앱을 제작하는 특수성을 가진 프로젝트로써 많은 보안 과제들을 처리해야하는 업무였습니다. BLE, 엔터프라이즈 앱배포 등 관련 내용을 다시한번 정리하고 MDM 같은 특수성을 가진 연동 처리 또한 새로운 지식을 쌓는 계기가 되었습니다. 정말이지 IT 지식은 끝도 없고 양도 방대함을 다시금 깨닿는 계기 였습니다. ‍

문서참고

https://support.apple.com/ko-kr/guide/deployment/depc0aadd3fe/web

https://www.sharedit.co.kr/posts/8235#

https://stackoverflow.com/questions/12524871/corebluetooth-how-to-get-a-unique-uuid?rq=3

https://www.bluetooth.com/specifications/assigned-numbers/

https://developer.apple.com/library/archive/documentation/NetworkingInternetWeb/Conceptual/CoreBluetooth_concepts/CoreBluetoothOverview/CoreBluetoothOverview.html

MVVM-C 패턴을 활용한 앱 개발 후기

코드와트 — Wed, 7 Feb 2024 18:19:04 +0900

안녕하세요. 블루스웨터 소프트 입니다.

클린 아키텍처, 클린 코드(clean code:Robert C. Martin) 등은 이제 주변에서 흔하게 접하는 단어가 되었습니다.

MVC, MVP, MVVM... 각종기법이 사용되고 있습니다. 장기적으로 유지보수측면서 환영할만한 일이지만

해당 기법들이 무분별하게 사용되어진 프로젝트들을 보면 (모든 기법이 뒤섞인) 유지보수측면에서 정말 지옥이 아닐수 없습니다.

오늘은 MVVM-C 라고 하는 패턴을 사용한 작업 후기를 공유 합니다.

MVVM 패턴은 매우 인기있는 클린아키텍처 접근 방법 입니다. 이 패턴에 Coordinator 라는 개념을 추가 한것이 MVVM-C 패턴 입니다.

"왠 코디네이터 입니까?"

코디네이터는 일종의 목적지 가이드 라고 이해하면 쉽게 접근할수 있습니다.

코디는 우리가 어디로 가야할지, 무엇이 필요한지를 아는자 입니다.

func goToLogin() { 
    let vc = LoginViewController.instantiate(from: authStoryboard) //목적지를 정하고
    let vm = LoginViewModel() //필요한 정보를
    vm.apiClient = authApi 
    vm.authCoordinator = self
     vc.viewModel = vm //전달합니다
    navigationController.setViewControllers([vc], animated: true ) //목적지로 이동합니다
}

하나의 코디네이터 클래스에는 위와 같은 여러개의 이동정보가 존재합니다.

coordinator의 설계

AppCoordinator 라는 공통의 부모 코디가 있고 그 밑에는 화면별로 코디가 존재하게 됩니다. 화면에 따른 Coordinator, ViewModel, ViewController, View... 등이 존재하는 것이죠.

protocol Coordinator {
    var parentCoordinator: Coordinator? { get set }
    var children: [Coordinator] { get set }
    var navigationController : UINavigationController { get set }
    
    func start()
}

class AppCoordinator: Coordinator {
var parentCoordinator: Coordinator?
var children: [Coordinator] = []
var navigationController: UINavigationController    

init(navCon : UINavigationController) {
	self.navigationController = navCon
}    

func start() {
    print("===앱의 시작점===")
}}

예를 들면 AppDelegate는 아래와 같이 만들어집니다. root navigation 을 만들고 appCoordi 에게 전달 합니다.

class AppDelegate: UIResponder, UIApplicationDelegate {
   var window: UIWindow?
   var appCoordinator : AppCoordinator?

   func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
       
        window = UIWindow(frame: UIScreen.main.bounds)
        let navigationCon = UINavigationController.init()
        appCoordinator = AppCoordinator(navigationController: navigationCon)
        appCoordinator!.start()
        window!.rootViewController = navigationCon
        window!.makeKeyAndVisible()
        return true
   }
}

Coordinator의 핵심은 전달받은 navigator로 화면 처리를 운용하는데 목적이 있습니다.

 func start() {
	goToLoginPage()
}

AppCoordinator에 소스를 추가 합니다. 화면은 띄워봐야 하니까요.

let storyboard = UIStoryboard.init(name: "Main", bundle: .main) //스토리보드사용시

func goToLoginPage(){
     let loginViewController = storyboard.instantiateViewController(withIdentifier: "LoginViewController") as! LoginViewController //화면을 구성합니다.
     let loginViewModel = LoginViewModel.init() //뷰모델을 생성하고
     loginViewModel.appCoordinator = self //뷰 모델이 코디를 알아야 호출하겠죠?
     loginViewController.viewModel = loginViewModel //viewController는 ViewModel을 알아야합니다.
     navigationController.pushViewController(loginViewController, animated: true) //마지막은 push하면 됩니다.
}

코드를 보면 아시겠지만 코디가 하는 일은 그저 화면을 만들고 그안에 필요한 내용을 구성해주는 역할이 다 입니다. 클린 아키텍처의 핵심은 규칙을 잘 지키고, 할일만 하고, 서로를 잘 몰라야 합니다. UI는 ViewModel을 모르고, ViewModel은 Repository, Service를 모릅니다. (모른다는건 생성하지 않는다는 종속되지 않는다는 의미) DI를 통해 전달받고 그저 사용할뿐입니다.

뷰모델도 살펴 보겠습니다.

class LoginViewModel {
    weak var coordinator : AppCoordinator!
    
    func goToLogin(){
        appCoordinator.goToLoginPage()
    }
}

정말 단순한 예제 입니다

뷰컨트롤러도 확인해보겠습니다.

class LoginViewController : UIViewController {
    var viewModel : LoginViewModel!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    @IBAction func goToLoginTapped(_ sender: Any) {
        viewModel.goToLogin()
    }
}

뷰컨트롤러도 사실상 하는일이 없습니다. 비지니스 로직에는 전혀 관혀하지 않습니다. 유저 와 View 간의 상호작용하고 ViewModel 로 모든 로직을 위임합니다. ViewModel에서는 상황에 맞게 Service, Repository 를 운용하고 최종적으로 Coordinator를 통해 화면을 이동시켜줍니다.

MVVM 의 개념을 알고있다면 Coordinator만 추가 해주면 됩니다. Coordinator를 추가함으로써 복잡한 화면 이동처리를 위임하고 비즈니스 로직에 집중할수 있습니다. 이것이 MVVM-C 활용의 전부 입니다.

참고문서

https://www.linkedin.com/pulse/understanding-mvvm-c-budhabhooshan-patil/

https://medium.com/nerd-for-tech/mvvm-coordinators-ios-architecture-tutorial-fb27eaa36470

SwiftUI +Preview 를 활용하여 UI 작성 방법

코드와트 — Wed, 7 Feb 2024 18:17:45 +0900

안녕하세요. 블루스웨터소프트 입니다.

프로젝트를 진행하며 재미있는 방법으로? UI를 구성한적이 있습니다.

꽤나 유용한 방법이어서 해당 내용을 공유 합니다.

기존의 프로젝트에 SwiftUI 의 Preview 를 적용하여 개발하는 방식입니다.

이 방법을 활용하면 Storyboard, Swift등은 그대로 쓰면서, UI 개발시 바로 바로 Preview 를 보면서 개발이 가능합니다.

이렇게 되면 UI 구성을 확인하기 위해 매번 빌드 해서 확인하고 빌드해서 확인하는 수고로움이 덜어질 것입니다.

필요한 부분만 컴파일 되어 보여지므로 속도 또한 빠릅니다.

방법은 정말 간단합니다. 프로젝트에서 Swift 파일을 하나 생성합니다.

그리고 기존의 방법대로 UIkit 등 필요한 라이브러리를 import 하시고

맨 아래 부분에 "#if DEBUG" 전처리문으로 시작하는 아래의 소스코드를 넣어주겠습니다.

#if DEBUG
import SwiftUI

struct HybridSwiftViewController_ViewPresentable: UIViewControllerRepresentable {
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        print("=== HybridSwiftViewController_ViewPresentable updateUIViewController ==")
    }
    
    func makeUIViewController(context: Context) -> some UIViewController {
        HybridSwiftUIViewController()
    }
    
}

struct HybridViewController_PreviewProvider : PreviewProvider {
    static var previews: some View {
        HybridSwiftViewController_ViewPresentable()
            //.ignoresSafeArea()
    }
}
#endif

소스 코드를 보면 아시겠지만 정말 별거 없이 SwiftUI의 Preview를 활용하기 위해 PreviewProvider 프로토콜을 구현 해주면 됩니다.

"HybridSwiftViewController" 부분은 자신의 클래스를 따라서 작성해줍니다.

이렇게 작성하자마자 오른쪽에 Preview가 등장하고 왠 화면이 보이게 됩니다.

짐작하신대로 이부분이 Preview 화면 입니다.

private lazy var topContainer = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 300))
private lazy var titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

override func viewDidLoad() {
    print("=== HybridSwiftUIViewController viewDidLoad ==")

    titleLabel.text = "안녕하세요"
    titleLabel.backgroundColor = .white
    topContainer.backgroundColor = .blue
    topContainer.addSubview(titleLabel)
    self.view.addSubview(topContainer)
}

간단하게 작성한뒤 화면 출력을 확인해 봅니다. 값도 변경해보면서 테스트 해봅니다.

preview 화면을 보며 개발한다

만약 화면이 안보인다면 Xcode 오른쪽 상단에 해당 버튼을 확인하세요.

Canvas가 체크되어있는지 확인하고 단축키도 사용해봅니다.

Canvas 표시 단축키 : Cmd+Opt+Enter

이렇게 활용하면 매번 컴파일 할 필요 없이 다이렉트로 화면을 보며 작업 할수 있습니다.

기존의 storyboard로 된 프로젝트나 view를 매번 커스텀하여 사용하셨다면 이번 기회에 SwiftUI 를 활용하면 좋을것 같습니다.

마무리글

실제로 프로젝트를 진행하며 앱개발에 활용해보니 굉장히 편리했습니다.

기존의 storyboard나 view를 코딩 작업하는 경우 매번 빌드-런-빌드-런의 과정을 통해 변경된 UI를 확인하는 것은 꽤나 번거롭고 시간이 많이 소요되는 일이었습니다. 최근에 진행한 flutter 개발에서도 핫픽스 기능을 통해 바로 바로 변경된 UI를 보며 작업할수 있었습니다. 앞으로 UI 작업시에 꽤나 유용할것 같습니다.

Flutter와 iOS 그리고 extension 간에 데이터를 공유 후기

코드와트 — Wed, 7 Feb 2024 18:11:07 +0900

안녕하세요. 블루스웨터소프트 입니다.

Flutter를 사용해보니 편리함과 동시에 앱의 복잡도가 증가했습니다.

개발 툴사용만 봐도 그렇습니다. 저는 vscode를 이용해서 flutter 코드를 작성합니다.

안드로이드는 android studio, ios 는 xcode 에서 따로 작업합니다.

때문에 리소스도 상당히 많이 잡아먹는 작업입니다.

그럼에도 Flutter의 많은 장점들 때문에 최근 가장 트랜디한 개발 언어가 되었겠죠.

개발을 하며 필수적으로 native 소스단에 접근하게 되는데요. 이럴때마다 선택지가 많다보니 어디에 핵심 로직을 둘것인가?하는 문제가 생기게 됩니다. 오늘은 개발시 있었던 일화와 간단한 값을 (읽기, 쓰기) 테스트 해보면서 좀더 이야기 해보겠습니다.

우선 제 상황을 공유하자면...

Flutter
ios
extension

이렇게 크게 3가지의 파트로 나뉘어 집니다. sms 문자를 컨트롤 해야하는 상황이라 extension을 필수로 사용하게 되었습니다.

그러면서 자연스럽게 3 파트의 데이터 공유에 대해서 생각해보게 되었습니다. 데이터를 어디서 저장하고 어디서 활용해야 하지?

또 어떤 방식으로 저장을 할까? (shared preference, UserDefaults, realm 등)

Flutter의 Shared Preference 플러그인의 사용

해당 플러그인을 사용하면 android의 shared preferences 와 ios의 userDefault 와 유사하게 활용할수 있습니다.

간단한 데이터(iOS 및 macOS의 NSUserDefaults, Android의 SharedPreferences 등)를 위한 플랫폼별 영구 저장소를 래핑합니다

Supported data types are int, double, bool, String and List<String>.

1. pubspec.yaml 파일에 shared_preferences 종속성으로 추가하십시오.

shared_preferences: ^2.2.2

2. 쓰기

final SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString("userId", "kakao12345");
await prefs.setString("userLoginType", "kakao");

정말 간단하죠? 읽기도 확인해보겠습니다.

3. 읽기

prefs.getString("userId")

읽기도 마찬가지로 너무 쉽습니다. (당연)

쓰기(set)에서 await를 통한 비동기처리를 해주어야 합니다. 쓰기(set)시 비동기 처리가 필요한 이유는 쓰기 작업시 dart의 캐시를 활용하기 때문이라고 합니다. 때문에 가시성의 문제가 생길수 있습니다. (SharedPreferences.getInstance() = 싱글턴) 최신의 데이터를 보장해야 한다면 reload()를 통해서 캐시를 갱신해야 합니다.

이렇게 쓴 데이터를 제 경우 ios 앱에서 활용했습니다. 과연 ios에서 잘 확인이 될까요?

네 당연히 됩니다. 대신 prefix 값을 붙혀주셔야 합니다.

UserDefaults.standard.object(forKey:"flutter.userId"))

이런식으로 말입니다. "flutter." prefix가 붙는 이유에 대해서도 문서 잘 설명되어 있습니다.

By default, the SharedPreferences plugin will only read (and write) preferences that begin with the prefix
flutter.. This is all handled internally by the plugin and does not require manually adding this prefix.

그럼 이값을 extension 까지 끌고 갈수 있을까요? ios과 extension에서 데이터 공유를 위해 특별한 방법을 사용해야 합니다.

바로 AppGroup을 등록해야 합니다.

capabillities의 App Group을 등록하세요.

앱 그룹을 생성하고 (apple dev) 필요한 extension도 생성합니다.

데이터 공유를 위해서는 각각의 타겟별을 같은 AppGroup에 속하게 등록해줘야 합니다.

그리고 나서 데이터를 사용해보겠습니다.

extension UserDefaults {
    static var shared: UserDefaults {
        let appGroupId = "group.ZNY6123123.com.blueswt.abc.smsfilter"
        return UserDefaults(suiteName: appGroupId)!
    }
}

편의성을 위해 UserDefaults 확장함수를 만들고 앱 그룹속성을 지정해줍니다. appGroupId는 당연히 등록할때 지정한 id 입니다.

사용방법은 동일합니다. 유틸클래스를 만들었다면 타겟 멤버쉽에 체크하는것을 잊으면 안됩니다

매번 깜빡하게되는 것

UserDefaults.shared.set("hello world", forKey: "intro")
UserDefaults.shared.synchronize()

해당 문장을 set 하고 extension에서 사용합니다.

let intro: String? = UserDefaults.shared.string(forKey: "intro")
print("=== \(intro) ===")

너무나 간단하게 값을 공유하게 되었습니다.

SMS Filter Extension 의 특수성

그런데 저의 경우 복병이 있었습니다. 제가 사용했던 MessageFilterExtension의 경우 아무리 이렇게 저렇게 해봐도 데이터 공유가 안되는 문제가 있었습니다. 너무 황당해서 realm도 써보고 모든 시도를 한 뒤에 문서를 다시 보기 시작했습니다.

For privacy reasons, the system handles all communication with your associated server; your Message Filter app extension can’t access the network directly. Your app extension also can’t write data to containers shared with the containing app.

아 안된다고 하네요... 애초에 되는게 이상했던것입니다. 즉 ios 에서 쓴 데이터를 읽기만 가능하고 extension 에서는 쓰기 할수 없다는 말이었습니다. (보안상 문제) 혹시라도 해당 extension 을 사용하시는 분들에게 참고가 되면 좋겠습니다.

SMS and MMS Message Filtering = 데이터 공유 불가

꼭 확인 하시고 몇날 몇일 날리지 마시길 바랍니다

그래서 이런 저런 방법을 생각하다가 flutter channel을 통해서 데이터(userId) 를 전달하고 ios에서 받아서 shared 처리한후 extension에서 읽기 하는 방법으로 최종 결정 내리게 되었습니다. 어떤게 정답이라고 할수는 없지만 제 경우 소스코드의 일관성이 중요했습니다. 어떤값은 flutter에서 처리하고 어떤값은 ios에서 처리하고 유지보수 측면에서도 꼭 필요한 기준이었습니다. (현장에서는 지켜지지 않지만 )

기타 lib 활용

이어서 ios 와 extension 사이의 realm 사용방법에 대해서 알아보겠습니다.

realm 이 atras device sdks 로 바뀐 모양입니다. 설치 방법 확인후 spm, cocoapod 어떤 방법이든 상관없이 편한 방식으로 설치를 해줍니다. https://www.mongodb.com/docs/realm/sdk/swift/install/

마찬가지로 appGroup의 id를 사용하여 realm을 인스턴스를 사용하게 됩니다.

var config = Realm.Configuration()
config.fileURL = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: "appGroup.com.bluswt.abc.myapp")!.appendingPathComponent("default.realm")
Realm.Configuration.defaultConfiguration = config
let realm = try! Realm()

class PatternData: Object {
    @Persisted(PrimaryKey: true)
    var number: Int // primary key로 지정
    @Persisted
    var blackWord: String
    @Persisted
    var date: Date

    convenience init(number: Int) {
        self.init()
        self.number = number
    }
}

func getPatternDataAll() -> Results<PatternData>{
  let objects = realm.objects(PatternData.self)
  return objects
}

 func addPatternData(data: PatternData){
        try! realm.write {
            realm.add(data)
        }
    }

그 뒤에 읽고 쓰고 데이터를 자유롭게 공유 할수 있습니다.

마무리

앱 개발을 하며 생각하게 되는 데이터 저장 방식에 대해서 이야기 하였습니다. 일반적인 상황이 아니기 때문에 Flutter, ios, (android) extension 등 파트 별로 어떻게 데이터를 전달할지 굉장히 난해한 경우가 생깁니다. 기준을 잘 잡고 데이터가 어디서 어떻게 흘러가는지 잘 파악하고 구조를 잡는게 중요할것 같습니다.

*** sms filter extension 에서는 절대 데이터 저장을 하지마세요.

참고문서

https://www.mongodb.com/docs/realm/sdk/?_ga=2.205025232.1589213261.1706596786-1205906347.1705670983

https://developer.apple.com/documentation/sms_and_call_reporting/sms_and_mms_message_filtering/

https://stackoverflow.com/questions/57608338/access-flutter-sharedpreferences-in-swift

https://pub.dev/packages/shared_preferences

Flutter 를 통한 앱개발 후기 이게 맞아?...

코드와트 — Wed, 7 Feb 2024 18:09:14 +0900

Flutter 를 사용하여 앱 개발 한다는건...

*플루터 플러터 등의 한글 표기가 상이하여 이하 영문 Flutter 로 통일하겠습니다.

안녕하세요. 블루스웨터소프트 입니다.

오늘은 앱 개발시장의 화두인 Flutter 를 이용한 앱개발에 대해서 알아보겠습니다.

실제 프로젝트를 진행하며 느낀점과 정말 flutter를 이용한 앱개발이 쉬운것인지?

그저 트랜디한 껍데기에 불과한지? 이야기 해보겠습니다.

최근 시장에서 Flutter 로 개발한 앱들이 심심치 않게 보이고 있습니다.

기업에서도 앞다투어 트랜디한 방식의 개발을 쫒고 있습니다.

Flutter는 크로스 플랫폼 개발 프레임워크 입니다.

한마디로 이야기 하자면 Flutter를 사용한 단한번의 코딩으로 ios, android, web, macox, window 등의

개발을 쉽고 편한게? 진행할수 있습니다. 말만 듣고 보면 안쓸 이유가 전혀 없습니다.

장단점

장점이라고 한다면 원소스 코딩으로 멀티 플랫폼으로의 진출이 쉽다는것 입니다.

또한 네이티브 개발에 버금가는 속도를 보장한다고 하죠.

또한 구글의 오픈소스 skia 라이브러리를 사용해서 UI 를 렌더링 하기 때문에

ios 든 android 이든 일관된 UI 를 보장해 줍니다.

단점을 논해보자면...

일단 생각보다 빠르지 않다는 것입니다.

각종 플러그인 라이브러리 등이 붙고 하다 보니 빌드시 상당히 무거웠습니다.

멀티플랫폼을 지원하므로 기본소스가 상당히 무겁다.

ios, android 등의 네이티브 소스까지 따로 작업하게 될 경우 소스 용량이 상당히 증가한다.

현재 Flutter 를 위한 플러그인들이 많이 나와있고 특별한 기능이 아니고서야 네이티브 작업이 필요없을거라 생각했습니다. (착각)

하지만 우리는 신기하게도 매번 개발할때마다 특별한 기능을 만들고 싶어 하죠. (자의든 타의든...)

그래서 어짜피 개발시에 네이티브 소스를 건들여야 하는 불상사가 생기게 됩니다.

그렇다는 이야기는 곧 Flutter 개발자 가능 = IOS 개발가능 + Android 개발가능 이라는 공식이 성립됩니다.

또한 Flutter는 dart 라는 다소 생소한 언어를 사용하는데... 2011 년 출시하여 빛을 보지 못하다가

Flutter 와 함께 주목을 ? 받기 시작했습니다.(끼워팔기?) 당연히 Flutter를 사용하려면 dart를 배워야 하겠죠.

dart 라는 언어는 swiftUI 등과 매우 유사합니다. 바로 선언형 프로그래밍 언어 이기 때문입니다.

실제로 사용해보면 얼마안가서 편리함과 동시에 미칠듯한 중첩 괄호들로 인해 머리가 지끈거리게 됩니다.

flutter 소스는 vs 에서 구성한다.

네이티브와 인터페이스

제가 개발한 앱에서 ios 의 extension 기능을 사용하기 위해서 네이티브 코드가 필수적이었습니다.

때문에 method channel을 활성화 하고 flutter와 ios, android 의 통로를 개방해주었습니다.

생각한 대로 라면 대략 이런 구조가 만들어지게 됩니다. UI는 Flutter를 통해 일관되게 구현하고 MethodChannel을 통해 네이티브 소스와 양방향 인터페이스가 가능한 구조 입니다. 이렇게 되면 기존 네이티브 진영에 존재하는 수 많은 서드파티 라이브러리를 가져다 쓸수도 있겠습니다. 논외로 native 기반 구조에 flutter 의 공통 화면을 추가할수도 있겠습니다.

MethodChannel의 사용은 매우 간단합니다.

Flutter에서 플랫폼별 채널을 설정하고

class ConstMember {
	static const ioPlatform = MethodChannel('ioPlatform/channel123');
}

 try {
      final String result =
          await ConstMember.ioPlatform.invokeMethod('saveUserData', {"userId": prefs.getString("userId")});
 ...
 }

ios 에서 아래와 같이 설정하고

let bridgeChannel = FlutterMethodChannel(name: "iosPlatform/channel123", binaryMessenger: controller.binaryMessenger)

bridgeChannel.setMethodCallHandler({ [weak self] (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
         	
      os_log("\(call.method)")

      switch call.method {
      case "saveUserData":
          guard let args = call.arguments as? [String : Any] else {return}
          let userId = args["userId"] as! String
          self?.saveUseSpecial(userId: userId)

          result("success") //flutter로 결과를 리턴한다.
          break
              
...

이런 식으로 Flutter 와 Native 환경 간에 인터페이스가 가능합니다. 안드로이드 또한 마찬가지 입니다.

어떤 기능은 flutter 에서 구현하고 어떤 기능은 native에서 구현할지 잘 판단해서 구현해야 합니다.

앱이 커지면 굉장히 복잡도가 증가 할수 있을것 같습니다.

값 저장

간단한 값저장에 활용되는 SharedPreferences 와 UserDefaults 같은 경우 특별한 방식을 통해 저장값을 사용해야 합니다.

https://pub.dev/packages/shared_preferences 등의 플러그인을 활용하면 SharedPreferences 와 같은 기능을 Flutter 에서

활용할수 있습니다.

// Obtain shared preferences.
final SharedPreferences prefs = await SharedPreferences.getInstance();

// Save an integer value to 'counter' key.
await prefs.setInt('counter', 10);
// Save an boolean value to 'repeat' key.
await prefs.setBool('repeat', true);
// Save an double value to 'decimal' key.
await prefs.setDouble('decimal', 1.5);
// Save an String value to 'action' key.
await prefs.setString('action', 'Start');
// Save an list of strings to 'items' key.
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);

// Try reading data from the 'counter' key. If it doesn't exist, returns null.
final int? counter = prefs.getInt('counter');
// Try reading data from the 'repeat' key. If it doesn't exist, returns null.
final bool? repeat = prefs.getBool('repeat');
// Try reading data from the 'decimal' key. If it doesn't exist, returns null.
final double? decimal = prefs.getDouble('decimal');
// Try reading data from the 'action' key. If it doesn't exist, returns null.
final String? action = prefs.getString('action');
// Try reading data from the 'items' key. If it doesn't exist, returns null.
final List<String>? items = prefs.getStringList('items');

//android
val prefs = context.getSharedPreferences("FlutterSharedPreferences", Context.MODE_PRIVATE)
val userId = prefs.getString("flutter.userId", "") //flutter. prefix를 붙혀야 한다

//ios의 경우
let userDefaults = UserDefaults.standard
let userId = defaults?.string(forKey: "flutter.userId") //flutter. prefix를 붙혀준다

플랫폼별 저장위치가 상이하다

이밖에도 다양한 선택의 문제에 부딛히게 됩니다. 로그인을 예를 들어 보겠습니다. 로그인 기능을 구현하고 싶은데 화면은 Flutter 로 구현할지 네이티브를 따라 갈것인가? 화면만 flutter로 두고 기능은 네이티브로 구성할 것인가? flutter 로 전부 구현할 것인가?(가능하다면)

저 같은 경우 해당 기능을 구현하기 위한 plugin 이 지원된다면 우선 flutter로 최대한 구현하기로 하였습니다. 그 편이 유지보수 측면에서도 좋을거라 판단 했기 때문입니다.

모든것이 위젯

Flutter는 (dart 언어) 위젯이라 칭하는 오브젝트를 통해 UI를 구성합니다. Flutter의 특징을 말할때 꼭 나오는것이 바로 이 위젯의 역할 입니다. 모든것이 위젯이라는 말이 있을정도로 Flutter UI는 위젯들이 모여 하나의 화면을 구성하고 있습니다.

기존의 명령형 프로그래밍에 익숙한 분들이라면 굉장히 난해할수 있는 구조 입니다.

위젯를 두고 위젯에 위젯에 위젯을 구현... 하여 하나의 화면을 만들게 됩니다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: _genColor,
          shadowColor: Colors.white,
          title: Text(_title),
        ),
        backgroundColor: _genColor,
        body: ListView(
          children: [
            //top view
            Column(
              children: [
                SizedBox(
                  height: 20,
                ),
                Container(
                  color: _genColor,
                  height: 60,
                  alignment: Alignment.center,
                  child: Text(
                    '앱에서 스팸문자를 방어중 입니다.',
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
                  ),
                ),
                // Container(
                //   color: _genColor,
                //   height: 100,
                //   alignment: Alignment.center,
                //   child: Image.asset(
                //     'assets/images/img_home_sheld.png',
                //     width: 50,
                //     height: 50,
                //   ),
                // ),
                SizedBox(
                  height: 20,
                ),
              ],
            ),
            //recycle items
            getItemContaner(_patternImg, "유효패턴을 등록하고\n스팸을 방어하세요.", "패턴 설정", 0),
            getItemContaner(_aiImg, "ai를 통해 더 효과적으로\n방어할수 있습니다.", "철벽방어 이동", 1),
            //getItemContaner(_historyImg, "스팸처리 히스토리를 볼수 있어요.", "얼마나 많이 받고있을까요?", 2),
            getItemContaner(_settingImg, "일반 설정을 할수 있어요.", "설정하러가기", 3),
            SizedBox(
              height: 20,
            ),
          ],
        ));
  }

처음에는 어색했지만 익숙해지고 보니 이것처럼 간단한게 없을 정도로 편리했습니다. 또한 매우 직관적 입니다. 가로 세로 몇칸의 테이블 구조를 만들고 싶다? Column 과 Row 위젯을 활용하면 됩니다. 사이즈 여백을 두고 싶은데... SizedBox를 활용하거나 Spacer를 활용하면 됩니다. 뭘 넣어야 할지 모르겠는데 뭔가 큰 틀을 두고 싶은데... Container 를 사용하면 됩니다. 이렇게 위젯 하나하나의 타이틀이 굉장히 직관적이라 생각 하는대로 바로바로 표현이 가능했습니다.

Thread 관리

Flutter는 기본 구조가 싱글스레드로 동작합니다. async, await, future, isolate 등의 기법을 활용하여 멀티 스레딩 스러운 비동기 처리를 하게 됩니다. 앱에서 필수적으로 멀티스레딩 처리가 필요하다면 네이티브단에서 구현하는것이 좋겠습니다.

버전코드 관리

네이티브 버전코드를 아무리 고쳐도 변경점이 없길래 무슨 문제인지 한참 찾았던 적이 있습니다. Flutter의 pubspec.yaml 파일의 version 1.0.1+2 형태의 소스 수정을 통해 버전코드를 통일할수 있습니다.

version name = short : 1.0.1
version code (build code) : 2

마치며

Flutter는 배우기 쉽고 편리합니다. 일관되게 UI를 통일할수 있으며 관리가 용이 합니다.

하지만 네이티브와 연결 하려고 한다면 복잡도가 상당히 증가하게 됩니다. flutter 소스, ios 소스, android 소스 필연적으로 기본 3벌을 관리해야 되는 불상사가? 생기게 됩니다. 배포 또한 플랫폼별 따로 따로 이기 때문에 굉장히 공수가 많이 들어간다고 보면 됩니다.

즉 flutter 를 써서 한방에 모든일이 해결될것 같지만... 3명의 일을 혼자할수도 있다. 정도로 마무리 하겠습니다.

참고문서

https://aws.amazon.com/ko/what-is/flutter/

https://docs.flutter.dev/platform-integration/android/platform-views

https://docs.flutter.dev/platform-integration/platform-channels?tab=type-mappings-kotlin-tab

ios 네이티브 앱에 flutter 사용하기

코드와트 — Sun, 2 Jul 2023 18:00:33 +0900

네이티브 ios 에 flutter 적용하기

소개

안녕하세요. 김과자 입니다.

이전에 소개 해드린 안드로이드 flutter 모듈 사용에 관하여 참고 하시고

ios 도 오늘 소개 해드리는 방법으로 테스트 해보시기 바랍니다.

본문

안드로이드와 마찬가지로 모듈을 만들어줍니다.

방법은 아래에

↓↓↓

2023.07.01 - [개발 코딩 정보 공유/플루터 Flutter] - 안드로이드 네이티브앱에 flutter 소스 사용하기

module과 네이티브 소스는 아래와 같이 셋팅합니다. (제 기준)

[최상위폴더]

-> [module]

-> [native project]

우선 기존의 소스에 pod을 셋팅해야 합니다.

pod 셋팅이 되어있다는 가정하에…

pod파일에 아래의 코드를 추가합니다.

platform :ios, '14.0'

# 이부분 추가
#flutter_application_path = '../ios_ui_module'
#load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'my project' do
  use_frameworks!
  #pod 'Alamofire'
  #pod 'AlamofireImage', '~> 4.1'
  pod 'SwiftyJSON'
  pod 'SnapKit', '~> 5.6.0'
...

# 이부분 추가
#install_all_flutter_pods(flutter_application_path)
end

#이부분 추가
#post_install do |installer|
#  flutter_post_install(installer) if defined?(flutter_post_install)
#end

이렇게 pod 파일에 추가하시고 아래의 커맨드를 입력합니다.

> pod install

만약에 잘 안되시면 pod.lock 을 날리고, pod 폴더도 통째로 날린후 (삭제후) 다시 pod install 진행합니다.

그리고 나서 native 소스를 열어줍니다.
appdelegate 에서 아래의 코드를 추가하기…
전에 확인할게 있습니다. 모듈 폴더로 가셔서 ios 코드를 살펴 봐야 합니다.
그런데 아무리 봐도 생성된 소스가 없습니다.

???

없다 없어...

당황하지 마시고... 숨겨진 파일 보기를 하셔서…

맥에서 숨겨진 파일 폴더 보기 단축키 (모든 파일 보기) : cmd + shift + .

이제야 파일이 보입니다.

ios 폴더로 진입하셔서 프로젝트를 열어줍니다.

signing 설정을 해줍시다… 자신의 계정으로 맞춰줍니다.

Signing 은 알아서 설정하자...

flutter 설정

그리고 다시 네이티브 소스를 열어보겠습니다.

appdelegate 로 오셔서

import Flutter
import FlutterPluginRegistrant
...

class AppDelegate: FlutterAppDelegate{

    //flutter
    let engineGroup = FlutterEngineGroup(name: "flutter_test_group", project: nil)
    var customEngine1: FlutterEngine?

...


func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

...
//flutter
        customEngine1 = engineGroup.makeEngine(withEntrypoint: nil,
                                               libraryURI: nil,
                                               initialRoute: "/init_page")
        GeneratedPluginRegistrant.register(with: customEngine1!)
...

*FlutterEngineGroup name 부분과 initialRoute 부분은 마음대로 하시고 알고는 계셔야 합니다.

native 소스 flutter 사용단

import Flutter

저는 화면에 진입하고 flutter와 통신하는 소스를 추가하였습니다.

적당히 viewDidLoad 쯤에 작성 하면 되겠습니다.

dart 와 통신하는 부분입니다.

//flutter
if let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).customEngine1{ //아까 appdelegate 에 추가한...
    let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
    let newsChannel2 = FlutterMethodChannel(name:channelName2, binaryMessenger: flutterViewController.binaryMessenger)

    newsChannel2.setMethodCallHandler({
        [weak self] (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in

        if(call.method == "getCurrentPageData"){ //메서드는 dart 와 맞춰주어야 합니다.
            var dataDic = [:]
            if let currentData = MapDataModule.shared.nextData{
                dataDic["title"] = "\(currentData.title ?? "")"
                if let desc = currentData.desc{
                    if(desc.count > 0){
                        dataDic["desc1"] = desc[0]
                        if(desc.count > 1){
                            dataDic["desc2"] = desc[1]
                        }

                    }
                }
                dataDic["vcId"] = currentData.id!
                dataDic["imgMain"] = currentData.icon ?? ""
            }

            result(dataDic)
        }
    })
}

let channelName2 = "com.abc.module/test_channel2"
let channelName = "com.abc.module/test_channel"

적당한 채널명도 설정합니다. dart 소스와 맞추어야 합니다.

마지막으로 페이지 이동하는 코드도 작성하겠습니다.

//대략 버튼 클릭시 실행...
getFlutterInitPage()
...

//flutter page move...
func getFlutterInitPage(){
    if let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).customEngine1{
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
        let newsChannel = FlutterMethodChannel(name:channelName, binaryMessenger: flutterViewController.binaryMessenger)

        newsChannel.invokeMethod("getInitPage", arguments: "0", result: {
                   (result) -> Void in
            print("swift->flutter: \(String(describing: result))")
        })

        flutterViewController.modalPresentationStyle = .overCurrentContext
        flutterViewController.isViewOpaque = false
        self.present(flutterViewController, animated: false, completion: nil)
      }
}

채널을 두개 설정한 이유는 하나는 보내고 하나는 받는 채널로 테스트 하기 위함 입니다.

flutter dart 소스

main.dart

route를 사용해도 되지만 이번에는 사용하지 않습니다.

import 'package:f_module_test/InfoPage.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // routes: {
      //   '/singleInputAct': (context) => const SingleInputPage(title: '111111'),
      //   '/multiButtonAct': (context) => const MultiButtonPage(title: '222222'),
      //   '/InfoAct': (context) => const InfoPage(title: '333333'),
      // },
      home: const InfoPage(title: ''),
    );
  }
}

InfoPage.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'Const.dart';

class InfoPage extends StatefulWidget {
  const InfoPage({super.key, required this.title});

  final String title;

  @override
  State<InfoPage> createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
  var _param = "empty";

  @override
  void initState() {
    super.initState();

		//채널명은 네이티브 소스와 맞추어야 합니다.
    methodChannel.setMethodCallHandler(methodHandler);
  }

/**
	Flutter -> native
	flutter 화면에서 native 데이터를 요청할 경우
*/
  Future<String?> getCurrentPageData() async {
    final dataMap =
        await methodChannel2.invokeMethod<Map>('getCurrentPageData');
		//채널명을 맞추셔야 합니다.
    print(dataMap.toString());

    setState(() {
      _param = dataMap.toString();
    });

    return "success";
  }

//처음 화면에서 진입했을경우
  Future<dynamic> methodHandler(MethodCall methodCall) async {
    print('methodHandler: ${methodCall.method}');
    if (methodCall.method == "getInitPage") { //네이티브에서 맞춘 메서드명
      print('methodHandler: ${methodCall.arguments}');

      //계산...
      //String result = getAssessResult(methodCall.arguments);
      setState(() {
        _param = methodCall.arguments;
      });
      return "received flutter";
    }
  }

  String getAssessResult(String arguments) {
    return "aaaaaaaaaaa";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '안녕하세요. 입력을 시작합니다.',
            ),
            const Image(
              image: AssetImage('assets/ic_intro.png'),
              width: 200,
              height: 100,
              fit: BoxFit.fill,
            ),
            Text(
              _param,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            TextButton(
                onPressed: () {
                  //채널을 통해 메서드 호출
                  getCurrentPageData();
                },
                child: Text("데이터가져오기"))
          ],
        ),
      ),
    );
  }
}

채널도 작성합니다.

import 'package:flutter/services.dart';

const channelName1 = 'com.abc.module/test_channel';
const channelName2 = 'com.abc.module/test_channel2';
const methodChannel = MethodChannel(channelName1);
const methodChannel2 = MethodChannel(channelName2);

결론

이렇게 해서 native 기반 flutter 와 화면 / 데이터를 주고 받는 소스를 작성해 보았습니다.

실행하면 native소스에서 설정한 channel을 통해 invokeMethod로 flutter 소스를 호출합니다.

handler 를 통해 _param 을 받고 화면에 text 로 표시해줍니다.

데이터 가져오기 버튼을 클릭하면 channel2 를 통해 native 소스의 handler 로 전달 됩니다.

끝.

안드로이드 네이티브앱에 flutter 소스 사용하기

코드와트 — Sat, 1 Jul 2023 15:47:10 +0900

native 소스에 flutter 를 적용해보자

소개

안녕하세요. 김과자 입니다.

모든 앱을 flutter 로 만들수 없습니다.

기존의 앱을 전부 뜯어 고치는것은 결코 좋은 솔루션이 아닙니다.

아래의 방법을 통해 기존의 앱에 플루터 앱을 추가해보세요.

시작

이 방법은 기존의 네이티브 소스에 flutter 공통화 화면이나 코드를 추가하는 방법입니다.

안드로이드 네이티브소스
IOS 네이티브 소스

-> 플루터 화면 / 소스 추가

Module 작업

기존의 안드로이드 스튜디오 에서 작업하셔도 되지만 저는 cmd 로 생성해주겠습니다.

만들고자 하는 폴더로 이동후

> flutter create -t module --org com.example flutter_module_test

생성된 flutter module 을 오픈하시고 gradle 설정파일에서 자바 버전을 11 이상으로 맞추어 줍니다.

android {
  //...
  compileOptions {
    sourceCompatibility 11
    targetCompatibility 11
  }
}

그리고 lib/dart 파일을 열어줍니다. 아래의 소스를 추가합니다.

단순한 테스트를 위한 코드 입니다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var _methodCallArguments = "null"; //---> 추가

  @override
  void initState() {
    super.initState();
    methodChannel.setMethodCallHandler(methodHandler); //---> 추가
  }

  Future<dynamic> methodHandler(MethodCall methodCall) async { //--> 추가

    print('methodHandler: ${methodCall.method}');
    if (methodCall.method == "aaa"){
      print('methodHandler: ${methodCall.arguments}');
      setState(() {
        _methodCallArguments = methodCall.arguments;
      });
      return "received flutter";
    }
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              _methodCallArguments,//--> 추가
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, 
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

native -> flutter 상태 값을 받기 위해 변수를 생성해줍니다.

var _methodCallArguments = "null";

채널로 들어오는 값을 처리할 handler를 지정해 줍니다.

methodChannel.setMethodCallHandler(methodHandler);

저는 aaa 라는 메서드 네임으로 콜할 예정입니다.

if (methodCall.method == "aaa"){

화면에서 어떤값을 받았는지 확인합니다.

Text(
    _methodCallArguments,//--> 추가
    style: Theme.of(context).textTheme.headlineMedium,
  ),

테스트를 위한 flutter 셋팅은 이정도면 된것 같습니다.

안드로이드에서 사용하려면 .arr 파일로 만들어야 합니다.

cmd 로 하셔도 좋고 android studio 로 flutter module 폴더를 open 한 후 build → aar 로 하셔도 좋습니다.

> flutter build aar

빌드 폴더를 보시면 잘 빌드가 된걸 보실수 있습니다.

기존의 android native 소스에서 셋팅

android studio 로 기존의 소스를 오픈합니다.

아래의 dependency 를 셋팅합니다.

android {
  // ...
}

repositories {
  maven {
    url 'some/path/my_flutter/build/host/outputs/repo'
    // This is relative to the location of the build.gradle file
    // if using a relative path.
  }
  maven {
    url '<https://storage.googleapis.com/download.flutter.io>'
  }
}

dependencies {
  // ...
  debugImplementation 'com.example.flutter_module:flutter_debug:1.0'
  profileImplementation 'com.example.flutter_module:flutter_profile:1.0'
  releaseImplementation 'com.example.flutter_module:flutter_release:1.0'
}

*** com.example.flutter_module 이경로는 자신의 경로로 맞춰야 합니다.

그 다음 manifest 에 activity 를 추가하겠습니다.

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

대략 테스트할 activity 를 열고 engine, channel 명을 작성합니다. 적당한 버튼 하나 만들겠습니다.

private const val FLUTTER_ENGINE_NAME1 = "custom1"
private val channelName = "com.example.module-test/custom" //채널명 셋팅
lateinit var channel1 : MethodChannel

엔진 초기화 입력

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        initFlutterEngine()

private fun initFlutterEngine() {
        val flutterEngine1 = FlutterEngine(this)

        flutterEngine1.navigationChannel.setInitialRoute("/custom1");

        flutterEngine1.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )

        channel1 = MethodChannel(flutterEngine1.dartExecutor.binaryMessenger, channelName)
        FlutterEngineCache
            .getInstance()
            .put(FLUTTER_ENGINE_NAME1, flutterEngine1)
     
    }

버튼 클릭시 flutter 소스로 이동

btn1.setOnClickListener {
            
            channel1.invokeMethod("aaa", "hello")

            startActivity(
                FlutterActivity
                    .withCachedEngine(FLUTTER_ENGINE_NAME1)
                    .build(this)
            )
            overridePendingTransition(0, 0)
        }

눈치 채셨겠지만 채널을 통해 flutter 소스와 통신합니다.

버튼으로 테스트 해보면 네이티브의 값이 flutter 화면으로 잘 전달된걸 확인할수 있습니다.

참고

https://docs.flutter.dev/add-to-app/android/project-setup

https://docs.flutter.dev/add-to-app/android/add-flutter-screen?tab=custom-activity-launch-kotlin-tab

Flutter 설치및 환경 셋팅 후 무지성 첫 실행

코드와트 — Thu, 15 Jun 2023 11:29:47 +0900

flutter 일단 실행해보자

소개

안녕하세요. 김과자 입니다.

어렵게 어렵게 Flutter 설치를 완료하였습니다.

지난 시간에는 오류까지 잡고 환경셋팅을 완료하였습니다. ↓↓↓

2023.06.15 - [개발 코딩 정보 공유/플루터 Flutter] - 앱개발 공룡 Flutter 설치진행 환경셋팅 방법

이번시간을 통해서 '일단 무지성 실행' 목표에 도달하게됩니다.

실행하기

일단 무지성 실행을 위해 아래의 세 가지 방법을 이용하겠습니다.

터미널
안드로이드 스튜디오
VS Code

터미널

맥 기준으로 터미널을 열어줍니다. 아래의 커맨드를 입력하겠습니다.

>flutter create my_app
>cd my_app

테스트 앱인 my_app 프로젝트를 생성해주고 해당폴더로 이동하겠습니다.

그리고 나서 실행할 devices 가 있어야 하겠죠?

저는 ios simulator 를 이용하겠습니다.

설치에 관해 자세한 사항은 여기를 확인하세요 ↓↓↓

https://docs.flutter.dev/get-started/install/macos

open -a Simulator

ios simulator

시뮬레이터가 잘 오픈되었습니다. ~~ios 을 사용하는 이유는 이쁘기 때문입니다.~~

그리고 나서 다시 터미널에서 아래의 커맨드를 입력합니다.

flutter run

앱이 잘 실행 되는것을 볼수 있습니다.

소스 코드를 수정하시고 터미널에서 키보드 ‘r’ 을 누르시면 hot reload 됩니다.

cnt + c 누르고 해당 세션 종료 합니다.

안드로이드 스튜디오 이용하기

안드로이드 스튜디오를 사용하기 위해서는 우선 안드로이드 스튜디오는 당연히 설치해 주셔야 합니다.

실행하면 왼쪽 메뉴바에 plugin 이 보입니다.

plugin 에서 marketplace 탭으로 이동합니다.

plugin

marketplace

마켓플레이스 에서 flutter 와 dart 를 검색하시고 설치해주세요.

dart, flutter 를 설치한다

그리고 나서 스튜디오를 재시작 합니다.

다시 들어온 안드로이드 스튜디오에 낮선메뉴가 보입니다.

새로운 메뉴가 보인다

자… 이걸 누르지 마시고... ???

open 으로 갑니다.

아까 만들어준 my_app 프로젝트의 루트 폴더를 open 해주세요.

main.dart가 잘 열리는걸 확인할수 있다

잘 열렸습니다. 잠시 기다리신후 상단의 메뉴바를 살펴 보겠습니다.

메뉴를 살펴보자... iphone 시뮬레이터가 보이고

ios simulator 가 보이구요.

target이 보이고

dart 를 이용해서 빌드 할 예정입니다.

실행 메뉴바도 보이고

실행, 디버그실행은 다들 알고 계시니 패스…

실행해 보시면 시뮬레이터에 잘 뜨는걸 확인할 수 있습니다.

그리고 문구를 수정해보겠습니다. 아래와 같이 변경한후...

아무 글자나 수정해주고 테스트 해본다

번개표시를 클릭해줍니다.

번개도 보인다... 이번개가 hot reload 버튼이다.

해당버튼은 hot reload 기능입니다. 즉각 적인 화면 변경이 이루어 집니다.

기존의 안드로이드는 화면 수정후 다시 빌드 다시 빌드… 의 연속이었습니다.

간단한 작업들은 편리하고 빠르게 작업할수 있겠습니다.

VS code 를 이용하는 방법

vscode 를 이용하는 방법도 있습니다.

확장버튼

확장 버튼에서 dart, flutter 를 설치해주시면 됩니다.

마찬가지로 플러그인을 설치한다

그리고 나서 F1 을 누르시면

flutter 를 검색 - new project 를 클릭한다

New Project 를 클릭합니다. 알아서 설치가 되고 template 프로젝트가 구성됩니다.

아래 메뉴에 simulator 선택바가 보인다.

하단의 시뮬레이터 및 타겟 지정도 가능합니다.

상단에 보시면 벌레 모양 디버그 실행도 보실수 있습니다.

실행 해보면 잘 되는걸 확인할수 있습니다.

결론

가장 편한 방법으로 앱개발 하시면 될것 같습니다.

저라면.. vscode 로 기본 앱을 만들고 안드로이드 스튜디오로 개발을 진행하겠습니다

참고로 저는 dart + gradle 로 진행할 것이므로 위와 같이 진행하였습니다.

안드로이드 스튜디오를 사용해서 new project 만들면 java, kotlin 등을 선택하고

빌드툴도 선택하라는… 복잡한 선택지가 등장합니다. 참고 되세요~

+ 웹에서 직접 코딩하며 실행도 가능하다

https://dartpad.dev/?id=e7076b40fb17a0fa899f9f7a154a02e8

앱개발 공룡 Flutter 설치진행 환경셋팅 방법

코드와트 — Thu, 15 Jun 2023 11:09:41 +0900

flutter 설치 오류 해결 방법을 공유한다

소개

안녕하세요. 김과자 입니다.

지난 시간에 이어서 flutter 설치 진행시 환경셋팅 방법을 알아보겠습니다.

terminal 을 이용한 설치 방법이 다소 난해하고 어려울수 있으나

해보면 오히려 직관적이고 편리하다고 느끼실 겁니다.

설치를 해보시면 몇가지 문제가 발생할수 있는데, 문제가 되는 부분을 해결해 보겠습니다.

설치 및 초기 셋팅 오류 해결

언제나 그렇듯.. 개발에서 한번에 되는게 없습니다.

이런 상황을 수시로 격다 보니 한번은 일부러 이렇게 만드나... 생각이 들기도 하였습니다.

설치 방법은 여기를 참고 하시면 됩니다. ↓↓↓

2023.03.05 - [개발 코딩 정보 공유/플루터 Flutter] - Flutter 플러터 처음 설치 부터 다시 시작하자

저는 설치 해둔 Flutter를 다시 찾아서 작업하기로 합니다.

설치해둔지 꽤 지났기 때문에 업데이트를 하는게 좋겠습니다.

우선 터미널을 열고 아래의 command 를 입력합니다.

설치 후 path 가 잡혀 있어야 합니다.

cmd> flutter

┌─────────────────────────────────────────────────────────┐
│ A new version of Flutter is available!                  │
│                                                         │
│ To update to the latest version, run "flutter upgrade". │
└─────────────────────────────────────────────────────────┘
Manage your Flutter app development.

설치된 Flutter 가 잘 살아있는걸 확인할수 있습니다.

channel 을 한번 살펴 보겠습니다.

해당 flutter 환경이 beta인지 stable 버전인지 선택할수 있습니다.

cmd> flutter channel
Flutter channels:
  master
  main
  beta
* stable

stable 로 잘 맞춰져 있습니다.

본격적으로 진행합니다. flutter upgrade 를 입력해주세요.

cmd> flutter upgrade
Upgrading Flutter to 3.10.4 from 3.7.6 in
...

한참 upgrade를 진행합니다.

업그레이드가 잘 되고 있다

저는 오류가 떴네요…

Running flutter doctor...
Could not find the Android Studio installation at the manually configured path "<path>".
Please verify that the path is correct and update it by running this command: flutter config --android-studio-dir '<path>'

To have flutter search for Android Studio installations automatically, remove
the configured path by running this command: flutter config --android-studio-dir ''

본격적으로 오류를 잡아보겠습니다.

‘Could not find the Android Studio installation at the manually configured path’

doctor 에서 안드로이드 스튜디오 경로를 찾는 부분을 설정해야 합니다.

시키는대로 아래의 cmd 를 입력하시면 됩니다.

cmd> flutter config --android-studio-dir '<자신의 android studio 경로>'

flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.10.4, on macOS 13.0 22A380 darwin-arm64, locale ko-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See <https://developer.android.com/studio/command-line> for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See <https://flutter.dev/docs/get-started/install/macos#android-setup> for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] Network resources

정확한 내용 확인을 위해 flutter doctor 를 입력하고 다시 확인해보겠습니다.

저는 다행스럽게도? 비교적 간단한 toolchain 과 licence 항목이 부족하다고 합니다.

toolchain 은 설치 하신 안드로이드 스튜디오에 가서 preperence → sdk 검색 → sdk tool 탭 → lastest 최신버전으로 다운받아 줍니다.

android studio 에서 command line tools 를 설치 해준다

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.4, on macOS 13.0 22A380 darwin-arm64, locale ko-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] Network resources

그리고 다시 doctor 에게 물어봅니다…

이번에는 licence 동의가 필요하다고 합니다.

일단 하라는대로 하겠습니다.

flutter doctor --android-licenses

아래처럼 y 를 연타 하시다 보면… 어느새 끝납니다.

다 읽고 y 를 누른다

역시나 doctor 로 다시 물어봅니다.

flutter doctor

이렇게 해서 설정및 오류 잡기가 완료 되었습니다.

flutter doctor 로 확인한 결과 셋팅이 완료되었다

사내 배포라면? ios 엔터프라이즈 배포! 를 이용하자.

코드와트 — Thu, 8 Jun 2023 10:57:38 +0900

ios 엔터프라이즈 배포 방법에 대해

소개

안녕하세요. 김과자 입니다.

사실 ios 배포는 개발자에게 부담이 또하나의 큰 작업 입니다.

방법도 다양하고 내용도 복잡합니다. 아직도 매번 헷갈리고 있습니다

지난 글을 통해 여러가지 배포 방법에 대해서 확인해보았는데요.

오늘은 그중에서도 엔터프라이즈 계정을 이용한 배포 방법에 대해서 작성해 보겠습니다.

본문

엔터프라이즈 계정 가입 필요!

너무나도 당연하지만 엔터프라이즈 멤버쉽에 가입이 되어있어야 합니다. 엔터프라이즈 계정은 일반 마켓, 스토어에 배포 하지 않는 사내, 혹은 조직내의 배포만을 위한 장치라고 생각하면 됩니다. 만약 사용중에 스토어에 배포 하고 싶어도 해당 계정으로는 배포 할수 없습니다.

만약 마켓 이나 스토어 배포를 원한다면 해당 계정을 따로 만들어야 합니다.

개발자 기업 프로그램 (엔터프라이즈 계정)

해당 멤버쉽은 돈만 있으면 다 가입할수 있는 것은 아닙니다. 엔터프라이즈 계정에 가입하기 위해서는 아래의 해당 조건이 충족 되어야 합니다.

100명 이상의 직원
법인 사업자 일것
사내 배포용으로 쓸것
매년 결재 비용을 지불할것

지난 글과도 이어질수 있다고 생각하는부분은 우선 법인으로 계정을 생성해야 합니다.

2023.06.07 - [개발 코딩 정보 공유/애플 iOS 스위프트 Xcode] - 골치아픈 애플 개발자 법인등록에 대해서 알아보자

각종 절차를 거쳐서 계정에 가입했다고 치고 다음으로 넘어가겠습니다.

빌드하기

1. Xcode 를 열고 Product > Clean Build Folder 를 우선 해주겠습니다.

product > archive 로 이동

2. 그리고 나서 앱 타겟으로 가서 버전을 확인합니다. 빌드후 앱을 구분짓는 버전이 됩니다.

버전을 체크 해준다

3. 다시 Product > 로 진입해서 Archive 를 클릭합니다.

아카이빙중

상단에 해당 progress가 표시되고 수초뒤 organize 메뉴가 등장합니다.

배포할 해당 앱버전을 선택하고 distribution 을 클릭합니다.

배포하겠습니다...

귀찮게도...여러가지 방법이 있다.

엔터프라이즈를 선택합니다. 그리고 다음 다음 쭉쭉 진행하세요.

none 으로 두고 진행

아무거나 넣어준다

그냥 두고 진행

위에 매니페스트 파일등록에 필요한 URL 지정은 'https' 로 시작하기만 하면 뭐든 상관없습니다. 아래에서 어짜피 수정하기 때문입니다.

export로 최종 경로로 ipa 파일을 추출한다

이렇게 해서 경로지정후 'export' 해주시면 됩니다.

배포

추출된 ipa파일

해당 폴더에 ipa 파일이 떨궈졌을텐데요. 엔터프라이즈 배포를 위해서는 'https' 를 가진 서버호스팅 즉 조직내의 서버공간이 필요합니다.

저희는 테스트니까 없으므로... 가장 흔한 방법인 드랍박스(dropbox)를 이용해보겠습니다.

우선 드랍박스에 가입을 해주시구요. 자신의 저장소로 이동합니다.

드랍박스에는 3가지 파일을 업로드 해야합니다.

1. AAA.ipa 파일

2. manifest.plist 파일

3. index.html 파일

위의 순서대로 업로드를 해주겠습니다.

업로드는 드래그앤 드랍으로

해당 ipa 파일을 끌어다 놓습니다. 그렇게 업로드를 하시고 공유 링크를 통해 주소를 복사해주세요.

복사한 주소를 아래와 같이 변경해서 붙혀넣어주세요.

'https://dl.dropboxusercontent.com/s/asdf234234/AAA.ipa'

manifest 예제

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>items</key>
	<array>
		<dict>
			<key>assets</key>
			<array>
				<dict>
					<key>kind</key>
					<string>software-package</string>
					<key>url</key>
					<string>https://dl.dropboxusercontent.com/s/pang7q4jl5jxn6e/AAA.ipa</string>
				</dict>
				
			</array>
			<key>metadata</key>
			<dict>
				<key>bundle-identifier</key>
				<string>com.aaa.bbb.ccc</string>
				<key>bundle-version</key>
				<string>1.0.0</string>
				<key>kind</key>
				<string>software</string>
				<key>platform-identifier</key>
				<string>com.apple.platform.iphoneos</string>
				<key>title</key>
				<string>AAA app</string>
			</dict>
		</dict>
	</array>
</dict>
</plist>

bundle-identifier, bundle-version 등도 한번씩 확인하고 저장합니다.

또한 이미지 파일등이 필요없어서 수정하였습니다.

그리고 다시 드랍박스에 올려주겠습니다.

마찬가지로 manifest 또한 공유 주소를 복사합니다. 그리고 마지막으로 index 파일을 하나 작성해주세요.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li>
			<a href="itms-services://?action=download-manifest&url=https://dl.dropboxusercontent.com/s/wk2bo77dmchv6fn/manifest.plist">다운로드</a>
		</li>
	</ul>
</body>
</html>

복사한 링크를 아래와 같은 형태로 작성하시고 생성한 index.html 에 붙혀넣습니다.

'itms-services://?action=download-manifest&url=https://dl.dropboxusercontent.com/s/asdf234sdff/manifest.plist'

그리고 다시 업로드 해주겠습니다. 최종적으로 드랍박스에 올라간 파일은 3개가 되었습니다.

이렇게 하시고 마지막으로 올라간 index.html 의 링크를 유저들에게 전달합니다.

잘 안되시면 링크를 타고 들어가서 index.html 파일을 자신의 디바이스 경로에 다운로드 받고

열어서 설치(a 태그) 텍스트를 눌러주시면 됩니다. 설치가 시작되고...

설정 > 일반 > VPN 기기관리 > 해당 인증서 > 신뢰하기 까지 진행해주신후

설치를 해주시면 됩니다.

결론

주의 사항은 반드시 메니페스트의 버전, id 값 확인하시고 링크 주소도 순서대로 진행하시어야

저 같은 삽질의 과정을 거치지 않습니다

골치아픈 애플 개발자 법인등록에 대해서 알아보자

코드와트 — Wed, 7 Jun 2023 16:36:22 +0900

애플 개발자 계정 (법인)에 대해서 알아본다

소개

안녕하세요.김과자 입니다.

애플 개발자 (법인) 등록 관련 작업은 꽤 골치가 아픈데요.

최근 등록할일이 생기는 바람에 기록도 해둘겸 내용을 정리해 보겠습니다.

몇일이 지난후 작성하는 것이라 대략적인 참고만 하시기 바랍니다.

본문

"개발자 등록 그까짓거 ~! " 하며 호기롭게 애플 개발자 센터로 접속하였습니다.

개인등록까지는 진행에 무리가 없으나 법인(조직) 등록은 꽤나 절차가 까다롭습니다.

아래는 애플에서 설명하는 개인과 조직을 나누는 기준입니다.

개발자 센터 진입

조직일 경우 아래의 준비물? 들이 추가로 필요합니다. 사전에 잘 확인하시고 등록을 진행해야 합니다.

개인과 법인의 차이

개발자 등록시 타입을 선택한다

등록 절차를 진행하면서 법인으로 선택하고 진행합니다.

중간에 DUNS 번호 입력을 하는 부분이 나오는데 DUNS 번호가 미리 준비되어 있다면 다행이지만

보통은 그렇지 않기에... 해당 번호를 신청 해야합니다.

duns 번호가 꼭 필요하다

DUNS 조회/등록

https://developer.apple.com/enroll/duns-lookup/#!/search

duns 번호 조회/ 등록이 통합되었다

해당 링크로 이동하면 duns 를 조회/등록하는 절차를 거치게 됩니다.

혹시나 발급이 되었다면 조회가 가능합니다. 없다면 등록하시면 됩니다.

DUNS 아무거나 입력하면 안됨...

등록하실때는 사업자등록증 (영문) 이 필요합니다. 없어도 되지만 보면서 하면 편합니다.

영문으로 법인 정보를 기입하고 신청하면 티켓발행 메일이 오고

보통 하루정도 기다려보시면 메일이 옵니다. (요새는 더 빠르게 진행됩니다.)

메일이 오면 DUNS가 갱신되었다고 알려줍니다.

해당 번호를 가지고 개발자 등록시 입력하고 등록을 진행합니다.

등록시에는 회사 전화번호, 이메일(회사도메인), 등이 필요합니다.

dev program 가입은 duns 만 있으면 매우 쉽다.

그리고 나서 하루이틀후 등록시 또 메일이 가고 입력한 회사 번호를 통해 애플에서 전화가 옵니다.

DUNS 번호만 잘 받는다면 나머지는 일사천리 입니다.

법인 등록에 참고가 되시길 바랍니다.

애플 페이 너무 잘~ 사용하는 방법, 어디서 어떻게 사용할까?

코드와트 — Sun, 9 Apr 2023 10:42:08 +0900

소개

안녕하세요.

드디어 상용화된 애플페이! 잘 사용하면 우리의 소비 생활을 편리하게 해줄겁니다.

삼성카드와 다르게 nfc 방식을 사용하여 아직까지 결제가능한 가맹점(단말장치)가

많지 않습니다. 현대카드만 가능하기때문에 많은 제한이 있는것도 사실입니다.

애플페이 등록은 아래에서 확인 가능합니다.

2023.04.01 - [IT 테크 기술 지식 공유] - 애플페이 나도 한번 써보자~! 일단 현대카드만

어떤기기

막상 사용하려고 보니 어떤 기기에서 사용할수 있을지 내 아이폰에서 사용이 될까?

의문이 듭니다. 아이폰은 매번 하위 기기까지 업데이트 지원을 해주기 때문에

Face ID 와 Touch ID 기능이 있는 거의 모든 아이폰에서 애플페이를 사용가능합니다.

호환되는 모델

Face ID 기능이 있는 iPhone 모델
Touch ID 기능이 있는 iPhone 모델(iPhone 5s 제외)
Touch ID 또는 Face ID 기능이 있는 iPad Pro, iPad Air, iPad 및 iPad mini 모델
Apple Watch Series 1 및 이후 모델

심지어 맥북에서도 사용가능합니다.

Touch ID 기능이 있는 Mac 모델
2012년 및 이후에 출시된 Mac 모델(Apple Pay 기능이 지원되는 iPhone 또는 Apple Watch와 함께 사용)
Touch ID 탑재형 Magic Keyboard와 페어링되어 있으며 Apple Silicon이 탑재된 Mac 컴퓨터

어떤카드

이용 제한 카드

AMEXㆍDinersㆍUnionPay 브랜드 카드
선불ㆍGiftㆍ후불하이패스 카드, Chameleon
택시ㆍ화물차 유가보조금 카드
법인명 법인 카드
일부 개인명 법인 카드 : 주유 전용, 의약품 구매, 항공권 전용, 구매 전용 카드(법인 캐시백형), 법인 중장비 선수금 결제

애플페이는 현재 현대카드 기준으로 사용이 가능합니다. 현대카드도 전부다 되는게 아닙니다.

위와 같이 이용에 제한이 있는 카드들이 있습니다. 자신의 카드를 살펴 보시고 사용이 되는지 확인하시기 바랍니다.

국내 전용 카드같은경우 현대카드 앱에서만 추가가 가능합니다.

사용방법

등록까지 마쳤다면 이제는 사용해볼 차례 입니다. 사용은 너무 간편합니다.

측면 버튼을 두번 딸깍딸깍 눌러줍니다. 바로 애플페이 지갑앱이 등장합니다.

이때 재빨리 잘생긴 내 얼굴을 갖다 대주세요. 애플페이가 결재 대기 상태로 진입합니다.

이제 nfc 애플페이가 되는 단말기에 아이폰의 상단 부분을 살포시 가져다 대줍니다.

바로 결재가 완료 됩니다. 빛의 속도로 결재가 됩니다.

어디서 결재

그럼 이제 어디서 결재해야 할까요?

아이폰의 경우 젊은 층이 많이 사용하기 때문에 많은 브랜드들이 재빠르게 시장상황에 대처 하고 있습니다.

현재 너무나 많은 브랜드들이 지원을 하고 있기 때문에 전부 소개할수 없습니다.

현대카드의 지원브랜드 페이지 참고 해주세요.

많이들 사용하는 토스앱을 통해서 주변의 애플매장을 쉽게 검색할수 있습니다.

아이폰 검색에 애플페이라고 입력합니다. 토스앱 애플매장 찾기가 나옵니다.

토스앱으로 진입하면 깜짝 놀라실 겁니다. 주변에 꽤 많은 샵에서 애플페이 사용을 지원하고 있습니다.

끝으로

편리한 애플페이 사용에 대해서 자세히 알아봤습니다. 물론 아직까지는 주로 편의점 및 프렌차이즈 위주로 사용이 가능합니다만...

영세 자영업자들은 단말기를 교체까지 해야하는 문제가 있고, 현대카드만 지원되다 보니 자주가능 동네가게나 맛집등에서 향후 사용이 가능할지는 미지수 입니다. 어찌됐든 분명한 것은 제가 사용해보니 너무 편리하다는 것입니다.

자신이 아이폰+현대카드 이용자다? 그럼 무조건 사용해보시길 바랍니다.

애플페이 나도 한번 써보자~! 일단 현대카드만

코드와트 — Sat, 1 Apr 2023 18:09:29 +0900

애플페이가 국내에서도 사용가능해졌다

소개

드디어 한국에도 애플페이가 상륙하였습니다. 이미 2014년 부터 사용중이던 해외와는 다르게

한국은 이제야 사용할수 있게 되었습니다. 애플페이의 장점은 실물 카드가 없어도 스마트폰만 있다면

바로 결제가 가능하다는 것입니다. 국내 시장을 잠식한 삼성페이처럼요.

아래에서 애플페이 등록부터 사용까지 알아보겠습니다.

본문

이번 애플페이 이슈는 아이폰 유저들에게 꽤나 좋은 뉴스거리일것입니다.

우리는 그동안 갤럭시를 쓰는 사람들을 은근히 부러워 했던 것입니다.

바로 갤럭시에 탑재된 삼성페이 때문입니다.

이제 아이폰도 카드 없이 결제가 가능합니다!

단. 현대카드만 됩니다...

저는 사용하고 있던 현대카드가 있어서 테스트가 가능했습니다.

아이폰에서 현대카드앱으로 들어가겠습니다.

현대카드앱으로 진입한다

상단 메뉴의 앱카드로 들어가보겠습니다.

자신의 카드가 보이고 누가봐도 누르고 싶게 생긴 부분이 있습니다.

앱카드 진입화면

바로 이 부분 Apple 지갑에 추가로 들어가겠습니다.

누가봐도 누르고 싶게 생긴 버튼

몇가지 약관 및 동의를 진행합니다.

동의는 가볍게 네네

언제나 처럼 네네~ 하고 동의하기 꾹 눌러줍니다.

카드 추가 진행중

카드 추가 하기가 나오면 다음을 눌러줍니다.

카드 추가 알림창

조금 뒤 해당 알림창이 뜨고 기다리면 다음 화면으로 이동합니다.

기본 카드로 사용할까?

저는 하단의 기본카드로 사용을 눌러주겠습니다.

잠금 버튼을 두번 누르면 지갑이 열린다

사용방법이 표시된 튜토리얼을 확인합니다. 기본적인 사용은 잠금버튼을 두번 딸깍딸깍 해주면 바로 애플페이가 열리게 됩니다.

이것이 지갑 앱이다

정말 간단하게 등록은 다 되었습니다. 지갑 앱에 들어가시면 잘 등록된것을 볼수 있습니다.

지갑앱을 열면 카드가 등록된것을 볼수있다

설정에서 지갑 및 apple pay 로 진입하겠습니다. 이곳에서 애플페이에 대한 각종 옵션을 설정할수 있습니다.

설정에서도 애플페이 관련 옵션을 활성화 할수 있다

익스프레스 교통카드를 활성화 하면 아이폰을 가져다 대는것만으로 교통카드 리더기에 인식하게 됩니다. 너무나 편리한 기능입니다만...

현대카드측에서는 아직은 해당 기능이 적용 안된것으로 보여집니다.

그러나 티머니 측에서는 nfc 관련 기술을 등록 하는등 행보를 보면 조만간 적용될 것으로 보여집니다.

끝으로

너무나 반가운 소식이 아닐수 없습니다.

현재는 단말기 사정상 애플페이가 결제 가능한 점포는 많지 않습니다.

젊은 세대가 아이폰을 많이 사용하는 만큼 업계에서는 빠르게 단말기 보급이 될것 으로 보입니다.

아무래도 매출에 직결되는 부분이니까요...

꼭좀 교통카드 기능도 빨리 해결주었으면 좋겠습니다.

오디오 플레이어 레코드 만들기 - 녹음 기능을 구현해보자

코드와트 — Sat, 1 Apr 2023 17:32:04 +0900

간단하게 녹음기능을 구현할수 있다

소개

안녕하세요. 지난 글에 이어서 녹음 기능을 구현해 보겠습니다.

역시나 오픈 소스를 이용하지 않고 AVFoundation을 이용해서 구현해보겠습니다.

녹음이 시작 되면 오디오 파일이 생성되고 그 파일을 재생하는 기능입니다.

2023.03.31 - [개발 코딩 정보 공유/애플 iOS 스위프트 Xcode] - 오디오 플레이어 녹음 앱 만들기? 바로 시작 해보자

2023.03.05 - [개발 코딩 정보 공유/애플 iOS 스위프트 Xcode] - 파이어베이스를 이용한 IOS 테스트 배포

녹음 기능을 구현해보자

본문

권한설정

우선 마이크에 대한 권한 설정부터 하겠습니다.

자신의 info.plist 에서 Privacy - Microphone Usage Description 의 내용을 설정 합니다.

또한 파일이 저장되고 있는지 확인하기 위해 아래의 권한도 설정해줍니다.

마이크 사용 권한을 설정합니다

file 저장 확인을 위해 권한을 설정한다

작업시작

지난 시간의 오디오 플레이어 클래스에 작업하셔도 되고 따로 만드셔도 상관없습니다.

class audioRecorderViewController : AVAudioRecorderDelegate {
//...
}

뷰 컨트롤러 클래스는 하나 만들고 delegate를 추가해주겠습니다.

func audioRecorderDidFinishRecording(_ recorder: AVAudioRecorder, successfully flag: Bool) {
    //...
}

delegate를 추가했으니 해당 함수를 구현해주겠습니다. 내용구현은 자신의 소스에 맞게 하시면 됩니다.

레코딩이 종료된후 call 되는 형태 이므로 자원정리 및 화면을 클린하는 형태의 구현을 하시면 되겠습니다.

 //rec
var aRecorder : AVAudioRecorder!
var recFile : URL!
var timer : Timer!

필요한 변수를 선언하고 녹음 파일이 저장될 경우 사용될 파일을 선언 합니다.

해당 소스는 viewDidLoad 정도에 구현하면 좋겠습니다.

//rec file
let docDic = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
recFile = docDic.appendingPathComponent("recFile.m4a")

//셋팅 조정 필요
let rSettings = [
    AVFormatIDKey : NSNumber(value: kAudioFormatAppleLossless as UInt32),
    AVEncoderAudioQualityKey : AVAudioQuality.max.rawValue,
    AVEncoderBitRateKey : 320000,
    AVNumberOfChannelsKey : 2,
    AVSampleRateKey : 44100.0] as [String : Any]

do {
  aRecorder = try AVAudioRecorder(url: recFile, settings: rSettings)
} catch let error as NSError {
    print("Error-initRecord : \(error)")
}

aRecorder.delegate = self

레코더를 초기화 하기 위해 오디오 품질 셋팅과 딜레게이트를 셋팅합니다.

오디오 플레이어와 마찬가지로 세션도 초기화 해야 합니다.

let session = AVAudioSession.sharedInstance()
do {
    try session.setCategory(.record, mode: .default)
    try session.setActive(true)

} catch let error as NSError {
    print(" AVAudioSession : \(error)")

}

세션은 category 설정을 제대로 해주셔야 합니다.

녹음을 할 것이므로 .record 를 지정하겠습니다. (혹은 .playAndRecord)

초기화 관련 작업은 완료 되었습니다.

녹음 버튼을 하나 두고 아래의 코드를 실행하겠습니다.

sender.setBackgroundImage(UIImage(systemName: "stop"), for: .normal)
aRecorder.record()
timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updateRecordTime) , userInfo: nil, repeats: true)

놓친 부분이 있습니다. 녹음을 진행하면서 화면에 현재 progress 를 업데이트 하는 부분 입니다.

@objc func updateRecordTime() {
    if(aRecorder.isRecording){
        print("\(audioRecorder.currentTime)")
    }
}

이게 전부 입니다. 정말 간단하게 녹음기능을 구현완료 하였습니다.

녹음기능을 구현하면 이게 제대로 저장되고 있는지 궁금합니다.

파일 저장 확인

자신의 테스트 아이폰을 연결합니다. finder를 여시고 아이폰의 탐색창으로 이동합니다.

이런식으로 왼편에 자신의 아이폰이 보이실겁니다.

그리고 파일 탭으로 이동하셔서 자신의 앱 아래의 하위 파일을 확인합니다.

제대로 되었다면 우리가 지정한 recFile 이 저장되어 있을것입니다.

끝으로

오디오 플레이/녹음 기능을 구현해 보았습니다.

꽤나 간단해서 오픈소스를 사용할 필요가 없습니다.

참고문서

https://developer.apple.com/documentation/avfoundation/audio_playback_recording_and_processing

오디오 플레이어 녹음 앱 만들기? 바로 시작 해보자

코드와트 — Fri, 31 Mar 2023 18:27:12 +0900

오디오플레이어를 개발해보자

소개

안녕하세요.

프로젝트를 진행하며 참고 내용을 공유 합니다.

오늘은 오디오 관련 음악파일을 재생, 녹음도 하는 그러한 앱을 만들어보겠습니다.

따로 open source를 쓰지는 않고 기본적인 AVFoundation 을 이용하도록 하겠습니다.

본문

AVFoundation 문서를 확인해보자

우선은 Play 부터 시작해보겠습니다.

첫번째는 음성녹음 ViewController 를 만들고 변수를 선언하겠습니다.

var aPlayer : AVAudioPlayer!
var playFile : URL!
var timer : Timer!

AVAudioPlayer 와 URL 를 이용해서 작업해보도록 하겠습니다.

재생할 mp3 파일을 가져와서 우리의 프로젝트 하위 경로에 넣어주도록 합니다.

playFile = Bundle.main.url(forResource: "sample_test", withExtension: "mp3")

Bundle.main.url 을 통해 해당 경로를 가져오도록 하겠습니다. 반드시 확장자도 붙혀주셔야 합니다.

그리고는 세션을 설정해 주겠습니다.

let aSession = AVAudioSession.sharedInstance()
do {
    try aSession.setCategory(.playback, mode: .default)
    try aSession.setActive(true)

} catch let error as NSError {
    print(" aSession : \(error)")

}

session 의 경우 싱글턴 instance로 play , recording 이 같이 사용할 경우

상황에 맞게 Category를 변경해서 사용해야 합니다.

아래에서 자세히 알아보겠습니다.

do {
    aPlayer = try AVAudioPlayer(contentsOf: playFile)
} catch let error as NSError {
    print("\(error)")
}

aPlayer.delegate = self
aPlayer.prepareToPlay()
aPlayer.volume = 1.0

다음은 AVAudioPlayer 를 초기화 해주겠습니다. audioPlayer.delegate = self 를 보니

빠트린게 있군요.

class AudioViewController: AVAudioPlayerDelegate {
//...
}

delegate 구현도 빼놓지 않습니다.

play를 위한 기본적인 셋팅이 완료 되었습니다.

Storyboard 상에서 button 을 하나 만들고 클릭시 아래의 코드와 연결 시켜줍니다.

if sender.currentBackgroundImage?.accessibilityIdentifier == "play" {
    initSession(.playback)
    aPlayer.play()
    playBtn.setBackgroundImage(UIImage(systemName: "pause"), for: .normal)
    timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updatePlay), userInfo: nil, repeats: true)
}else{
    if(aPlayer.isPlaying){
        aPlayer.pause()
        playBtn.setBackgroundImage(UIImage(systemName: "play"), for: .normal)
    }
}

play 버튼 하나로 pause 와 토글 할것이기 때문에 저는 위와 같이 작성하였습니다.

initSession(.playback) 은 위에서 작성한 session 의 category를 변경하고 초기화 하는 function을 말하는 것입니다.

playImgBtn 을 통해 버튼의 play, pause 등의 이미지를 변경하도록 하겠습니다.

그 아래에 보시면 progressTimer가 보입니다. timer를 지정하여 play 진행에 따라 시간을 업데이트 하도록 하겠습니다.

@objc
func updateTime(){
    if(aPlayer.isPlaying){
    	print(" \(aPlayer.currentTime)")
    }
}

마지막으로 delegate 설정 했던것을 기억하면서 audioPlayerDidFinishPlaying 함수를 구현합니다.

func audioPlayerDidFinishPlaying(_ player: AVAudioPlayer, successfully flag: Bool) {
    timer.invalidate()
    aPlayer.currentTime = 0
    playBtn.setBackgroundImage(UIImage(systemName: "play"), for: .normal)
    print("play 종료")
}

이 부분에서는 play가 끝난후 정리하는 동작을 작성하면 되겠습니다.

이렇게 해서 간단한 오디오 player 기능이 완성되었습니다.

주의할점은

session 의 category 부분을 꼭 play에 맞게 셋팅해주셔야 하겠습니다.

playback 으로 해주면 play - resume이 가능하고,
playAndRecord 로 해주면play - resume이 불가능합니다.

글이 길어져서 다음글에서 recording 기능을 작성해 보겠습니다.

끝으로

AVFoundation 을 통해 간단하게 오디오 플레이어를 구현하였습니다.

오디오 관련 기능을 구현할때 참고가 되면 좋겠습니다

참고문서

https://developer.apple.com/documentation/avfoundation/audio_playback_recording_and_processing

짭플펜슬 로렌텍 펜슬 RRT-412 사용기. 과연 가성비는?

코드와트 — Thu, 30 Mar 2023 18:48:49 +0900

짭플펜슬 rrt-412를 리뷰한다

소개

아이패드를 구매하면 가장 아쉬운것이 애플 펜슬 입니다.

정품을 구매하자니 너무 비싸고, 부담되는게 사실 입니다.

그래서 많은 분들이 대안으로 쓸 펜슬을 찾고 있는데요.

그중에서 가성비로 유명한 로렌텍사 펜슬(스타일러)의 사용기를 작성해보겠습니다.

스펙

가격은 2만원후반 3만원초반대 입니다.

스펙은 아래와 같습니다. 당연히 무선충전은 지원하지 않습니다.

필압 기능 또한 없습니다. 우린 가성비니까요.

스펙이 꽤 좋다

그래도 USB-C 타입의 충전을 지원합니다.

배터리도 넉넉하구요.

01234

구성은 보시는 바와 같이 이것저것 많이 들어있습니다.

여분의 펜촉을 따로 주는것도 마음에 드는 부분입니다.

펜촉의 내구성이 어떨지는 알수 없으나 미리 챙겨주는게 수상합니다.

용도는?

펜슬을 구매한 이유는 아이패드를 구매하였고, 이것을 노트로 활용해보고 싶다는 이유에서 였습니다.

그리고 취미생활로 그림도 그려보고 싶었습니다. 요새 아이패드로 그림을 많이 그리시더군요.

당연히 팜 리젝션도 지원하기 때문에 편하게 글쓰고 그림 그릴수 있습니다.

0123

팜리젝션은 당연히 된다

아이패드 + 펜슬을 조합으로 사용할수 있는 많은 앱들이 있지만

저는 예전부터 사용하던 굿노트를 사용하기로 합니다.

노트를 하나열고 이렇게 저렇게 낙서를 해봅니다.

얇게 굷게 해보면서 다양한 테스트를 해보았습니다.

글씨가 부드럽게 잘 써진다

체감상 불편한 딜레이는 1도 느껴지지 않았습니다. (일반 유저 기준)

이정도면 노트용 펜슬로 단점이 없다고 느껴졌습니다만...

너무 악필이다

다음은 프로크리에이트 procreate 라는 앱을 사용해 보겠습니다.

어디서 본것은 있어서 그림 그리는데 유명한 앱을 찾아서 결제 하였습니다.

이것저것 마음대로 그림을 그린다

여러가지 그림을 그려봅니다. 스케치도 하고

샘플 그림으로 색칠도 해봅니다. pro create 는 정말 다양한 펜을 구성하고 있습니다.

실제로는 사용해보지 못할 많은 패턴의 펜촉을 사용해 볼수도 있습니다.

물론 저는 아직 어떻게 써야할지 감이 안옵니다만...

이미지를 불러와서 스케치도 해본다

사용하면서 느낀점은 "와우 정말 쓸만한걸?" 이라는 생각이 들었습니다.

다른 타 펜슬을 사용해보지 못한 관계로 비교해볼수는 없지만

이정도면 기본이상은 해준다 라고 느껴졌습니다.

우리집 마스코트 구릉이도 그려본다

약간의 아이템이 필요

사용하면서 약간의 준비가 필요하기도 했습니다.

아이패드에 그대로 사용하면 화면이 너무 미끄러워서 그림이고 뭐고 동그라미도 그리기 쉽지 않습니다.

반드시 아이패드 필기용/스케치용 일명 종이질감 보호 필름으로 교체후 사용하시길 권해드립니다.

이 필름을 사용하면 단점이 있습니다. 약간 희뿌였게 화면이 보이기 때문에 좀 답답함을 느끼실수 있습니다.

필름을 잘 골라야 한다

유리 보호 필름에도 사용해보았는데 마찬가지로 너무 미끄러워서

제 글씨가 자동으로 필기체로 변하였습니다.

배터리용량은 이정도면 훌륭하다

단점은?

펜슬을 사용하면서 단점으로는 가볍지 않은 무게 입니다.

여성분이 사용했을때는 꽤 무게감을 느낄수도 있습니다.

그리고 사용하다보면 제일 불편했던 점은 손이나 몸의 다른 부위에 닿게 되어 펜슬이

사용중에 꺼져버리는 문제 입니다. (터치로 켜고 터치로 끄게 되어있습니다.)

라이트 유저로써 한두번 겪다 보면 그러려니 하고 다시 켜고 사용하기때문에

저는 큰 타격감은 없었습니다만...

사용하는 앱에 따라서 틸트 기능이 지원된다

끝으로

이렇게 해서 일명 짭플펜슬 로렌텍 RRT-412를 리뷰해보았습니다.

이제품의 경우 무선충전이나 블루투스 기반의 연동은 불가능합니다.

그야말로 가성비로 잘 사용할수 있는 제품입니다.

그렇다고 기능이 빠지는건 아닙니다.

라이트 유저들이 사용하기에 충분한 스펙과 기능을 갖추고 있다고 봅니다.

가볍게 그림 노트필기 용도로 사용하실 분들 추천드립니다~

아이폰 vpn 비공개 릴레이 사용해보자. 그는 vpn 인가 아닌가?

코드와트 — Mon, 27 Mar 2023 18:47:16 +0900

아이클라우드+ 비공개릴레이 사용하기

소개

아이폰의 비공개 릴레이 기능은 정말 쥐도 새도 모르게 생겼습니다.

관심없는 일반 유저들은 그런게 있는지도 모릅니다.

만약 자신의 애플 계정이 아이클라우드에 유료 계정으로 가입되어 있다면

아래를 통해서 비공개 릴레이를 활용해 보셔도 좋겠습니다.

*다른 꿀팁도 참고하시기 바랍니다.

2023.03.26 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 아이폰 용량 늘리기 확보하기! 얼마나 늘릴수 있을까

2023.03.22 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 아이패드 미러링 활용법! 펜슬조합으로 필기하며 모니터링 가능!

2023.03.22 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 아이폰 미러링 화면공유 airplay 이렇게 한번 따라해보세요.

본문

아이폰 유저들은 보안을 위해? vpn 앱을 설치하고, 때론 유료 결제를 하기도 합니다.

vpn 을 쓰는 이유는 특정 사이트를 우회하거나, 혹은 특정사이트를 우회하기 위함입니다.

???????

음음음...

그게 아니고 특정사이트를 우회하거나, 보안상 자신의 ip 나 dns 정보 등을 암호화하여 보호 하기 위함 이기도 합니다.

결론 적으로는 이런 비슷한 기능을 애플에서 제공해 준다는 이야기 입니다.

무료는 아니고 아이클라우드 유료 계정에 묶여 있습니다.

아이폰에서

해당 기능은 vpn 이 아니고 그와 비슷한 기능이라고 할 수 있겠습니다.

사용법은 굉장히 간단합니다. 언제나 처럼 시스템의 설정으로 이동하겠습니다.

설정의 자신의 계정메뉴로 진입한다

맨위의 자신의 계정으로 들어갑니다. 그리고 Icloud 아이클라우드 로 진입합니다.

아이클라우드 메뉴의 비공개 릴레이가 보인다

ICLOUD+ 탭의 비공개 릴레이를 보실수 있습니다. 해당 메뉴로 진입합니다.

비공개 릴레이로 진입하면 활성화 할수 있다

비공개 릴레이를 활성화 시켜 줍니다. IP 주소 위치 메뉴로 들어가보겠습니다.

옵션을 하나 고르자

일반적인 위치 사용, 국가 및 시간대 사용 옵션이 있습니다.

국가 및 시간대 옵션을 사용하면 좀 더 광범위한 IP주소가 맵핑 되는것으로 보입니다.

맥북에서

맥북에서도 마찬가지입니다.

시스템 설정으로 진입합니다.

맥북도 똑같다

자신의 계정으로 진입합니다.

마찬가지로 아이클라우드 메뉴로 진입합니다.

자신의 계정으로 진입하여 아이클라우드에 들어간다

비공개 릴레이를 활성화 하면 끝

그리고 비공개 릴레이 메뉴를 활성화 시켜 줍니다.

이게 설정 하는 전부 입니다.

끝으로

이렇게 쉽게 VPN 비스무리한... 기능을 사용할수 있습니다.

유료이지만 대부분의 아이폰 이용자들이 아이클라우드를 많이 사용하기 때문에

해당 기능은 알고 있으면 사파리 사용시 자신의 정보를 보호하고 특정 사이트를 우회 할때 굉장히 유용할것 입니다.

물론 이건 VPN 은 아닙니다...

아이폰 용량 늘리기 확보하기! 얼마나 늘릴수 있을까

코드와트 — Sun, 26 Mar 2023 18:49:53 +0900

아이폰 용량 확보하는법

소개

아이폰을 사용하다보면 거의 100% #용량 문제에 직면 합니다.

사진의 #화질이 올라가고 동영상 촬영의 기본이 4k 인 세상입니다.

압축 기술로 용량이 많이 줄긴 하지만, 이용자의 늘어나는 추억만큼 용량부족은 필연적입니다.

오늘 몇가지 방법으로 용량을 확보해 보겠습니다.

아이폰의 다른팁 또한 확인해보시기 바랍니다.

2023.03.19 - [IT 테크 기술 지식 공유] - 아이폰 유튜브 pip 모드 사용하는 법 일반유저도 사용할수 있나?

2023.03.22 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 아이폰 미러링 화면공유 airplay 이렇게 한번 따라해보세요.

2023.03.22 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 아이패드 미러링 활용법! 펜슬조합으로 필기하며 모니터링 가능!

본문

우선 자신의 용량이 어느정도 남았는지 확인해 보겠습니다.

아이폰 설정에서 일반으로 진입합니다.

설정의 일반에서 용량정보를 확인한다

정보에 진입하시면 간략한 #용량에 대한 요약이 표시됩니다.

용량 요약정보

제 아이폰은 64기가 입니다. 너무 적죠. 그래도 사용가능 공간이 10기가 이상은 계속 유지 됩니다.

어떻게 그럴까요? 바로 아래의 방법 입니다.

애플 icloud 클라우드 활용

저같은 경우 #애플의 #아이클라우드 를 이용중 입니다. #아이폰 쓰면서 아이클라우드를 안쓰는것은 아마도 기능은 반만 쓰는 행동일것입니다. 아이클라우드는 기본적으로 5기가의 용량을 제공합니다. 이걸로는 택도 없습니다. 우리는 아이클라우드로 사진, 동영상, 각종 데이터파일을 백업할 예정 이기 때문입니다.

용량별 가격을 확인한다

처음에는 50기가 정도만 쓰셔도 #용량문제를 어느정도 해소 하실수 있습니다. 시간이 지나고 추억이 쌓이게 되면 또 모자라게 됩니다.

그때는 200기가 이상을 추천드립니다. 아이클라우드 서비스에 가입하시면 설정에서 아래와 같이 셋팅할수 있습니다.

설정에서 계정으로 들어가면 아이클라우드정보를 확인할수 있다

설정에서 애플계정을 눌러보시면 #icloud 로 진입하시고 사진은 필수로 켬으로 해놓습니다. 이렇게 해놓으면 사진과 동영상을 촬영하고 자동으로 아이클라우드에 저장하게 됩니다. 아이폰에는 최근 사진 위주로 남겨서 관리하게 됩니다. 아참 아이폰을 사용하시는 다른 가족과 아이클라우드 용량을 공유할수도 있으니 1석 2조 되겠습니다.

수동으로 용량 확보하기

설정의 일반에서 아이폰 #저장공간으로 진입합니다.

아이폰 저장공간을 확인한다

보시면 아시겠지만 카카오톡이 엄청난 용량을 먹고있습니다.

저는 한번 지웠기에 이정도인데 한번 확인하시면 매우 큰 용량을 점유중인것을 확인할수 있습니다.

당장 #카카오톡으로 들어갑니다.

카카오톡에서 맨끝 *** 탭으로 이동합니다.

카카오톡에서 앱관리 저장공간 관리로 이동한다

앱 관리에서 저장공간 관리로 이동합니다.

캐시데이터를 삭제해준다

캐시삭제 및 음악 캐시 삭제 합니다. 저는 한번 비웠기에 얼마 없습니다.

다음은 채팅방으로 이동합니다.

채팅방으로 이동합니다

특히 단톡방은 엄청난 용량을 차지 합니다. 사진과 파일을 많이 주고 받았던 채팅방으로 이동합니다.

채팅방에서 일명 햄버거 메뉴로 진입한다

일명 햄버거 메뉴를 눌러줍니다.

사진과 동영상탭

채팅방 서랍이 열리고 사진 동영상탭이 나타 납니다. 눌러줍니다.

관리하기

관리를 눌러주시면 컨펌창이 등장합니다.

모두삭제를 선택한다

필요한 것들을 저장했다면 모두 삭제를 해줍니다. 이런식으로 대화가 많고 사진, 파일 등이 많이 오간 특정 채팅방 마다 관리를 해줍니다.

이것만으로도 용량을 많이 확보 할수 있습니다.

끝으로

이렇게 용량확보 방법에 대해서 알아보았습니다.

아이클라우드를 사용하고 용량을 많이 차지 하고 있는 앱에서 캐시데이터를 삭제하고

사용하지 않는 채팅방, 사진, 동영상 데이터를 삭제 하면

꽤 많은 용량을 확보 할수 있습니다.

쓸데없이 클리너 앱 등을 사용할 필요가 전혀 없습니다.

아이패드 미러링 활용법! 펜슬조합으로 필기하며 모니터링 가능!

코드와트 — Wed, 22 Mar 2023 17:45:45 +0900

아이패드와 펜슬을 활용하여 필기작업을 모니터링한다

소개

최근에는 아이패드도 많이 보급화 되어 공부할때도 많이 사용하는것 같습니다.

인강도 듣고 필기도 하고 노트대신 활용하기도 합니다.

아이패드를 사용하면서 펜슬을 통해 필기하는것을 좋아합니다.

그런데 사용하던중... 필기하면서 누군가에게 가르쳐 주거나, 보여주고 싶은데 방법이 없을까?

모니터링 하면서 영상을 찍을순 없을까 고민하였습니다.

오늘 그 방법을 알아보겠습니다.

* 지난 시간의 내용들을 복습 하시면 해당 내용을 작업하는데 도움이 됩니다.

2023.02.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 + 태블릿 사이드카 사용법? 과연 어떻게 사용하면 좋을까?

2023.02.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 + 태블릿 유니버설(유니버셜) 컨트롤 사용법? 과연 어떻게 사용하면 좋을까?

사용방법

우선 저같은 경우는 아이패드와 일명 짭슬, 짭펜슬, 을 이용하여 필기를 합니다.

앱은 굿노트를 이용하는데요. 굿노트는 단순하고 편리하며 특히 필기감이 좋습니다.

무슨 앱을 활용하셔도 상관은 없습니다. 우선 아이패드를 맥북과 유선으로 연결해주세요.

무선도 가능하지만 정신건강에 안좋습니다.

유선으로 하는것이 속편하다

그리고 설정으로 들어가시고 디스플레이에 보시면 아래와같이 연결된것을 확인할수 있습니다.

설정의 - 디스플레이

보시면 확장된 디스플레이를 미러링으로 바꾸어 줍니다. 이때 아이패드를 선택하시고 특정 화면과 미러링 해주시면 됩니다.

반드시 패드와 모니터를 미러링 해주자

그래야 필기하면서 볼수 있겠죠?

굿노트 실행화면

굿노트는 매우 쓸만하다

그다음 저는 굿노트를 열어주겠습니다. 아이패드에서 여는것이 아닌 맥북에서 열어주겠습니다.

다시 말씀드리지만 아이패드와 맥북이나 모니터와의 미러링 입니다. 확장이나 사이드카 기능이 아닙니다!

아이패드에 필기하면 모니터에서 볼수 있다

아이패드로 필기하면서 모니터에 잘 표시되는것을 볼수 있습니다.

강의를 하거나 회의를 하거나 여러가지로 활용하시면 되겠습니다.

끝으로

오늘은 아이패와 펜슬을 이용한 모니터링 방법을 알아보았습니다.

아이패드를 활용하는 방법은 무궁무진 합니다.

직장에서, 학교에서, 일상에서 어디든 활용할수 있습니다.

아이폰 미러링 화면공유 airplay 이렇게 한번 따라해보세요.

코드와트 — Wed, 22 Mar 2023 14:03:20 +0900

아이폰 미러링 방법을 설명한다

소개

아이폰 사용중에 타 디스플레이 기기에 미러링 하고 싶으신적이 있을겁니다.

아이폰 아이패드를 TV 또는 맥으로 미러링 하기 위해 몇가지 방법이 존재합니다.

아래의 내용을 통해 알아보겠습니다.

아이폰과 맥북 사이 퀵타임플레이어를 이용한 방법

이 방법은 특정 영상 공유 하는 기능이 아닙니다. 화면 공유하는 순간부터 아이폰의 모든 동작 전체를 스트리밍 하게 됩니다.

카메라를 찍으면서 모니터링 할때에도 굉장히 유용한 기능이니 꼭 한번 따라해보시길 바랍니다.

우선 아이폰을 유선으로 연결해주세요. 그리고 맥북의 퀵타임플레이어를 찾습니다.

퀵타임플레이어를 선택한다

실행하겠습니다. 퀵타임 플레이어를 실행하고 상단메뉴의 파일 - 새로운 동영상 녹화를 클릭합니다.

새로운 동영상 녹화를 선택한다

자신의 모습이 보여도 놀라지 마세요.

동영상 녹화 화면

녹화버튼 옆의 작은 화살표 옵션버튼을 클릭합니다.

녹화의 여러가지 옵션을 선택할수 있다

자 어떠신가요? 옵션을 보면 알수 있듯이 카메라, 마이크, 화면 등을 녹화에 활용할 수 있습니다.

우리는 화면에서 아이폰을 선택하겠습니다. 당연히 자신의 아이폰 이름이 뜰것입니다.

너무 쉽게 미러링이 잘 동작한다

너무 쉽게 아이폰화면이 미러링 되고 있습니다.

카메라 촬영시 모니터링 방법으로 제격입니다.

단순 미러링 이기 때문에 화면으로 아이폰을 조작할순 없습니다.

AirPlay 를 이용하는 방법

AirPlay 를 이용하기 위해서는 동일 Wi-fi 에 연결이 필요합니다. 가정에서 사무실에서 동일한 wifi로 연결해주세요.

그리고 동영상을 고릅니다. 저는 뛰어노는 댕댕이 영상을 골랐습니다.

영상을 고르시고 공유 버튼 을 클릭합니다.

영상을 플레이하고 공유 버튼을 누른다

공유 메뉴에서 AirPlay를 선택합니다.

에어플레이 화면

플레이 가능한 기기 목록이 나오면 선택해주세요. 화면이 변하면서 잠시뒤 플레이 되는걸 볼수 있습니다.

이번에는 유튜브재생을 공유해보겠습니다.

유튜브를 실행하시고 아무 영상이나 플레이 해보겠습니다.

영상 공유 아이콘을 눌러준다

플레이 하시고 상단에 보면

화면 공유 아이콘은 이렇게 생겼다

이러한 아이콘이 보이실겁니다. 해당 아이콘을 눌러주세요.

그럼 아까와 같이 가능한 기기목록이 보이십니다.

각종 기기를 선택할수 있다

맥북은 어디로 갔을까요? AirPlay 및 블루투스 기기를 눌러주면 보이게 됩니다.

원하는 기기를 선택하면 된다

필요한 기기를 선택해주면 됩니다. 그리고 플레이 해보면 아까와 같이 플레이 공유가 잘 되는것을 볼수 있습니다.

플레이가 잘 공유된것을 볼수 있다

끝으로

AirPlay로 간단한 동영상 공유를 해보시고, 퀵타임 플레이어를 이용한 스트리밍도 해보시기 바랍니다.

간편하고 편리하게 미러링 작업을 할수 있습니다.

아이폰 유튜브 pip 모드 사용하는 법 일반유저도 사용할수 있나?

코드와트 — Sun, 19 Mar 2023 21:52:55 +0900

pip 모드를 아이폰에서 유튜브에서 사용해보자

소개

PIP 모드는 일명 화면속 화면 이라는 기능 입니다.

백그라운드로 화면을 내렸을때 작은 박스형태의 화면으로

화면 좌우측 어느 위치든 표시 되면서 재생이 유지 되는 기능입니다.

아이폰에서 유튜브 사용시 pip 모드 사용하는 방법에 대해서 알아보도록 하겠습니다.

pip 는 아이폰 설정이 필요하다

아이폰 설정

IOS 15.0 이상부터 사용이 가능합니다.

아이폰 에서 PIP 모드를 사용하기 위해서는 일단 설정으로 가셔야 합니다.

아이폰 설정 - 일반 - 화면속 화면 부분을 활성화 시켜 줍니다.

1차로 기본적인 아이폰 설정이 완료 되었습니다.

시스템 설정으로 들어간다

설정에서 일반에서 화면속화면으로 진입한다

유튜브 설정

이제 유튜브 설정 입니다. 설정에 앞서 알아두셔야 할 사항이 있습니다.

유튜브 PIP모드의 경우 유료 멤버쉽에 가입되어 있어야 사용이 가능합니다. 치사하기 짝이없습니다...

정식명칭은 YouTube Premium 입니다. 이미 해당 멤버십에 가입 해서 사용중이라면 다음 진행이 가능합니다.

* 미국(지역)에 거주중이시라면 무료임에도 PIP 모드로 사용할수 있다고 합니다.

아래 부터는 프리미엄 멤버십이 있다는 가정하에 진행합니다.

유튜브 앱을 실행 합니다. 그리고 앱 설정으로 이동합니다.

일반 메뉴로 가셔서 PIP 모드를 활성화 시켜줍니다.

유튜브 설정도 필요하다

설정의 일반으로 들어간다

PIP 모드를 활성화 시켜준다

잘 동작 하는지 실행해 보겠습니다.

유튜브 에서 재생중에 백그라운드로 이동합니다.

잘 동작되는것을 확인하였습니다. 굿~~

끝으로

이런 기능은 정말 필요한 분들만 찾아서 쓰시기 때문에

일반 유저분들은 잘 모릅니다. 저도 유튜브 멤버십만 가능하다는 것을 이번에 알게 되었습니다.

유튜브 말고도 최근 PIP 지원하는 앱들이 많으니 한번 테스트 해보시기 바랍니다.

아이폰 m1 m2 아이폰 15 출시가능성은? 왜 아이폰14 에는 안들어갔나?

코드와트 — Sun, 19 Mar 2023 17:06:47 +0900

아이폰에도 m1 m2를 탑재할날이 머지 않았다

소개

애플의 능력을 보여준 M1, M2 프로세서는 그야말로 물건입니다.

기존의 인텔 기반 cpu를 버리고 하드웨어의 모든 설계를 자사에서 해결하도록 바뀌었습니다.

이로인해 성능은 배로 오르고 전기도 덜먹는 괴물급 머신이 되어버렸습니다.

맥북같은 경우 arm 방식의 m1 m2 cpu 를 사용함으로써

아이폰, 아이패드, 맥os의 환경체계를 통일해 버렸습니다.

간단히 말해 이는 아이폰, 아이패드앱을 맥북에서도 그대로 사용할수 있는 큰 이벤트 인것입니다.

아이폰 시리즈

아이폰 14에는 왜 출시하지 못했나?

많은 유저들은 과연 아이폰 14에 m1 프로세서를 탑재할것인가? 하는 기대감이 있었습니다.

답은 아니오. 였습니다만... 발열문제, 크기문제, 전력문제 여러가지 문제들 때문에 아이폰에 적용은

무리였던듯 싶습니다.

m1 m2의 성능은 엄청나다

아이패드에 탑재

시간은 흐르고 아이패드에 M1 칩셋이 적용되었습니다.

아이패드 프로 모델인데요. M1 을 탑재한 프로 모델인 만큼 괴물같은 성능으로

깜짝 놀라게 해주었습니다. 성능이 너무 올라가서 무슨 앱을 여기에 써야할지 난감할 정도 였습니다.

대신 가격도 깡패이다

끝으로

아이폰15 에는 적용 될까?

단언 할수는 없지만 추측은 해볼수 있을것 같습니다.

아이폰 15의 가을 출시쯔음에는 M1, M2 프로세서가

아이폰에 당연히 탑재될 것으로 보여집니다.

지금까지 행태를 보면 ... 프로급, 맥스급에만 M2 프로세서를 추가하고 (급 나누기)

일반 아이폰15는 안 넣어줄수도 있을것 같습니다.

맥북 꿀팁 각종문서, 이미지 보기 어떻게 하나요? 미리보기 앱을 이용하자

코드와트 — Sun, 19 Mar 2023 16:34:37 +0900

맥북 미리보기 앱으로 거의 모든 파일을 열수 있다.

소개

업무를 보거나 어제찍은 친구들과의 사진을 본다거나

노트북으로 문서작업이나 이미지를 활용할 일이 정말 많습니다.

맥북에서는 특별히 다른 도구가 필요하지 않습니다.

정말 간단하게 거의 모든 파일을 열어볼수 있습니다.

아무 특별한 경우라면 pdf 뷰어 등을 설치하면 될것 같습니다.

아래의 글을 통해 해당 기능을 확인해 보겠습니다.

빠르게 각종 파일을 열때

미리보기 앱을 사용하는 방법은 정말 쉽습니다.

사용방법은 손가락과 스페이바만 있으면 됩니다.

파일을 선택하고 스페이스바를 눌러줍니다.

엑셀도 잘 열린다

엑셀파일임에도 불구하고 어떤 파일인지 미리보기앱으로 한눈에 알아볼수 있습니다. 엑셀 작업이 필요하시다면 물론 전문 스프레드시트 툴인 numbers 등을 이용하면 되겠습니다.

이미지 뷰어로 활용

각종 이미지를 열때도 활용할수 있습니다. 이게 어떤 이미지 인지 확인할때 정말 좋습니다. 간단하게 스페이스바 한번이면

확인이 가능합니다.

각종 스크린샷 이미지도 문제없다

파일을 선택하고 스페이스바를 누릅니다.

서명도 할수 있다

재미있는걸 해보겠습니다. 미리보기로 열기를 선택하시고 미리보기 앱을 실행합니다.

그리고는 펜 툴을 이용하여 사인도 남겨봅니다.

멋지게 서명도 해보았다

트랙패드를 이용하면 좀더 그럴듯한 글을 쓸수도 있습니다.

pdf 문서를 볼때

마찬가지로 pdf 문서 또한 간편하게 이용가능합니다. 파일을 클릭하시고 스페이스바를 눌러줍니다.

pdf 파일도 문제 없다

그럴싸한 pdf 뷰어가 열린다

문서가 열리고 사이드바에 목록이 정렬되는것을 볼수있습니다. 좀더 디테일한 사용을 원한다면 미리보기를 클릭합니다.

아까와 마찬가지로 꽤 괜찮은 PDF 뷰어가 열리고 편집을 통해 마킹도 할수 있습니다.

중요 부분을 표시 할수 있다

오픈된 문서라면 이런식으로 줄을 쳐가며 표시도 가능합니다.

글도 써진다

당연히 글 작성도 가능합니다. 꽤나 훌륭한 pdf 뷰로 활용이 가능합니다.

끝으로

간단하고 빠르고 가벼운 미리보기 앱을 통해서

각종 파일을 실행해보았습니다.

문서면 문서 이미지면 이미지 거의 모든 파일을 말 그대로 미리볼수 있습니다.

잘 활용하시면 작업하시는데 많은 도움이 될 것 입니다.

대학생용 직장인용 노트북 맥북 에어 m2 m1 소개

코드와트 — Sun, 19 Mar 2023 14:15:33 +0900

맥북에어 과연 써도 될까?

소개

애플사의 맥북은 고유 명사 입니다.

개성있고 성능좋은 노트북 그리고 감성 한스푼...

맥북은 고가의 노트북 이지만 최근 국내 대학생들도 많이 사용하고 있습니다.

맥북 에어의 경우 가격도 적당하고 휴대도 간편하여 인기를 얻고 있습니다.

아래의 내용에서 정보를 얻어가시길 바랍니다.

m1 m2 맥북을 대대적으로 홍보한다.

맥북소개

맥북은 애플사에서 출시한 노트북입니다.

특유의 디자인과 감성으로 수많은 매니아층을 형성하였습니다.

가장 많이 쓰는 모델은 맥북프로와, 맥북에어 입니다.

맥북에어는 특유의 가벼운 무게와 적정한 가격형성으로

학생부터 직장인들까지 라이트한 사용에 제격인 기기 입니다.

사용용도

맥북 에어의 경우 사용 용도가 매우 분명합니다.

라이트한 사용에 특화되어 있습니다.

언제 어디서든 휴대하고, 빠르게 작업할 수 있습니다.

워드프로세스, 스프레드시트, ppt 작업 등 일반적인 사무업무에 딱입니다.

최근 m1, m2 프로세스의 출시로 맥북 에어의 퍼포먼스가 엄청나게 증가 하였습니다.

실제로 이전에 출시된 인텔 맥북 프로급과 비교해도 월등한 성능을 보여줍니다.

맥북 에어 2022 의 긱벤치 스코어를 확인해보겠습니다.

긱벤치 스코어는 성능 참고가 가능하다

긱벤치에 따르면 싱글 코어 점수는 2561점으로 타 맥 제품들과 비슷한 퍼포먼스를 보여줍니다. 이 이야기는 각종 사무 업무, 인터넷 서핑, 쇼핑 등 일상생활용으로 딱이라는 말입니다. 멀티 코어 점수는 9566 으로 타 기기와 퍼포먼스 차이가 꽤 나고 있습니다. 게임이나, 그래픽, 영상 등의 전문 작업은 프로급으로 가시길 바랍니다. 그렇다고 안된다는말이 아닙니다. 간단한 작업들은 답답함 없이 훌륭한 성능으로 작업할수 있습니다.

싱글코어 점수

싱글코어 점수비교

멀티코어 점수

멀티코어 점수비교

보시다시피 멀티코어 점수는 비교가 불가능할 정도로 차이가 벌어집니다.

비슷한 성능은 무엇?

그렇다고 해서 이 점수가 결코 낮은 점수가 아닙니다. 비슷한 점수대를 비교해보면 아실수 있듯이 오래되긴 했지만... 서버급 Mac Pro 와도 성능이 맞먹습니다. 단순히 스코어로 성능을 비교하는게 말이 안되긴 합니다만....

직관적으로 타 기기와 비교해 볼 순 있겠습니다.

가격

M2, M1 의 차이가 꽤 납니다. 어짜피 라이트한 작업에 필요한 맥북에어라면 저렴한 가격대의 M1 으로 선택하셔도 후회가 없으실 겁니다.

가격은 비싸다면 비싸고...

저렴한 모델도 존재한다

끝으로

지난글들에서도 말하고 있지만... 맥북은 용도에 맞게 사시는것이 최선의 선택입니다.

이 맥북으로 뭘할지 한번 생각해보시면 답이 나오실겁니다.

어짜피 맥북에 윈도우를 설치하실거라면... 그냥 싼걸로

맥북 arm 윈도우11 window11 다운로드 어디서 받나요?

코드와트 — Sun, 19 Mar 2023 13:09:16 +0900

맥북에 윈도우를 설치하려면 arm 윈도우 iso가 필요하다

소개

맥북 사시고 가장 먼저 하시는 일이 있죠. 바로 윈도우 설치 입니다.

그렇습니다. 우리는 애플의 윈도우 탑재 노트북이 필요한 것입니다.

지난 글에서 윈도우 설치에 대해서는 많이 알려드렸는데요.

맥북 m1 m2 의 경우 arm 용 윈도우 ios를 다운로드 받아야 합니다.

이유는 다음글에서 확인 가능합니다.

arm 윈도우 11 다운로드 하는 방법 바로 알아 보겠습니다.

2023.02.19 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 윈도우 설치하기 최신판 - 패레럴즈 ARM M1 M2 맥에 윈도우 설치

2023.02.19 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 윈도우 설치 최신판 - UTM 활용하여 M1 M2 맥에 윈도우 설치

다운로드 방법

다운로드 방법은 매우 간단합니다. 그냥 다운로드 하면 됩니다만...

이게 잘 안되기 때문에 이글을 검색 하셨을것이라 생각합니다.

우선은 정석대로 구글에 arm 윈도우 11 다운로드 를 검색하겠습니다.

구글에서 arm 윈도우 11 다운로드를 검색한다

다른데 말고 마이크로소프트 사이트에 접속하겠습니다.

보통은 마이크로소프트 사이트에서 다운로드 받는다

Window 11 arm insider preview 는 공식 사용 버전은 아닙니다.

select 해보시면 개발버전, beta 버전을 확인할수 있습니다.

이렇게 다운로드 하지 마시고 우리는 다른 방법을 이용하겠습니다.

일종의 꼼수를 이용할건데요.

지난번 글에서 봤던 패레럴즈 (패러렐즈) 를 사용한 윈도우 설치 방법을 이용한 것입니다.

별다른 이유가 없다면 그냥 패러렐즈를 이용해 설치 하시면 됩니다만

우리같이 특수한 경우는 ios가 필요할수 있겠습니다.

패러렐즈를 검색한다

해당 사이트로 접속하겠습니다. 패러렐즈 패레럴즈 Parallels 뭐든 검색하시면 나옵니다.

무료 평가판 다운로드를 클릭한다

패러렐즈의 구매는 상당히 고가이다

무료 평가판 다운로드를 클릭합니다. 잠시후 다운로드 폴더로 인스톨 파일이 다운로드 됩니다.

패러렐즈 설치파일이 잘 다운로드 되었다

이후 작업은 그저 클릭 몇번 하시면 됩니다. 해당 설치 파일을 더블 클릭 합니다.

설치는 일사천리 클릭 몇번으로 끝난다

해당 흐름으로 진행합니다. 약관에 동의하시고 설치시작 하시면 됩니다.

윈도우 11 다운로드 및 설치 화면

잠시후 나오는 화면 입니다. 해당 화면을 보시면 알수 있듯이 Window11 다운로드 및 설치 입니다. 설치를 위해서 자동으로 내부에서 다운로드 하게 됩니다. Window 설치 를 눌러주시면 됩니다. 설치가 진행되고 윈도우 설치 까지 진행됩니다. 패러렐즈를 그냥 써보셔도 괜찮습니다만 우리는 윈도우 iso 파일이 필요한 것이었죠. 설치 되고 적당히 타이밍 봐서 꺼주시고 다운로드 폴더에 가보겠습니다.

윈도우 11 설치 파일이 잘 다운로드 되었다

딱 봐도 윈도우 설치 iso 같이 생긴 파일이 다운로드 되어 있습니다.

이렇게 쉽게 arm용 윈도우 11 설치 iso 파일을 얻게 되었습니다.

끝으로

이제 해당 윈도우 파일을 필요한곳에 적절히 활용하시면 되겠습니다.

저는 UTM 으로 설치시에 윈도우11을 활용 하고 있는데요.

해당 파일로 설치 및 사용에도 문제가 없었습니다.

실제로 다운로드 속도 또한 매우 빠른것을 알수 있는데요.

아마도 윈도우 서버에서 내려받는것이 아닌

패러렐즈 설치를 위한 서버에서 내려받는게 아닐까 합니다.

맥북 새로운 기능 스테이지 매니저 사용법

코드와트 — Fri, 17 Mar 2023 23:29:56 +0900

맥의 스테이지 매니저를 사용해보자

소개

안녕하세요. 김과자 입니다.

맥의 꿀팁을 공유하고 있습니다.

이번시간은 맥 의 재미있는 기능중에 하나인 스테이지 매니저 에 대해서 알아보겠습니다.

Stage manager 는 작업중인 화면은 띄워놓고 사용중이던 최근 앱들은 왼쪽에 자동으로 정렬됩니다.

바로바로 직관적으로 어떤 앱인지 보면서 뷰를 전환하면서 사용할수 있어서 아주 편리합니다.

2023.03.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥os 맥북 화면분할 스플릿뷰 split view 사용하기 정말쉽다

2023.03.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥os 맥북 화면 녹화 방법? 아무것도 필요없다 일단 해보자

스테이지 매니저는 잘 사용하면 정말 편리하다

사용하기

거의 설명할게 없을정도로 별게 없습니다.

시스템 설정으로 가신후 데스크탑 및 Dock 메뉴로 이동합니다.

설정의 데스크탑 메뉴로 이동한다

스테이지 매니저를 활성화 시킵니다

그리고 스테이지 매니저를 활성화 해줍니다. 사용자화 버튼을 누르셔서 입맛에 맛게 옵션질을 해도 좋습니다.

옵션을 변경 합니다

그리고 나서 사용하게 되면 아래와 같이 최근 앱들이 왼편에 정렬됩니다.

최근 앱들이 왼쪽에 잘 정렬된것을 볼수 있다

이런식으로 최근 앱과 가운데 활성화 앱을 전환하면서 자유롭게 사용이 가능합니다.

또한 그룹핑을 할수도 있습니다. 왼쪽의 앱들을 가운데 활성화창으로 옴기시고

다시 최소화 시켜 보시면 그룹핑 앱들을 볼수 있습니다.

해제도 쉽습니다. 활성화 시킨후 다시 왼쪽으로 드래그 해서 옴겨놓으면 됩니다.

끝으로

다소 생소한 스테이지 매니저라는 기능을 사용해보았습니다. 사용하던 앱들이 하단부로 전부 모이는 현상을 왼쪽에 정렬시켜

직관적으로 보면서 앱 간의 전환이 가능합니다. 정말 편리하게 이용하는 기능중에 하나 입니다.

꼭 사용 해보세요~!

맥os 맥북 화면분할 스플릿뷰 split view 사용하기 정말쉽다

코드와트 — Fri, 17 Mar 2023 22:59:17 +0900

맥 화면 분할 split view 사용법

소개

안녕하세요. 김과자 입니다.

맥 사용시 여러가지 꿀팁들을 작성 하고 있습니다.

맥을 사용 하다 보면 작은화면에 이 윈도우 저 윈도우 창이 여러개 겹쳐서 짜증나시죠?

그럴때 이 기능을 사용해보세요. 화면을 분할해서 내 마음대로 볼수 있습니다.

바로 split view 기능 입니다.

2023.03.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥os 맥북 화면 녹화 방법? 아무것도 필요없다 일단 해보자

2023.03.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 맥os 화면 캡쳐 방법? 이렇게 쉽게 된다

사용방법

화면 분할 같은 경우는 버전에 따라서 사용법이 조금씩 다릅니다.

우선 카탈리나 이후 최신의 버전을 사용하고 있다면 메뉴바 왼쪽 상단에 확장 버튼을 꾹 눌러주면 됩니다.

원하는곳에 배치 되도록 선택합니다. 한쪽으로 이동된 뷰 다음에 다른 뷰를 더 선택하면 양쪽으로 화면이 분할되며

한눈에 여러개의 창이 정리됩니다. 가운데의 이 조절 막대를 이용해서 좌우 간격을 조절 할수도 있습니다.

반반으로 하시든, 2:8로 쓰시던 자유롭게 변경이 가능합니다.

상단바를 클릭하고 이동하면 좌 우로 위치 변경도 쉽습니다.

유용한 스플릿뷰를 종료 하고 싶다면 상단메뉴바를 띄우고 해당 버튼을 눌러주시면 됩니다.

타 버전의 경우

Mojave, High Sierra, Sierra 또는 El Capitan 같은 하위 버전을 사용중이시라면 마찬가지로 아래의 버튼을 꾹 누른뒤

윈도우가 작아지면 해당 윈도우를 드래그 하고 나머지 하나의 윈도우도 선택해주면 됩니다.

안되는 경우

혹시라도 안되는 경우는 아래의 설정을 확인하시면 됩니다.

시스템 설정으로 들어가신후 데스크탑 및 Dock 으로 이동합니다.

시스템 설정의 데스크탑 및 Dock 로 진입한다

각각의 spaces가 있는 디스플레이를 활성화 시켜야 한다

이 부분을 활성화 시켜주셔야 정상 동작 하게 됩니다.

끝으로

이렇게 쉽게 어떠한 앱도 필요하지 않고 화면을 분할 하여 사용해 보았습니다.

좁은 창에서 여러가지 창을 띄우고 데이터를 참고 하면서 글을 작성하고...

이런경우 굉장히 편리 하게 사용할수 있습니다.

이번 기회에 꼭 한번 사용해보시길 바랍니다.

빙 GPT 장착! 검색엔진의 혁명인가? 과연...

코드와트 — Fri, 17 Mar 2023 16:28:20 +0900

bing 빙 gpt 채팅 기능을 사용해보자

소개

안녕하세요. 김과자 입니다.

오늘은 Microsoft의 검색엔진 Bing! 에 대해서 알아보겠습니다.

Bing은 다소 생소한 검색엔진 인데요. 그동안 사용하는 유저수는 극소수 였습니다.

최근에 MS에서 GPT 엔진을 탑재한 새로운 Bing 이 등장했는데요.

한번 사용해보겠습니다.

마이크로소프트의 빙 검색엔진

2023.02.19 - [IT 테크 기술 지식 공유/AI 정보 공유] - Chat-gpt 나도 한번 사용해보자 사용방법 무료? 유료?

2023.02.17 - [IT 테크 기술 지식 공유/AI 정보 공유] - Chat gpt 소개 뭔데 그렇게 난리인가?

챗GPT는 그야말로 혁신을 가져왔습니다. 일반에 출시 되자 마자 여기저기 논란과 이슈가 되며

사람들의 입에 오르내렸습니다. 그중 마이크로소프트는 자신들의 검색엔진 Bing에

Gpt 엔진을 탑재한다는 소식이 전해졌습니다. 초기에 사용해보려 했으나 사용이 불가능 하였습니다.

이번에는 일반에게 오픈되었기에 사용 해보고 내용을 공유합니다.

우선 빙 사이트에 접속 하였습니다.

gpt 기능 채팅을 하려면 엣지를 다운로드 하세요

안타깝게도 마이크로 소프트는 역시나... GPT 채팅 기능을 이용하려면 엣지를 다운로드 하라고 합니다.

뭔... 시대역행 끼워팔기 인지 모르겠군요. 마음에 들지 않지만 설치해보겠습니다.

다운로드중...

다운로드2...

설치중... 길다 길어

여차 저차 하여 다운로드후 설치까지 완료하였습니다. 실행과 동시에 몇가지 설정을 마치면 온전한 브라우저가 뜨게 됩니다.

맥에서 매우 윈도우 스러운 브라우저 디자인을 볼수있다

로그인을 하시고 오른쪽에 보면 빙 아이콘이 보입니다. 눌러주겠습니다. 이 아이콘이 채팅 기능을 바로 써볼수 있는 아이콘 입니다.

누르시면 오른쪽 사이드 창이 열리면서 채팅이 시작됩니다. 몇가지 옵션을 줄수 있는데 저는 균형으로 맞추고 시작하였습니다.

윈도우 엣지 설치 후 채팅 기능 옵션질

좀더 재미있는 답변을 원하신다면 창작으로 맞추고 하시면 될것 같습니다.

빙에게 블로그 글을 잘 쓰는법을 물어보았다

몇가지 질문을 해보았습니다. 깔끔하게 정리해서 답변해주었습니다. 내부에서 뭘하는지 답변이 한참 걸립니다.

내용들을 잘 요약하여 전달해줍니다. 해당 정보의 출처가 어딘지 확인해보니 각종 블로그와 기타 등을 참고 하는것으로 보입니다.

빙에게 봄철 가볼만한 여행지를 물어보았다

봄에 어디로 가면 좋을지 물어보니... 여기저기 알려주기에 괜찮은걸?~ 생각했지만...

특정 블로그에서 그대로 긁어 오는것을 확인하였습니다. 어떤 알고리즘인지... 무슨 기준으로 요약하는건지.. 알길이 없습니다.

빙에게 난해한 질문을 해보았다

난해한 질문을 하니... 난해한 답변을 합니다. 아직 이해력이 부족한가 봅니다...

아마도 한글로 질문을 해서 그런것 일수도 있겠습니다.

끝으로

Chat GPT 역시 영어로 사용할때 정확하고 쓸만한 정보를 제공해준다고 합니다.

네이버나 카카오 등 국내 IT 기업에서 빙 같은 gpt 기반 검색엔진이 나온다면

사용하기에 굉장히 유용할 것으로 보여집니다.

간단한 검색에 활용하시고 요약 정리 해주는 느낌으로 사용하면 편리 할것 같습니다.

저는... 조용히 빙을 삭제하고... 마무리 하겠습니다.

맥os 맥북 화면 녹화 방법? 아무것도 필요없다 일단 해보자

코드와트 — Fri, 17 Mar 2023 15:21:30 +0900

맥북에서 확면 녹화는 누워서 떡먹기다

소개

안녕하세요. 김과자 입니다.

지난번은 맥북에서 화면캡쳐에 대해서 알아보았습니다.

맥북에서 화면 녹화를 하고 싶다면 어떻게 해야 할까요?

걱정할 필요 없습니다. 이번에도 너무 쉽게 가능하기 때문입니다.

2023.03.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 맥os 화면 캡쳐 방법? 이렇게 쉽게 된다

맥북 맥os 화면 캡쳐 방법? 이렇게 쉽게 된다

소개 안녕하세요.김과자 입니다. 맥북 화면 캡쳐 방법은 정말 간단합니다. 어떠한 프로그램이나 앱도 설치할 필요가 없습니다. 단순히 키보드와 마우스를 이용하여 편리하게 이용할수 있습니다

www.blueswt.com

단축키를 이용한 방법
퀵타임플레이어를 이용한 방법

단축키를 이용한 방법

단축키 이용방법은 지난번 입력키와 비슷합니다.

Shift + Command + 5 을 누르면 아래와 같은 툴이 등장 합니다.

해당 화면에서 캡쳐를 할수도 있고 , 녹화를 지정해서 진행할수도 있습니다.

입맛에 맛게 옵션을 선택하시고 녹화를 진행하시면 됩니다.

이미지 캡쳐도 가능한 인터페이스가 등장한다

퀵타임플레이어 (Quick Time Player) 를 이용한 방법

이번에는 맥에 내장된 퀵타임플레이어를 이용한 방법입니다. 파인더(탐색기) 를 열고 응용프로그램으로 가보겠습니다.

아래와 같은 아이콘을 찾으시고 실행합니다.

퀵타임 플레이어는 이런 아이콘을 찾으면 된다

혹은 검색에 quick 만 치셔도 나옵니다. 확인해보시기 바랍니다.

상단의 메뉴에서 몇가지 기능을 실행할수 있다

상단 메뉴에서 여러가지 기능이 보입니다. 우리는 화면 녹화를 진행하기 위해 새로운 화면 기록을 눌러줍니다.

화면에 아까 배운 화면이 등장하면서 기록을 할수 있습니다. 저장 위치, 소리, 퀄리티 등 적정한 옵션을 선택해주시고 이용하면 됩니다.

끝으로

이렇게 쉽게 화면을 녹화하는 방법을 배워 보았습니다.

너무 쉽습니다. 다른 어떤것도 설치할 필요가 없습니다.

다음편에서도 유용한 꿀팁을 배워보겠습니다.

끝.

맥북 맥os 화면 캡쳐 방법? 이렇게 쉽게 된다

코드와트 — Fri, 17 Mar 2023 15:05:06 +0900

맥북 화면 캡쳐 방법

소개

안녕하세요.김과자 입니다.

맥북 화면 캡쳐 방법은 정말 간단합니다.

어떠한 프로그램이나 앱도 설치할 필요가 없습니다.

단순히 키보드와 마우스를 이용하여 편리하게 이용할수 있습니다.

화면 전체를 캡쳐
윈도우만큼만 캡쳐
부분지정 캡쳐

화면 전체를 캡쳐

맥 화면 전체를 캡쳐하는 방법은 정말 쉽습니다.

Shift + Command + 숫자3 을 동시에 입력하면 됩니다.

입력하는 순간 오른쪽 모서리 창에 화면 캡쳐 이미지가 뜨게 됩니다.

이미지를 클릭하여 수정해도 되고 다른곳에 저장해도 됩니다.

전체화면 캡쳐 방법

화면 캡쳐 후 모서리에 보여진다

부분적으로 지정하여 캡쳐

이번에는 부분적으로 필요한 부분만 지정하여 캡쳐 해보도록 하겠습니다.

Shift + Command + 숫자 4 를 동시에 입력하면 됩니다.

그러면 작은 화면에 부분캡쳐 지정을 위한 커서가 보이게 되는데

클릭후 쭈욱 당겨서 원하는 위치까지 끌어다 놓습니다.

마찬가지로 모서리에 이미지가 뜨고 내용은 위와 동일합니다.

부분적으로 화면을 캡쳐한다

해당 윈도우만 캡쳐

필요한 윈도우 창만 캡쳐할수 있습니다.

Shift + Command + 숫자4 + SpaceBar 입니다. 다소 손가락 찢기 스킬이 필요합니다.

커서가 카메라 모양으로 변하며 윈도우창이 활성화 됩니다. 이때 클릭을 하면 화면이 캡쳐 됩니다.

활성화된 윈도우만 캡쳐가 가능하다.

끝으로

맥북 화면 캡쳐 방법에 대해서 알아보았습니다.

특정 앱을 설치 할 필요 없이 바로 캡쳐를 할수 있어서 너무 편합니다.

저 같은 경우는 부분 캡쳐를 정말 자주 이용하는데

맥을 사용하면서 유용하게 사용해 보시길 바랍니다.

화면 녹화는 아래를 참고 하시면 됩니다.

2023.03.17 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥os 맥북 화면 녹화 방법? 아무것도 필요없다 일단 해보자

맥os 맥북 화면 녹화 방법? 아무것도 필요없다 일단 해보자

소개 안녕하세요. 김과자 입니다. 지난번은 맥북에서 화면캡쳐에 대해서 알아보았습니다. 맥북에서 화면 녹화를 하고 싶다면 어떻게 해야 할까요? 걱정할 필요 없습니다. 이번에도 너무 쉽게 가

www.blueswt.com

Flutter 플러터 처음 설치 부터 다시 시작하자

코드와트 — Sun, 5 Mar 2023 18:05:54 +0900

소개

안녕하세요.과공입니다.

새롭게 코딩관련 글을 올리려고 계획중입니다.

하나의 코드 베이스로 멀티 플랫폼개발이 가능하다?

오늘은 구글에서 내세우고 있는 플러터, 설치 부터 시작해 보겠습니다.

설치가 일반 설치 처럼 몇번 하면 되는게 아니라서 다소 집중력을 발휘 해야 합니다.

특히 터미널 등 커맨드 라인 도구 사용이 익숙치 않은 분들은 조금 어려울수도 있겠습니다.

제가 작성한 이전글 도 참고 되시기 바랍니다.

2020.06.14 - [개발 코딩 정보 공유/플루터 Flutter] - flutter (플러터) 배우기 - 개념과 기초구현

Flutter 는 구글에서 2017년 출시한 오픈 소스 크로스 플랫폼으로써 하나의 코딩으로 여러개 플랫폼에 배포가 가능합니다.

말은 간단하지만 실제 사용해보면 여러가지 복잡한 설정이 필요합니다.

그래도 간단한 코딩으로 유려한 UI 등을 구현할수 있고,

성능이 네이티브 급으로 빠르다는 장점이 있습니다.

* Flutter 설치후 xcode 에서 띄워주는것 까지 해보도록 하겠습니다.

설치

https://flutter.dev

Flutter - Build apps for any screen

Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

flutter.dev

위 경로로 이동합니다. 그리고 get started로 들어가겠습니다.

저는 맥 OS를 선택하였습니다. 자신의 OS 에 맞게 선택하시면 됩니다.

flutter get started

Operating Systems: macOS
Disk Space: 2.8 GB (does not include disk space for IDE/tools).
Tools: Flutter uses git for installation and upgrade. We recommend installing Xcode, which includes git, but you can also install git separately.

2.8기가 정도의 여유 용량과 git tool 을 사용해서 작업한다고 합니다.

* git 은 여기서 설명하지 않겠습니다.

intel apple silicon mac

저는 실리콘 맥이므로 해당 메뉴를 클릭하겠습니다.

실리콘 맥인지 모르겠으면 확인이 필요하다.

혹시 자신의 맥이 어떤 맥인지 모르겠다 하시면... 해당 링크에서 확인하길 바랍니다.

https://support.apple.com/en-us/HT211814

Mac computers with Apple silicon

Starting with certain models introduced in late 2020, Apple began the transition from Intel processors to Apple silicon in Mac computers.

support.apple.com

다운로드가 완료되면 작업 할 경로에 압출을 풀어줍니다. 아래와 같이 압축이 해제되며 flutter sdk와 예저 들이 생성됩니다.

압축을 해제한 모습

그리고 PATH를 지정해줍니다. 저는 zsh 쉘을 사용하므로...

유저 root의 .zprofile을 수정해주겠습니다. 해당 파일 혹은 배쉬 프로파일을 열어서 아래의 경로를 추가합니다.

profile 에 패스를 설정한다.

저같은경우 이런식이 되겠네요.

export PATH=$PATH:/Users/kmacbookpro/workspace_local/flutter/bin/

저장후 터미널을 열어줍니다. 그리고 echo PATH 라고 입력후 제대로 path가 잡혔는지 확인 합니다.

잘 잡혔다면 flutter doctor 라고 입력해서 테스트 합니다. flutter doctor는 해당 sdk 및 개발 환경이 잘 잡혀있는지 체크해줍니다.

flutter doctor 통해 문제를 확인한다.

잘 잡혔습니다. 우선은 XCODE로 테스트 하기 위해서 Android 오류는 차후에 잡아주겠습니다.

Xcode 셋팅을 위해 아래의 명령어를 입력 해주겠습니다.

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

open simulator

시뮬레이터를 띄워줍니다. (xcode에서 잘 사용하던)

터미널 창에 이어서 입력 하면 됩니다.

create app

샘플앱 생성을 위해 create 해주겠습니다. 해당 명령을 터미널에 입력합니다.

cd my_app

유저 루트경로에서 해당 명령으로 생성된 폴더로 이동합니다.

flutter run

실행해주겠습니다. 혹시 여기서 xcodebuild 문제 발생시 xcode에서 설정을 확인 합니다.

setting - location 으로 이동

xcodebuild 를 설정한다

이곳에서 커맨드 라인 툴을 선택해 주시면 됩니다.

그리고 다시 터미널에 flutter run 을 입력합니다.

앱이 잘 실행되었다.

끝으로

flutter 플루터 설치에 대해서 간단하게 알아보았습니다.

xcode와 시뮬레이터를 사용해보았는데 다음글에서는

안드로이드를 통해 작업해보겠습니다.

파이어베이스를 이용한 IOS 테스트 배포

코드와트 — Sun, 5 Mar 2023 10:51:16 +0900

파이어베이스를 이용해서 쉽게 배포할수 있다.

소개

안녕하세요.

오늘은 골치아픈 ios 배포 관리 중에서

firebase 를 이용한 방법을 소개하겠습니다.

전에 소개 했듯이 ios 배포 방법은 몇가지가 있습니다.

간편한건 하나도 없고 다 복잡합니다

배포방법에 대해서는 아래글을 참고 부탁 드립니다.

2020.08.29 - [개발 코딩 정보 공유/애플 iOS 스위프트 Xcode] - 알면 알수록 헷갈리는 IOS 환경 1 - 인증서와 프로비저닝(코드서명)

2020.10.02 - [개발 코딩 정보 공유/애플 iOS 스위프트 Xcode] - 알면 알수록 헷갈리는 IOS 환경 #2 - 앱 배포방식에 대해서 알아보자.

파이어베이스 (firebase) 는 구글에서 제공하는 서비스 입니다.

주로 푸시(push) 나, 분석(analytics) 서비스이용할때 많이들 사용하실 텐데요.

오늘은 distribution 부분을 사용해 보겠습니다.

순서는 아래와 같습니다.

firebase 에서 프로젝트 생성
xcode 에서 archive 로 ipa 파일 생성
distribution 테스트 유저 등록 및 파일 업로드
모바일로 해당 이메일로 접근 프로비저닝 설치
모든 유저가 프로비저닝 설치완료후 재배포

1. firebase 에서 프로젝트 생성

프로젝트 생성은 많은 분들이 알고 있기도 하고 이미 생성된 후 일것이라 생각하며...

간단하게 살펴 보겠습니다.

구글 콘솔 접속 및 프로젝트 생성

당연히 구글의 firebase console 에 접속합니다.

https://console.firebase.google.com

그리고 개발용 구글 아이디를 통해 로그인 합니다.

프로젝트를 생성하고 이름을 지정합니다. 저는 MyAppTest로 정했습니다. 나머지는 그냥 다음다음다음 해줍니다.

자 프로젝트가 완성되었습니다.

각종 프로젝트 필수 설정

개발할 앱을 추가해주겠습니다.

당연히 개발 프로젝트의 패키지명 혹은 번들 ID를 일치시켜주셔야 합니다.

GoogleService-Info.plist 파일을 다운로드 받고 해당 경로에 넣어줍니다.

그리고 시키는대로 firebase sdk 를 Swift Package Manager를 통해서 추가해줍니다.

*Swift Package Manager 사용은 여기서 설명하지 않습니다.

시키는대로 appDelegate에서 초기화 코드를 추가해줍니다.

시키는대로 xcode 설정까지 완료한 다음 메뉴의 출시 및 모니터링 으로 들어갑니다.

앱 배포 (App Distribution) 으로 들어갑니다.

드디어 배포준비가 완료 되었습니다.

2. xcode 에서 archive 로 ipa 파일 생성

다시 Xcode로 돌아오셔서 우리가 잘 하는 ipa 파일을 만들어 주겠습니다. 역시 다 아는 부분이라 생각하고 간략하게 살펴 보겠습니다.

안전하게 프로젝트를 build - clean 한번 하시고 archive 해주겠습니다. 한참 지나면 아래와 같이 배포 준비가 됩니다.

distribute 버튼을 눌러줍니다.

Ad hoc 방식 혹은 Development 방식으로 배포 설정 해줍니다.

저는 Development 방식으로 하겠습니다.

그리고 다음다음다음... 으로 한참을 기다리면 ipa 파일이 해당 경로에 떨궈지는것을 볼수 있습니다.

distribution 테스트 유저 등록 및 파일 업로드

다시 파이어베이스 콘솔로 접속 합니다.

테스터 및 그룹으로 들어가서 테스터를 추가해줍니다. 당연히 이메일 주소를 입력해주셔야 합니다.

등록완료 하고 다시 원래 탭으로 돌아 오셔서 ipa 파일을 드래그 앤 드롭으로 업로드 해줍니다.

업로드가 완료되면 자동으로 등록된 사용자들에게 이메일이 전달됩니다.

모바일로 해당 이메일로 접근 프로비저닝 설치

거의다 왔습니다. 해당 이메일로 접근 하기 위해서 모바일로 이동합니다. 당연히 모바일로 테스트 예정이므로 모바일로 접근해야 합니다.

여기서 주의 사항이 있는데요. 반드시 사파리 브라우저로 접근 하셔야 합니다.

간혹 네이버앱 등으로 접속 하시는데... 제대로 안될때가 많아서 꼭 사파리로 하시기 바랍니다.

이렇게 해서 다운로드 받고 해당 순서대로 진행하고 앱 설치, 기기등록이 완료 됩니다만 안되는경우가 있어서 설정으로 들어가 보시면 프로비저닝 설치가 떠있을것입니다. 해당을 누르고 설치 해줍니다. 그럼 여기까지 테스트 기기 등록, 앱 설치가 완료 됩니다.

모든 유저가 프로비저닝 설치완료후 재배포

여기서 끝이면 좋겠지만... 번거로운 작업이 남아있습니다. 지금까지 작업을 정리 해보자면...

앱 파일을 만들고 업로드 하고 유저이메일을 등록하고 유저의 테스트 폰으로 기기 등록을 마쳤습니다.

자 그러면 다음 작업은 쉽습니다. 기존의 xcode archive 부터 다시 하면 되는데요.

이는 해당 프로비저닝파일에 방금 등록한 테스트 유저들이 포함되야 하기 때문입니다.

똑같이 ipa 생성을 하고 업로드 해주면 자동으로 등록된 테스트 유저들에게 이메일이 다시 전달됩니다.

그리고 다시 모바일에서 앱 다운로드 / 설치 후 테스트를 진행하시면 됩니다.

간혹 기기등록이 안되어서 설치, 실행이 계속 안되는경우가 있습니다. 이때는 테스트 기기의 uuid 값을 확인하시고 그 값을 수동으로 등록 해주시고 재배포 해주면 됩니다. (가끔 안되는 유저가 꼭 발생... 왜 안되는건지... 대체 )

끝으로

간단하면 좋겠지만... 역시나 이방법또한 그렇게 간단하지만은 않습니다.

순서만 보면 기존의 배포 방식과 별 차이가 없을 수도 있지만

어떤 상황에 의해서 기존의 방식을 사용하지 못하는 경우 해당 방법으로 사용 해볼수도 있겠습니다.

실제로 테스트 할때 저는 이방법을 자주 사용하고 있습니다

애플워치se2 가성비 스팩 가격 se3 출시?

코드와트 — Tue, 28 Feb 2023 20:35:22 +0900

애플워치는 간지템...

소개

안녕하세요. 과공입니다.

최고의 가성비 킹갓 스마트 워치 애플워치 SE2 소개 입니다.

애플워치 SE2는 출시 된지는 꽤 지난 현시점에도 꾸준히 팔리고 있는 인기 모델이라 할수 있습니다.

애플이 출시한 두번째 SE 모델로써 2020년에 출시 되었습니다.

SE가 붙은 모델은 당연히 가성비 라인이지만 그럼에도 불구하고

우수한 스펙과 성능으로 젊은 층에게 꽤나 많이 판매되고 있습니다.

애플워치는 나에게?

특징

애플 워치 se2의 특징입니다.

디스플레이: 1.78인치 LTPO OLED Retina 디스플레이, 368x448 픽셀, 강화 유리
크기: 44mm 또는 40mm 케이스
프로세서: S5 SiP, 64비트 듀얼코어 프로세서
운영체제: watchOS 7
무게: 44mm 모델은 36.5g, 40mm 모델은 30.5g
배터리: 충전식 리튬이온 배터리, 최대 18시간 사용 가능
무선 기술: Wi-Fi, Bluetooth 5.0, NFC
센서: 가속도계, 근접 센서, 심박수 센서, 활동량 추적기, GPS/GLONASS/Galileo/QZSS 지원
스피커와 마이크: 내장형 스피커와 마이크
저장 용량: 32GB 내장 저장 용량
방수 및 방진: 50미터 방수, ISO 22810:2010 및 미국 국방규격 MIL-STD-810G 등급 방진

보는 바와 같이 애플워치 SE2는 보급형 라인이라 볼수 없을만큼 기존의 애플워치와도 유사한 스펙을 가지고 있습니다.

스마트 워치의 기본 틀을 이루는 디스플레이, 프로세서, 운영체제, 센서, 스피커와 마이크 등이 모두 휼륭합니다.

상시켜짐이 뭔소용?

상시 켜짐은 안된다

하지만 단점으로 꼽히는 Always-On 디스플레이 기능을 지원하지 않고 있습니다.

제가 생각할때는 굳이 단점이 될까? 생각이 듭니다.

기존의 플래그쉽 애플워치 시리즈와 차이점중에서 심전도 모니터링, 혈중산소농도 측정이 있습니다.

이 기능이 꼭 필요하면 당연히 애플워치 se가 아닌 Series8이나, Ultra 라인으로 선택하셔야 합니다.

그럼에도 뛰어난 가성비, 운동용으로는 최적

그럼에도 애플워치 SE2는 대부분의 기능이 뛰어나고,

가격도 상대적으로 타 모델에 비해 저렴하여 많은 사용자들에게 인기가 있습니다.

저 같은 경우 피트니스 용으로 구입하여 잘 사용하였습니다.

심박수를 체크하고, 신체 활동을 관리해주며, 운동과 수면추적등을 통해서 건강관리를 잘 할수 있도록 돕고 있습니다.

카카오톡, 음악듣기, 메모, 인터넷 등 많은것이 가능하지만… 굳이 저는 사용하지 않습니다.

이 작은 화면의 시계에서 그런것을 하고 싶지 않기 때문입니다…

장, 단이 있다

애플워치 SE2는 출시 이후 많은 사용자들에게 인기를 끌고 있는 만큼 장점과 단점이 명확히 존재합니다.

대부분은 긍정적인 평가가 많습니다. 애플워치 SE2의 주요 장단점을 정리해 보겠습니다.

장점:

일상에서 건강, 운동 관리가 편리하다.
디스플레이가 매우 선명하다.
아이폰과 연동을 통한 사용이 매우 편리하다.
충전 시간이 빠르고, 배터리 수명이 매우 오래 지속된다.

단점:

Always-On 디스플레이 기능이 없다.(디스플레이가 항상 켜져있지 않다는)
가성비 라고 하지만 절대 싸지 않은 가격
쓸만한 애플워치 전용 앱이 많이 없다.

끝으로

때를 잘 맞추어 가격적으로 할인만 적용된다면… 단점이 거의 없다고 봐도 무방합니다.

그럼 애플워치 SE3는 언제 출시 될까요? 공식적인 출시 예정일은 없지만,

2020년 가을에 출시된 SE2를 보면 아마도 비슷하게 출시 할 것이라는 이야기가 많습니다.

SE3는 어떤 기능으로 출시 될지… 기대해봅니다.

아이폰14 가격 13 스펙비교 15 출시일?

코드와트 — Tue, 28 Feb 2023 20:25:42 +0900

아이폰14 13 시리즈

소개

안녕하세요. 과공입니다.

오늘은 제가 좋아하는 애플 아이폰14 이야기 입니다.

아이폰 14 시리즈는 22년 9월에 출시된 따끈한 신형 모델입니다.

디자인은 기존의 아이폰13과 유사한 면이 많습니다. 거의 똑같…

전작과 프로급 모델의 비교를 통해서 살펴보겠습니다.

컬러가 왜이러냐...

컬러

우선 컬러는 무슨 기준으로 이렇게 나눠논것인지 잘 모르겠으나…

14기준 블루, 퍼플, 미드나이트, 스타라이트, 레드 5컬러가 있습니다.

14 프로의 경우 딥퍼플, 골드, 실버, 스페이스블랙이 있습니다.

저는 개인적으로 카키충으로써.. 13프로의 알파인그린이 가장 마음에 드네요

가격은 심각하다

일단 가격은 어마무시합니다. 100만원을 기본으로 넘는 스마트폰!! 와우!!!

이제는 일상적인 일이 되었습니다…

아마도 공식사이트에 이 가격에 구매할 일은 없을것 같습니다.

가장 대표적인 공식 리셀러인 쿠팡에서 가격을 확인해 보겠습니다.

가겨이 미쳤다고 본다...

117만원대로… 구매가 가능하네요.

카드 할인까지 하면 100만원 초반대로 구매할수 있을것 같습니다.

그거나 그거나… 네 비쌉니다.

디스플레이는 볼것도 없다...

디스플레이

디스플레이는 말할게 없습니다. 거의 똑같다고 보시면 되겠습니다.

사이즈도 15.4로 똑같고. Super retina xdr 또한 같습니다.

14프로에서는 상시디스플레이(always-on-display)가 추가 되었네요.

카메라는 꽤 차이가 난다.

카메라

카메라의 경우 13프로와 14의 차이가 거의 없습니다. 14와 14프로에서의 차이가 확실해 집니다.

14는 12mp, 14pro는 48mp 입니다. 꽤 큰 스펙차이가 있습니다.

카메라를 중요시 한다면 프로급으로 가야 할것 같습니다.

이번에 밀고 있는 기능으로는(일명 핸드헬드 기능) 동영상을 찍을 때 흔들림 없이 보정해주는 액션모드 를 꼽을수 있겠습니다.

광고를 보면 미친듯이 달리는 와중에도 찍힌 영상은 평온하게 달리기 하는 것을 보여줍니다.

저도 운동중에 사용해보고 싶네요.

에라이...인심 좀 써라

칩셋 CPU GPU

아이폰 14의 경우 아이폰 13프로와 동일한 Bionic A15 칩셋을 사용하였습니다.

프로급에서 사용하던것을 일반라인에 넣었으니… 큰 선심을 썼다. 라고 볼수도 있지만…

정말 꼭 그래야 했니? 묻고 싶습니다. (프로급과 일반급 급 나누기로 보입니다)

기타

그외의 것들은 별 다른 특징이 없습니다.

저 같으면 아이폰 13프로나, 카메라를 중요시 하면 14로 가도록 하겠습니다.

프로급은 굳이~~~???...

아무리 플래그십 스마트폰이지만 가격이 미친듯이 높아 지고 있습니다.

삼성 갤럭시 S 시리즈 역시 마찬가지 입니다…반도체 및 원자재 상승, 인건비, 등등 많은 요인이 있겠지만

모든걸 소비자에게 전가하는게 아닌가 씁쓸하군요.

“에라이 할인이나 많이 해줘라…”

아이폰 15의 출시는 아직 공시 발표된 바는 없으며, 이전의 기록들을 살펴봤을때 가을 키노트 발표에 추가될것으로 보여집니다…

옥토패스 트래블러2 (OCTOPATH TRAVELER) 소개 가격 체험판 스위치 ps5로 출시

코드와트 — Tue, 28 Feb 2023 20:10:06 +0900

옥토패스 트래블러2의 커버

소개

안녕하세요.과공입니다.

최근 화제가 되고 있는 ‘옥토패스트래블러2’ 게임 소개 입니다.

OCTOPATH TRAVELER 는 2018년 발매된 스퀘어 에닉스의 RPG 게임 입니다.

JRPG의 특성을 그대로 담고 있으며, 고전RPG 를 좋아하신다면 무조건 구매하셔야 하는 게임 입니다. 현대의 게임 스타일과는 사뭇 다른 스타일로 매니아층의 사랑을 받고 있습니다. 전작인 옥토패스 트래블러 는 출시와 동시에 엄청난 인기를 끌어 모으며 일본, 한국, 전세계 적으로 큰 인기를 끌었습니다. 인기의 원인은 아름답고 정교한 2d 그래픽을 활용했고, 고유한 게임 시스템, 8명의 개성있는 캐릭터들이 이끌어가는 흡입력 있는 스토리 등의 몇가지 이유가 있겠습니다.

2018년 발매 후, 전 세계 출하 및 다운로드 300만 장을 돌파한 「옥토패스 트래블러」의 시리즈 완전 신작 RPG. 도트 그래픽과 3D CG를 융합한 「HD-2D」 그래픽이 한층 더 진화한 모습을 선보인다.

옥토패스 트래블러2의 개성있는 캐릭터들

개성파 캐릭터

OCTOPATH TRAVELER 2는 당연히 전작과 동일한 개성파 여덟 명의 주인공이 등장합니다. 각각의 캐릭터가 고유한 스토리를 가지고 있고, 능력치와, 직업또한 전부 제각각 입니다. 플레이를 하면서 이 캐릭터 들이 하나둘 모이고 연결되고 목표를 가지고 플레이 하는것이 이 게임의 목적이자 재미 요소 입니다. 처음에 누구를 선택해도 연계스토리를 진행할수 있는게 큰 재미 요소 입니다.

옥토패스는 8명의 캐릭터별 스토리를 의미한다.

전작부터 플레이

“옥토패스 1 부터 해야하나요?” 전혀 상관없다고 합니다. 이번 작품은 전작과 스토리상 이어지는 것이 없고 시스템과 구성만 전승되어 새로운 대륙을 배경으로 전혀 새로운 스토리라인이 전개 된다고 합니다.

도트 스러운 2D 그래픽의 턴제 전투방식이다.

전투방식

당연히 전투는 턴제 전투 방식을 이어갑니다. 스퀘어 에닉스사의 특유의 RPG 감성, 그리고 시스템 전투 방식 모든것이 고전 RPG 스럽습니다. 고전게임을 아직도 찾아서 하신다면 후회없는 선택이 되실것 같습니다. 전투는 몬스터에게 스턴 효과를 부여하는 브레이크 시스템, 공격을 강화하는 부스팅 동료를 소환하여 같이 싸우는 시스템등 재미 요소가 가득합니다.

화려한 2D 그래픽의 극치

낮과 밤

특히나 이번 작품의 낮과 밤을 제어하는 시스템은 정말 기발한 요소 입니다.

버튼 하나로 낮과 밤을 체인지 할수 있고, 밤에만 등장하는 스토리나, 스킬등이 있습니다.

다양한 동료들을 모아보자

고전게임스러운

스퀘어 에닉스 특유의 감성을 그대로 가지고 있는 게임입니다. 전작인 옥토패스 트래블러나, 파이널 판타지 시리즈, 라이브어라이브, 드래곤퀘스트 류의 게임을 즐기신다면 한번 즐겨볼 가치가 있다고 봅니다.

낮과 밤을 마음대로 컨트롤 할수 있다.

끝으로

저도 현재 체험판을 통해서 열심히 맛보고 있는데 곧 구매할 것으로 보입니다

플랫폼은 Windows, PS4, PS5, Switch 등으로 출시되고

스위치 기준으로 가격은 6만원대를 형성하고 있으며

출시일은 2023. 2. 24 입니다.

스팀

https://store.steampowered.com/app/1971650/__II/?l=koreana

OCTOPATH TRAVELER II on Steam

This game is a brand-new entry in the OCTOPATH TRAVELER series, the first installment of which was initially released in 2018 and sold over 3 million copies worldwide.

store.steampowered.com

스위치

https://store.nintendo.co.kr/70010000058125

옥토패스 트래블러 II (OCTOPATH TRAVELER II)

store.nintendo.co.kr

지긋지긋 애드센스 ads 해결법 2차도메인 사용시 하위도메인 문제

코드와트 — Mon, 27 Feb 2023 11:50:03 +0900

애드센스 ads 문제를 처리하자

소개

안녕하세요.

과공입니다.

티스토리에 애드센스까지 잘 달아 놓고…

뭔가 찜찜한게 있으시다고요?

애드센스 관리창에 무한 표시되는 ads 문제!!

저와 직면한 문제가 비슷한 경우라면

오늘 내용이 많은 도움이 될것 입니다.

현재상황

티스토리 , 애드센스 사용중
'aaa.tistory.com' 등의 주소가 아닌 'aaa.abcd.com' 등의 주소를 사용해서 이용중
고대디 사이트를 통해 도메인사용료 지불중(타 업체도 상관없음)
'0000.com' 의 루트 도메인이 아닌 'www.0000.com' 등의 하위 도메인을 티스토리에 등록해서 사용중

사실 ads 문제는 티스토리측에서 대부분 자동으로 처리가 되어

문제가 없어야 정상입니다.

그러나 저같은 경우는 매우 특수한 상황에 걸려서

많은 삽질 끝에 ads 문제를 정상 처리 하였습니다.

이러한 방법을 공유하고자 합니다.

우선 원인을 파악해야 합니다.

원인파악

티스토리 공지사항에서 Ads 를 검색해주겠습니다.

https://notice.tistory.com/category

https://notice.tistory.com/2603

[안내] ads.txt 파일 문제가 해결됐습니다.

안녕하세요. 티스토리팀입니다. 티스토리를 사용하는 블로그의 ads.txt 파일 문제가 해결됐습니다. 기존 계획보다 다소 늦어진 점 양해바랍니다. ads.txt 파일 문제 해결 완료일 - 2021년 8월 25일 주

notice.tistory.com

해당 공지 내용을 확인해 보겠습니다.

이미 오래전에 해결이 되었다고 합니다.

그런데 우리는 왜…

ads문제 이미 해결

자신의 블로그가 티스토리 도메인을 사용하던, 2차도메인을 사용하던…

모두 잘 해결 되었다고 합니다.

우리만 안되나 봅니다.

‘루트도메인이 아닌 주소로 티스토리에 등록한 경우’ 라는게 뭐지 봤더니

제가 이와 같은 상황에 해당되었습니다.

2차 도메인을 사용중이며 (0000.com 같은) 하위 도메인으로 사용하는사람

즉 아래와 같은 경우 입니다.

루트 도메인 : '0000.com'

하위 도메인 : 'www.0000.com'

확인해보겠습니다.

그렇습니다.

저는 '0000.com' 이 아닌 'www.0000.com' 으로 등록했던 것입니다…

아마 루트 도메인으로 애드센스 등록하시고 하위 도메인으로 여러개를 운영하시는 분들도

이에 해당할 겁니다.

아니 그럼 www를 지우고 0000.com 재등록 하면되지? 라고 생각하실수 있으나...

기존 게시글이 안보일수 있고, 방문자가 줄어들고, 사이트를 재등록 해야되고. 등등 큰 문제를 야기시킬수 있으니 안 하도록 하겠습니다.

자 그럼 방법이 뭐가 있을까?…

?????

하하하하하하하

그렇습니다. 티스토리는 여기까지 도와줄수 없다고 합니다.

우리가 사용하는 티스토리는 루트 디렉토리에 직접 접근할수 없습니다.

그렇기 때문에 우리가 설정을 해야 합니다.

설정 방법

방법은 이렇습니다.

호스팅을 사용한다.
GitHub 를 사용한다.

1번 방법이 제일 편합니다. 다만 돈만 지불하면 됩니다.

우리는 2번을 이용하도록 합니다.

github는 원래 호스팅 용도는 아니고 소스를 글로벌 하게 공유하는 거대한 저장공간이라고 보시면 됩니다.

* 여기서 설명은 하지 않겠습니다.

https://github.com

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com

들어가서 계정을 생성하시고, create repository 해서

자신의 새로운 저장소를 하나 만들어줍니다.

* 계정 생성등은 여기서 설명 하지 않겠습니다.

아이디가 abcd 라면 repo 주소를 'abcd.github.io' 이런식으로 만들어주셔야 합니다.

그래야 'abcd.github.io' 를 주소창에 입력 했을때 해당 저장소로 다이렉트 접근이 가능합니다.

우리는 아래의 두가지 파일을 올려주시면 됩니다.

Ads.txt 는 아래에서 다운로드 받습니다.

자신의 애드센스 계정 관리로 접근해서 상단의 ads 해결하기 - 다운로드 하시면 됩니다.

https://www.google.com/adsense

그럼 이파일을 깃허브 상단 upload 을 누르시고 commit 하시면 됩니다.

해당 위치로 파일을 드래그 해줍니다.

아래의 커밋 버튼을 눌러줍니다.

텍스트 편집기 (메모장) 을 이용해서 아래와 같이 작성해줍니다.

<html>
<body>
<h1>Hello World</h1>
<p>This is my homepage</p>
</body>
</html>

그리고 다른이름으로 저장하시고 확장자를 html 로 저장합니다.

자 그럼 index.html 파일이 생성되었습니다.

이 파일도 역시 위에서 한것처럼 upload 해줍니다.

자 그럼 파일이 두개가 업로드 되었습니다.

잘 올라갔는지 주소를 입력해 봅니다.

'aaaa.github.io/index.html'

이렇게 말입니다.

그럼 우리가 만든 페이지가 잘 보이실 겁니다.

태그 안의 문구는 마음대로 수정하시면 됩니다.

그리고 나서 제일 중요한 DNS 설정으로 가보겠습니다.

DNS 설정은 자신이 쓰고 있는 도메인 업체에 따라 다르기 때문에

참고만 하시고 이렇게 하면 되겠구나 이해하시면 되겠습니다.

저는 고대디 Godaddy 를 이용중입니다.

고대디로 들어가서 DNS 관리로 들어갑니다.

보면 여러가지가 많은데

고대디 dns 관리

우리는 CNAME 혹은 A 레코드를 입력해야 합니다.

*이게 뭔지는 여기서 설명 하지 않겠습니다

<업체마다 다름>

우선 기본적으로 CNAME을 추가해줘야 합니다.

예를 들면 아래와 같이 입력해야 합니다.

CNAME / 빈칸 / 0000.github.io
CNAME / www / 0000.github.io
CNAME / @ / 0000.github.io

우리는 이런식으로 주소를 추가 해줘야 합니다.

그런데 제가 사용하는 고대디 같은경우 위와 같이 추가가 되지 않았습니다.

기존의 티스토리가 이미 www 하위를 사용하고 있었기 때문입니다.

아마 대부분 이렇게 되어 있을 겁니다. 이걸 지울수도 없고…

그래서 저같이 안 되는 분들은 A 레코드를 입력해야 합니다.

깃허브 a 레코드 등록

위와 같이 A 레코드들을 입력합니다.

해당 방법은 깃허브 설정 가이드에 따른것 입니다.

https://docs.github.com/ko/pages/configuring-a-custom-domain-for-your-github-pages-site/troubleshooting-custom-domains-and-github-pages#https-errors

Troubleshooting custom domains and GitHub Pages - GitHub Docs

CNAME 오류 사용자 지정 GitHub Actions 워크플로에서 게시하는 경우 CNAME 파일은 모두 무시되므로 필요하지 않습니다. 분기에서 게시하는 경우 사용자 지정 도메인은 게시 원본의 루트에 있는 CNAME 파

docs.github.com

이렇게 등록 하시고 수십분 뒤에 연결이 됩니다…

혹은 업체에 따라 몇시간이 걸릴수도 있습니다.

다시 깃허브로 와서 설정으로 들어오시면…

페이지 메뉴로 들어가겠습니다.

이 부분에 자신의 2차 도메인 주소를 입력합니다.

*당연히 루트 도메인으로 입력해야 합니다.

*우리가 지금까지 이러한 셋팅을 하는 이유는 구글 크롤러가 루트도메인 밑에 파일들을 찾을수 있도록 돕기 위함 입니다.

Save 하시면 조금뒤에 상단에 보시면 아래와같이 설정이 된것을 볼수 있습니다.

이런 문구가 떠있거나, https 보안 처리 등의 메세지가 떠도 일단 무시하시면 됩니다.

이와 같이 설정을 마쳤다면…

차 한잔을 마시고 옵니다.

자신의 루트 '0000.com' 을 접속해 봅니다.

블로그로 잘 이동 되거나, 깃허브 페이지가 보일것 입니다.

* 블로그로 이동되는경우는 깃허브에서 기본적으로 www 로 리다이렉트 시키기 때문입니다.

'0000.com/index.html'

'0000.com/ads.txt'

등을 입력해서 잘 뜨는지 확인 합니다.

그리고 할 일은 기다리는것 뿐입니다.

하루가 지난뒤 애드센스 사이트에 접속 해봅니다.

정말 사라졌습니다...

지긋지긋한 ads 문제 해결…

꼭 해결 되시길 바랍니다.

끝.

Chat-gpt 나도 한번 사용해보자 사용방법 무료? 유료?

코드와트 — Sun, 19 Feb 2023 15:32:36 +0900

소개

안녕하세요.

김과자 입니다.

시대는 변화하고 기술의 고도화는 상상할수 없을 정도가 되었습니다.

상상만 하던 것이 현실이 되어가고 있죠.

지난글에서 chat gpt에 대해서 알아보았는데요.

2023.02.17 - [IT 테크 기술 지식 공유] - bing chat gpt(챗gpt) 핵무기 발사? 국내 업계 동향은?

2023.02.17 - [IT 테크 기술 지식 공유/AI 정보 공유] - Chat gpt 소개 뭔데 그렇게 난리인가?

이번편을 통해서 chat gpt를 실제 사용해보며

확인하는 시간을 가지도록 하겠습니다.

https://openai.com/blog/chatgpt/

ChatGPT: Optimizing Language Models for Dialogue

We’ve trained a model called ChatGPT which interacts in a conversational way. The dialogue format makes it possible for ChatGPT to answer followup questions, admit its mistakes, challenge incorrect premises, and reject inappropriate requests. ChatGPT is

openai.com

현재 무료와 유료 버전이 있습니다.

무료버전 :

내가 안 바쁠 때만 처리해주겠다
그저그런 응답 속도
표준 모델 처리

유료버전 :

내가 바빠도 처리해주겠다
빠른 응답
새로운 정보에 우선 접근

유료버전은 월20달러 한화 약 2만원 돈 으로 즐기실수 있습니다.

기회가 되면 이용해보고 후기를 작성해보겠습니다.

기본사용방법

기본적인 인터페이스는 기존의 챗봇, 심심이 처럼 사용하면 되겠습니다.

매우 심플하지만 정보의 양과 질은 상당합니다.

Try chat gpt 로 들어가겠습니다.

로그인을 합니다. 혹은 sign up을 합니다.

new chat 으로 새로운 대화를 열어주세요.

기본적인 대화형 인테페이스 입니다. 대화를 통해 질문과 답변 식으로 사용해보면 됩니다.

기본적인 대화는 기본입니다.

점심메뉴를 골라주기도 하고

어려운 고민을 해결해 주기도 합니다.

글도 쓰고, 시도 써줍니다. 기사도 써줍니다.

꽤 재미있는 로맨스 소설이 완성 되었습니다.

다소 정확도가 낮은 엉뚱한 대답을 하기도 합니다. 한국어로 문/답을 진행한게 원인일수도 있겠습니다.

Chat gpt 는 아무래도 english 영미권 문화에 특화되어 있습니다.

API사용

API를 통해 서드파티 앱을 개발할수도 있고 다양한 기능들을 제공합니다.

자연어, 코드를 이해하거나 생성하는 거의 모든 작업에 사용될수 있다고 합니다.

다른편에서 api를 실제로 사용해보고 재미 있는것을 해보겠습니다.

텍스트작업
코드작업
이미지생성

다양한 예제들을 제공하며 쉽게? 사용하도록 도와줍니다.

https://platform.openai.com/examples/

OpenAI API

An API for accessing new AI models developed by OpenAI

platform.openai.com

텍스트 작업

이야기를 생성하고, 각종 텍스트 분석을 수행하고 텍스트로 할수 있는 모든게 가능합니다.

텍스트로 최대한 명시적으로 입력해야 좋은 결과를 얻을수 있습니다.

코드생성

GPT-3 모델의 후손으로 코드를 이해하고 생성할수 있습니다.

어떻게 이런게 가능한가?

사전에 자연어를 학습하고 GitHub등에서 수집한 수십억줄의 코드를 학습하였기 때문입니다.

파이썬을 가장 잘하고, 자바스크립트, 고, 펄, PHP, 루비, 스위프트, 타입스크립트, SQL, 심지어 쉘을 포함한 12개 이상의 언어에 능숙하다고 합니다. 현재는 두가지 모델을 사용할수 있습니다.

최신 모델	설명	최대 요청	훈련 데이터
코드-다빈치-002	가장 유능한 코덱스 모델. 특히 자연어를 코드로 번역하는 데 능숙하다. 코드를 완성하는 것 외에도, 코드 내에 완성을 삽입하는 것도 지원합니다.	토큰 8,000개	2021년 6월까지
코드 쿠시맨-001	거의 Davinci Codex만큼 가능하지만, 약간 더 빠르다. 이 속도 이점은 실시간 애플리케이션에 선호될 수 있다.	최대 2,048개의 토큰

이미지생성

기본적으로 텍스트를 이용해서 이미지를 생성할수 있습니다.

필터를 적용하고 이미지를 조작할수 있습니다.

다양한 샘플 제공

사이트에서 제공하고 있는 다양한 샘플을 확인해보면 좀더 디테일한 사용방법을 찾을수 있습니다.

잘 모르겠으면 샘플 소스를 보면 감이 딱 오니까요. 우선 이것부터 챙겨 보시면 되겠습니다.

텍스트 -> 이모티콘도 만들수 있구요.

영어 문법도 검사 해줍니다.

sql 도 만들어줍니다.

심지어 코드를 작성하기도 하고 설명도 해줍니다.

결론

불안한 부분도 많지만 여러가지로 놀라운 솔루션이 나온것 만큼은 확실한것 같습니다.

마이크로 소프트, 구글, 카카오, 네이버 등... 대기업들이 앞서 움직이고 있습니다.

영화나 소설속 미래가 코앞에 온 느낌이 드네요...

맥북 윈도우 설치 최신판 - UTM 활용하여 M1 M2 맥에 윈도우 설치

코드와트 — Sun, 19 Feb 2023 13:07:17 +0900

윈도우 설치는 UTM 을 사용해보자

소개

안녕하세요. 김과자 입니다.

지난편에 이어서 다른 방법으로 윈도우를 설치해 보겠습니다.

2023.02.19 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북 윈도우 설치하기 최신판 - 패레럴즈 ARM M1 M2 맥에 윈도우 설치

맥북 윈도우 설치하기 최신판 - 패레럴즈 ARM M1 M2 맥에 윈도우 설치

소개 안녕하세요. 김과자 입니다. 맥북을 사용할때 가장 고민인게 무엇일까요? 곰곰히 생각해봤습니다. 바로 윈도우가 설치 되어있지 않다는것입니다. 그렇습니다. 우리는 맥북디자인의 윈도우

www.blueswt.com

오늘은 UTM 이라는 오픈소스기반의 가상머신 소프트웨어 입니다.

원래는 IOS 에서 활용되었는데 실리콘 기반 맥북이후에는 맥에서 활용되고 있습니다.

왜냐하면… 우리는 맥북 디자인의 윈도우를 노트북을 원하기 때문입니다.

Apple App Store 에서는 유료로 다운로드가 가능하지만,

깃허브 등에서는 이미 소스가 오픈되어 있기에 무료로 이용이 가능합니다.

IOS 에서 활용되던 만큼 맥북에서 사용시 성능은 월등합니다.

https://mac.getutm.app

UTM

Securely run operating systems on your Mac

mac.getutm.app

본문

사이트 이동후 다운로드

UTM을 이용한 윈도우 설치도 크게 어렵지는 않습니다. 잘 따라서 클릭몇번 해주시면 됩니다.

사이트에 접속합니다. 그리고 다운로드를 눌러줍니다.

위와같은 파일이 다운로드 받아집니다.

설치

파일을 더블클릭후 UTM 아이콘을 Applications 로 클릭-> 드래그 해줍니다.

응용프로그램에 보시면 이렇게 잘 설치가 되었습니다. 더블클릭 해줍니다.

시작

누가봐도 새 가상머신 만들기를 클릭하게 되어있습니다. 클릭해줍니다.

우리는 첫번째 메뉴 Virtualize를 선택 합니다.

윈도우를 선택해줍니다. 다운로드 받아놓은 윈도우 이미지 파일이 있다면 선택해줍니다.

나머지는 자신의 입맛에 맞게 설정 하고

저는 기본 옵션으로 다음 다음 해줍니다.

거의 다 왔습니다. 아래와 같이 자동으로 Guest 툴을 설치합니다. 이 게스트툴이 없으면 인터넷이 안되거나 하는 문제가 있습니다.

다운로드가 완료 되면 잘 셋팅 되었는지 확인합니다.

가상머신 진입 성공입니다. 부팅을 알아서 하고 있습니다. 속도가 꽤 빠릅니다.

문제해결

만약 이런 메세지를 보게 된다면 아무키나 눌러주셔야 합니다.

안 그러면 아래와 같은 shell 로 진입하게 되는데...

exit 를 치시고 continue 로 나가시고

다시 메세지가 뜨면 아무키나 눌러주시면 됩니다.

여기서 부터는 다들 아시는 윈도우 설치 설정입니다. 다음 다음 하시면 됩니다.

이렇게 수분후 UTM을 통한 윈도우설치가 완료됩니다. 전혀 어렵지 않습니다.

클릭 몇번으로 윈도우 설치가 가능하오니... 다들 잘 이용해보시길 바랍니다.

결론

M1 M2 맥북 에서 패러렐즈와 UTM 어떤것으로 사용할지는 자신의 선택 입니다.

속도나 사용하려는 소프트웨어 등을 설치해보고 판단하시면 되겠습니다.

맥북 윈도우 설치하기 최신판 - 패레럴즈 ARM M1 M2 맥에 윈도우 설치

코드와트 — Sun, 19 Feb 2023 12:34:28 +0900

맥북에 윈도우 설치는 껌이다

소개

안녕하세요. 김과자 입니다.

맥북을 사용할때 가장 고민인게 무엇일까요?

곰곰히 생각해봤습니다. 바로 윈도우가 설치 되어있지 않다는것입니다.

그렇습니다. 우리는 맥북디자인의 윈도우 노트북이 필요한것입니다.

그렇다면.. 만들어서 쓰자… 설치해서

맥북에 윈도우를 설치하는 방법은 이미 많은 방법이 존재하고

유익한 기사들이 많이 있습니다. 제 블로그에도 이미 작성한 내용이 있습니다.

최근에 M1,M2 등의 실리콘 맥북을 사용하고 있어서

해당 맥북에도 윈도우를 설치할수 있는가? 라는 의문을 가지고 이글을 작성하게 됩니다.

2020.04.11 - [IT 테크 기술 지식 공유/컴퓨터 일반 맥OS 윈도우] - 맥북에 윈도우 설치 - 패러렐즈로 한방에 설치하자!

맥북에 윈도우 설치 - 패러렐즈로 한방에 설치하자!

https://www.youtube.com/watch?v=skh6EHWy1oU&t=444s 안녕하세요. 김과자입니다. 지난 시간에 이어서 맥북에 윈도우를 설치해보겠습니다. 2020/02/08 - [IT_테크_리뷰] - [꿀팁] 너무 쉽다! 맥OS 에 윈도우를 설치해

www.blueswt.com

내 맥북에 윈도우설치 될까?

본문

맥북(실리콘) 에 윈도우를 설치할수 있는가?

결론을 말하면 되긴 된다. 입니다. 이게 무슨 말인가 하면…

최신의 맥북은 구형 맥북과 설계가 다릅니다.

구형맥북은 인텔CPU(x86) 를 기반하여 설계되었고

최신의 맥북은 애플 실리콘(ARM) 기반의 설계기본으로하고 있습니다.

그래서 해당 아키텍처에 맞는 방법으로 설치를 해야 하는것입니다.

x86 구형 맥북의 경우 맥북의 부트캠프를 이용해서 비교적 간편하게 설치할수 있었습니다만,

M1, M2 는 그런게 없습니다.

구형 맥북만 부트캠프 지원이 가능하다

설치방법

M1, M2 실리콘 맥에 윈도우를 설치 하기 위해서는 몇가지 방법이 있습니다.

패레럴즈
UTM Virtual Machines

오늘은 패레럴즈 를 사용해서 윈도우를 설치해보겠습니다.

패러렐즈는 해당 사이트에서 다운로드 가능합니다.

https://www.parallelskorea.com/

Parallelskorea

Parallels 한국총판 트윈스톤즈

parallelskorea.com

설치시작

M시리즈 맥북에도 드디어 윈도우 설치가 가능하다.

패러렐즈 사이트로 이동 후 설치 파일을 다운로드 받는다

패러렐즈를 이용하기 하기 전에 유의 해야 할것이 있습니다.

이건 유료 입니다! 그렇기 때문에 평가판을 사용해서 14일동안 무료로 즐긴뒤? 구매할지를 결정하시면 되겠습니다.
https://www.parallelskorea.com/ 해당 사이트로 이동후

유혹의 패러렐즈

무료 평가판 다운로드로 이동합니다.

무료 평가판 다운로드를 클릭합니다.

다운로드를 해주세요.

다운로드 폴더로 이동하여 해당 파일을 더블 클릭 합니다.

패러렐즈 데스크탑 설치를 더블클릭 합니다.

알아서 설치가 진행됩니다. 거의 다 왔습니다.

초기화 및 셋팅을 시작합니다.

원활한 사용을 위해 각종 권한을 ok 해줍니다.

윈도우 설치도 알아서 해줍니다.

자 이제 윈도우를 다운받고 설치해 보겠습니다. 잘될것이지만... 몇가지 제한 사항이 있다고 합니다.

사실 ARM 기반 윈도으는 일반 pc x86 윈도우 와 다릅니다. 겉은 똑같지만 속은 다르다는 말입니다.

아마도 안되는 소프트웨어가 상당히 많을수 있습니다.

게임도 물론 마찬가지 입니다. 그래서 더 평가판을 미리 사용해보길 권해드립니다.

윈도우 다운로드가 진행중 입니다. 설치도 알아서 합니다. 쭉쭉 진행하시면 됩니다.

그럼 알아서 준비중으로 변경 되고 설치가 완료 됩니다.

드디어 설치가 완료되었습니다.

결론

클릭 몇번 만으로 맥북에 윈도우 설치를 완료 하였습니다.

패러렐즈를 사용하면 정말 쉽게 설치를 도와주는데요.

뭘 설정하고 하는 것도 없습니다. 그저 클릭만 할뿐입니다.

설치가 되면 윈도우를 쓰시는 목적(특정 소프트웨어)을 설치하시고

사용해보시기 바랍니다. 분명히 안되는경우나 원활하지 않을수 있습니다.

Chat gpt 소개 뭔데 그렇게 난리인가?

코드와트 — Fri, 17 Feb 2023 18:46:53 +0900

챗 GPT 열풍은 과연?...

소개

안녕하세요.

김과자 입니다.

스마트, ai, 빅데이터… 와 같은 단어들이 이제는 많이 익숙해졌습니다.

그중에서도 오늘은 ai 챗봇 chat gpt에 대해서 알아보겠습니다.

Open ai - chat gpt 는 최근에 엄청난 돌풍을 몰고 오며 몇일만에 100만 유저를 확보하였는데요.

실로 엄청난 인기를 실감 할수 있습니다. 그야 말로 IT 업계의 슈퍼공룡의 탄생인 것입니다.

Chat - gpt 는 갑자기 뿅 등장한것이 아니라 오래전부터 준비된 프로젝트 였습니다.

차츰 버전업을 통해 대중에게 공개 했을 뿐입니다.

chat gpt로 그야말로 대박이 났다.

본론

굉장히 어렵게 느껴지실수도 있으나 쉽게 말하면 학습이 가능한 챗봇 이다. 라고 생각하시면 이해가 편하실 겁니다.

이미 근래의 소식까지 빅데이터들을 학습하였고 유저의 대화를 학습하고 진화합니다.

기존의 앵무새 챗봇들과는 개념이 다르다고 볼수 있겠습니다.

공상과학 영화나 드라마에서만 보던 장면들이 이제는 현실이 되어 가고 있습니다.

챗 gpt의 등장으로 구글, 마이크로소프트, 국내의 카카오, 네이버 등 많은 기업들이 바짝 긴장 하고 있으며

서둘러 자체 gpt 를 출시 하려고 난리가 난 상황입니다.

https://openai.com/blog/chatgpt/

ChatGPT: Optimizing Language Models for Dialogue

openai.com

ms google 도...

네이버 카카오도...

마이크로소프트의 경우 chat gpt와 계약하고

자신들의 자체 검색엔진인 빙 bing 에 해당 기능을 탑재한다고 합니다.

챗gpt는 유저와의 대화를 통해 답을 찾아주는것이 큰 맥락입니다.

https://www.bing.com

Info

A small and vibrant bird, the Allen’s hummingbird

www.bing.com

기존의 엄청나게 많은 데이터들을 학습하고 그 것을 기반으로 우리의 질문에

답하려 노력합니다. 실제로 사용해본결과 꽤 정확한 답을 해주는 것을 확인하였습니다.

철학적인 답변을 하기도 하고, 가벼운 농담도 하며, 시도 써주고, 글도 써주고, 기사도 써주고,

심지어 코딩도 해줍니다. 다른 서비스등을 통해 이미지를 생성 해주기도 하고,

수학 문제를 풀기도 합니다. 정말 많은것이 가능하고 앞으로의 가능성이 무궁무진 하다고 생각합니다.

그러니까 마이크로 소프트에서 약 12조를 지원한다고 하겠지요?

아직은 부족하거나 어색한게 사실입니다만… 충분한 미래가치가 있다고 생각됩니다.

터미네이터의 스카이넷 그게 현실이 되어가는 느낌입니다.

갑자기 놀랍고 무섭네요.

“ai가 인류 문명의 큰 재앙중 하나다. 서둘러 규제를 만들고 제한하는것이 시급 하다.”

최근 일론머스크가 한 말입니다. 자신의 회사가 아니라서 그랬을까요? 아니면 진짜 인류를 걱정해서 한말일까요?

어찌됐든 반은 맞고 반은 틀리다 할수 있겠습니다. 긍정과 부정적 측면은 항상 존재하니까요…

다음편은 실제로 챗gpt를 사용해보겠습니다.

결론

확실한것은 chat-gpt가 엄청난 녀식임에는 틀림없습니다.

마소, 구글, 일론머스크 까지 한마디씩 거드는것을 보면말입니다.

티스토리 애드센스 ads 문제 3분이면 해결

코드와트 — Fri, 17 Feb 2023 18:35:40 +0900

티스토리 애드센스 ads 문제를 해결한다

소개

안녕하세요.

김과자 입니다.

티스토리 블로그를 하면서 애드센스 승인까지 받았는데…

자 이제 해볼까? 했더니… 뭡니까? Ads 문제를 해결 하세요??

아마도 다들 당황 하셨을겁니다. 저 역시 그랬습니다.

공식 디지털 판매자 또는 ads.txt는 승인받은 것으로 확인된 판매자(예: 애드센스)를 통해서만 디지털 광고 인벤토리가 판매될 수 있게 해주는 IAB Tech Lab 솔루션입니다. ads.txt 파일을 직접 만들면 사이트에서 광고를 판매할 수 있는 판매자를 더 효과적으로 관리할 수 있으며, 가짜 인벤토리가 광고주에게 판매되는 것을 방지할 수 있습니다.

https://support.google.com/adsense/answer/7532444?hl=ko

Ads.txt 가이드 - Google 애드센스 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

애드센스 ads 문제 고치기

전체적인 흐름을 살펴 보겠습니다.

티스토리의 기본 url 을 사용하는 분들은

이 글을 찾아 보실일이 없을겁니다.

애드 센스 연동만으로 자동으로 해결되기 때문입니다.

***.tistory.com

이런식의 url을 사용하시는 분들이겠죠.

https://notice.tistory.com/2603

[안내] ads.txt 파일 문제가 해결됐습니다.

notice.tistory.com

문제는 2차 도메인을 사용하는 분들인데요.

***.com

등의 도메인을 사서 쓰는 경우 입니다.

우리는 이것을 "2차 도메인을 사용한다" 라고 부릅니다.

일반적으로 2차 도메인의 경우도 티스토리 측에서 해결을 완료했다고 합니다.

제 주소를 예를 들면 blueswt.com 이라는 루트 주소를 티스토리에 등록해서 사용하는 경우는

다른것 설정 없이 관리에서 애드센스 연동만으로 해당 문제가 해결됩니다.

*루트주소인지 아닌지를 잘 확인해 보셔야 합니다.

https://notice.tistory.com/2604

[참고] 2차 도메인이 루트도메인인지 확인하는 방법

안녕하세요. 티스토리팀입니다. 2차 도메인을 사용 중인 블로그에서 ads.txt 파일 문제를 해결하기 위해서는 티스토리에 등록한 주소가 루트도메인인지 확인해야 합니다. 루트도메인이란? 'abc.com'

notice.tistory.com

그러나… 저는 안타깝게도 관리에서 www.blueswt.com 으로 등록하여 사용중입니다.

이럴때는 약간의 설정을 해주어야 합니다.

즉 ***.tistory.com 같은 기본주소를 쓰거나

asdf.com 같이 루트 주소를 등록하거나 하신분들은 이글에 해당이 없습니다.

저같이 2차 도메인 - 하위도메인으로 등록된 분들만 해당이 있습니다.

www.blueswt.com 처럼 말입니다.

왜 이렇게 설정했을까...

이것을 고치기 위해 큰그림은 미리 알아보겠습니다.

구글의 애드센스 페이지에서 ads문제 해결하기를 통해 ads.txt 파일을 다운받는다.
다운받은 파일은 티스토리 관리 - 스킨편집을 통해 업로드 한다.
Url을 브라우저로 확인해본다.

크게 어려운점은 없습니다.

그러면 설정을 해보겠습니다.

구글의 애드센스 페이지에서 ads문제 해결하기를 통해 ads.txt 파일을 다운받는다.

애드센스 페이지 홈에서 보시면 아래와 같이 경고가 뜬것을 확인 할 수 있습니다.

무섭게 빨간색이다

지금 해결하기로 들어가셔서 ads.txt 파일을 다운로드 받습니다.

ads.txt를 다운로드 한다

가이드도 한번 살펴 보시죠

다운받은 파일은 티스토리 관리 - 스킨편집을 통해 업로드 한다.

스킨편집으로 가셔서 html 편집으로 이동합니다.

파일 업로드 탭으로 이동후 추가 버튼으로 방금 다운로드 받은 ads.txt 파일을 업로드 해줍니다.

위와 같이 파일이 잘 올라간것을 확인할수 있습니다.

Url을 브라우저로 확인해본다.

이제 브라우저의 주소창에 www.asdf.com/ads.txt 와 같이

"자신의 주소/ads.txt" 를 입력해줍니다.

그럼 잘 뜨는것을 확인 하실수 있습니다.

마지막으로 애드센스 연동을 확인합니다.

이부분을 은근히 많이 빼놓는 분들이 있습니다.

당연히 되어 있겠지 하고 말입니다.

연동이 되어 있다면 이제 기다리는 일만 남았습니다.

수일이 지나면 아마도 ads.txt 문제는 해결되있을것입니다.

--- 업데이트 ---

이렇게 진행했을때 저같은 경우 문제가 발생했습니다.

해결이 안되신분들은 아래글도 참고하시면 도움이 될것 같습니다.

2023.02.27 - [IT테크기술지식] - 지긋지긋 애드센스 ads 해결법 2차도메인 사용시 하위도메인 문제

지긋지긋 애드센스 ads 해결법 2차도메인 사용시 하위도메인 문제

소개 안녕하세요. 과공입니다. 티스토리에 애드센스까지 잘 달아 놓고… 뭔가 찜찜한게 있으시다고요? 애드센스 관리창에 무한 표시되는 ads 문제!! 저와 직면한 문제가 비슷한 경우라면 오늘 내