토로토 블로그

LG CNS 2025년 하반기 신입사원 채용 합격 후기

토로토 — Sun, 21 Dec 2025 11:14:49 +0900

삼성 SDS, SK C&C와 함께 국내 3대 SI 기업이라 불리는 LG CNS에 최종 합격하게 되었습니다! 사실 저는 네이버 같은 서비스 기업으로 가고 싶어서 SI 기업은 크게 관심을 두지 않고 있었는데, 정말 우연한 계기로 지원하게 되면서 사회로의 첫걸음을 대기업에서 떼게 되었네요. 서류와 면접을 준비하면서 취준생들이 얼마나 힘든 삶을 살아가는지 온몸으로 체감했습니다.. 아무리 준비해도 부족한 것 같은 불안과 초조함, 긴장 속에서 살아가다 보니 스트레스가 장난이 아니더라고요. 취준생 여러분들 모두 파이팅입니다!

LG Careers

careers.lg.com

대기업 인적성·필기시험 대비 | 삼성 GSAT, SKCT, LG Way FIt, SSAFY - 링커리어 CBT

링커리어 CBT에서 삼성, SK하이닉스, LG, SSAFY 인적성 및 필기시험을 철저히 대비하세요. 실전과 유사한 환경에서 맞춤형 문제 풀이, 상세한 해설과 오답 분석을 통해 독학으로도 문제 해결 능력을

cbt.linkareer.com

LG CNS 2025 하반기 신입사원 채용

이번 2025 하반기 채용은 총 9개의 분야에서 진행됐습니다. 저는 그중에서도 DX Engineer로 지원했고요. 지난 채용 공고까지만 해도 항상 DX가 가장 위에 있었다고 하는데, 이번에는 중간쯤으로 내려가고 AI가 제일 위로 올라왔습니다. 이 순서가 정말 의미 있는 순서인지는 잘 모르겠지만, 그래도 나름 회사에서 중요하게 보는 역량의 우선순위를 보여주는 것 같아서 (DX가 밀려난 것이) 조금 아쉬운 마음이 드는 건 사실입니다.

지원 자격은 특별한 특이사항이 없었습니다. 대학을 졸업하고 남자의 경우 군대를 다녀온, 큰 결격 사유가 없는 사람이면 전공 무관하게 누구나 지원할 수 있었습니다.

지난 채용들과 가장 큰 차이점은 바로 코딩 테스트가 없었다는 점입니다. LG CNS 코딩 테스트 난이도가 엄청 높지는 않은 것으로 알고 있긴 하지만, 그만큼 좋은 성적을 내야만 합격할 수 있다는 압박감도 있었거든요. 하지만 이번에는 전 직군 모두 코딩 테스트 없이 인적성 검사만 진행했습니다.

서류 전형

9월 1일부터 9월 18일까지 서류 접수를 진행했습니다. 다른 회사들보다 조금 빨리 시작하기도 했고, 미처 LG는 생각하지 못하고 있었기 때문에 조금 급하게 준비하게 되었습니다. 따로 개인 포트폴리오를 제출하는 건 없었고, 대신 경력사항이나 공모전, 대내외 활동 등을 모두 입력할 수 있게 되어있었습니다. 저는 그냥 간단하게 어떤 프로젝트였는지, 어떤 기술을 사용했는지, 간략한 소개와 github 링크 정도만 적었던 것 같습니다.

1. LG CNS에 지원한 동기와 입사 이후 꿈꾸는 것은 무엇인가요?
2. 지원 분야와 관련된 구체적인 지식이나 경험을 기술해 주십시오.
3. 모집분야와 관련된 전공과목 및 해당 전공과목에서 달성한 성취도(학점)를 구체적으로 기술해 주십시오.
4. 최근 3년 이내 수행한 개발 프로젝트 중, 본인이 핵심적으로 기여한 사례를 1개 선택하여 사용 언어 및 기술, 본인의 역할, 문제 해결 과정, 최종 성과를 중심으로 구체적으로 작성해 주세요.

자기소개서는 Why LG CNS, 경험, 학습, 개발 프로젝트 경험 이렇게 4개의 질문으로 구성되어 있었습니다. 500~1000자 내외로 작성해야 해서 최대한 간결하면서도 저를 잘 보여줄 수 있도록 작성하는데 초점을 뒀던 것 같습니다. LG CNS의 인재상 등을 참고하면서 왜 LG CNS를 선택하게 되었는지, 추구하는 가치가 무엇인지, 이를 위해 어떤 것들을 배우고 있는지 등을 보여주려 했고, 또 프로젝트 경험들을 녹여내 어려움을 어떻게 극복해 나갔는지 서술했습니다.

당시에는 자소서를 잘 쓰는 데에만 집중하면서 글을 썼는데요, 막상 면접을 준비하다 보니 강점인 A를 어필하고 싶은데 자소서에서는 A에 대한 내용을 제대로 서술하지 않아서 애매한 경우들이 있더라고요. 면접관님들이 질문할 때 참고할 만한 자료가 자소서밖에 없는데, A에 대한 내용이 부실하다 보니 면접 때 A를 내세우기가 어려웠습니다. 자소서는 단순히 질문에만 잘 대답하면 되는 것이 아니라, 면접까지 염두에 두고 나에게 유리한 질문들을 유도할 수 있도록 전략적으로 작성하면 더 좋지 않을까 생각합니다.

인적성 검사

서류를 제출하고, 지원한 사실을 잊어갈 무렵 9월 29일에 결과가 발표됐다는 문자를 받았습니다. 결과는 합격! 그리고 바로 이어서 인적성 검사를 위한 준비를 시작했습니다. LG Way Fit이라는 자체 인적성 시험이 있어서, 해커스 책을 사서 추석 연휴 내내 문제집을 열심히 풀었습니다. 또한, 컴퓨터로 진행되는 시험이다 보니 링커리어에 있는 온라인 모의고사로 최대한 실제 시험 환경과 비슷하게 문제들을 풀어보았습니다. 이렇게 공부하다 보니 몇 년 만의 황금연휴가 순식간에 지나가 버렸네요 ㅠㅠ

실제 시험은 생각보다 훨씬 어려웠습니다. 모의고사에서는 아슬아슬하게 문제를 다 풀 수 있었고, 정답률도 75~80% 정도 나왔었는데, 실제 시험을 볼 때는 그 절반도 못한 것 같습니다. 첫 문제부터 유형이 너무 다르고 난이도도 체감상 두 배 이상 어려워서 겨우 절반 조금 넘게 푸는 정도였습니다. 짧은 시간이었지만 나름 열심히 준비했는데, 멘탈이 탈탈 털린 하루였습니다..

1차 면접

필기 전형 합격과 1차 면접 안내

인적성 시험을 처참하게 망하고 탈락했을 거라 생각하던 차에 합격 문자가 왔습니다! 10월 20일에 안내가 나왔고, 그다음 주인 27일 ~ 31일 사이에 면접을 보게 될 것이라고 안내받았습니다. 이때부터 열심히 다른 블로그들을 찾아보면서 예상 질문들을 정리하고, 다른 친구들과 틈틈이 모의 면접을 했습니다. 면접은 온라인(zoom)으로 진행됐고, 면접관님 3분과 지원자 2명으로 진행됐습니다. 시간은 약 35분 정도 걸렸네요. 인당 15분 정도씩 대답했던 것 같아요.

질문들을 어디까지 공개해도 될지 모르겠지만.. 간단하게 공유드리자면

1. 자기소개
2. 성격의 장단점
3. 이직 이유
4. 어떤 분야에서 일해보고 싶은지
5. 다른 분야에서 일하게 되면 어떨지
6. 기억에 남는 프로젝트와 성과
7. BE + FE 전부 다 참여해 본 경험이 있는지
8. 글로벌 지사에서 국제적으로 프로젝트를 진행하게 되면 어떤지
9. 마지막으로 하고 싶은 말 / 질문

이 정도로 질문을 받았습니다. 다행히 꼬리 질문도 없었고, 예상 질문들과 비슷한 질문들이 많아서 준비했던 대로 잘 대답했던 것 같아요. 저는 다른 회사에서 정규직으로 일하고 있었기 때문에 이직 이유를 특별히 여쭤보셨던 것 같습니다.

2차 면접

1차 면접 합격과 2차 면접 안내

면접을 본 다음 주인 11월 5일에 결과가 나왔습니다. 이번에도 마찬가지로 한 주 뒤인 10일 ~ 14일 중 하루에 화상으로 2차 임원 면접을 진행하게 될 것이라고 안내를 받았습니다. 그리고 한 가지 특이사항으로는 짧게 영어 면접을 한다고 하더라고요. 합불에는 영향이 없다고 했지만 직무 배치 같은 부분에서 이점이 있을 것 같아 영어 면접도 함께 준비했습니다.

2차 면접은 임원 분과 1대 1로 진행이 됐습니다. 시간은 20분 정도 했던 것 같네요.

1. 자기소개
2. 장단점 영어로
3. 프로젝트를 진행하면서 팀에서 어떤 역할을 맡았었는지
4. 팀 내에서 있었던 갈등
5. 왜 모바일 개발을 선택했는지
6. AI가 발전하고 있는데, 미래에 개발자들이 어떻게 될 것 같은지
7. 최근에 감명 깊게 읽었던 책
8. 마지막 자기 어필

초반에는 1차 면접과 비슷하게 자기소개로 시작했습니다. 장단점을 영어로 소개해달라고 하셔서 조금 당황했지만, 어떻게든 잘 이야기해서 넘어갔던 것 같네요. 좀 기억에 남는 질문으로는 감명 깊게 읽었던 책을 소개해달라고 하셨습니다. 인터넷에서 면접 질문들을 찾아봤을 때 한 번씩 나오던 질문이었는데, 정말로 이 질문이 나올 줄은 상상도 못 했던 터라 진짜 크게 당황했습니다. 진짜 다행인 건 얼마 전, 몇 년 만에 책을 읽었던 참이라 이 책에 대해서 이야기하고 무사히 넘어갔습니다. 진짜 심장 터지는 줄 알았어요...

최종 합격

최종 합격 안내

11월 24일 최종 합격 결과가 나왔습니다. 공고를 확인하는 순간 심장이 미친 듯이 뛰었던 것 같네요. 1월 5일부터 입사이고, 2주간의 교육 후 팀에 배치된다고 합니다. 그리고 12월에 오티를 겸한 예비 소집 프로그램이 있다고 안내를 받았습니다.

개발 역량 확인

예비소집 행사와 개발 역량 확인 절차 안내

CNS에 지원하면서 코딩 테스트와는 이별인 줄 알았는데... 프로그래머스 PCCP 시험을 응시하라고 안내가 나왔습니다. 합불에는 영향 없이 추후 교육에 참고하기 위해 역량을 확인하는 것이라고 부담 없이 응시하라고 하셨지만, 입사 후 저에 대한 첫 평가가 될 거라 생각하니까 부담이 안될 수가 없더라고요... 응시 언어도 제가 평소에 사용하던 언어들이 없어서 파이썬 문법을 새로 익히느라 일주일 동안 프로그래머스 문제들을 틈틈이 풀었습니다. 취준생 여러분.. 코딩 테스트 평소에도 열심히 준비하세요..

그리고 12월에 있을 예비 소집 행사 안내도 함께 공지가 되었습니다.

예비 소집 행사

LG CNS 예비소집 행사

12월 10일에 예비 소집 행사가 있었습니다! 회사 소개를 들으며 투어를 하고, 신입 사원 동기들과 친해질 수 있는 시간을 마련해 주셨습니다. 또 선배 사원, 선임님들을 초청해서 QnA를 통해 입사 전 궁금했던 내용들을 미리 질문하고 함께 식사하는 시간을 가졌습니다.

저녁으로 먹은 코스 요리

식사가 진짜 대박이었는데요! 무려 코스 요리를 준비해 주셨습니다. 심지어 메인 디시는 안심 스테이크였는데, 왜 스테이크는 안심을 먹어야 하는지 알게 되는 맛이었습니다.

처음 행사 장소에 도착했을 때만 해도 서로 서먹서먹 어색어색 했었는데, 끝날 때쯤 되어서는 제법 친해진 것 같아서 다행이었습니다. 나중에 남는 건 동기들뿐이라는데, 든든한 동기들을 만나게 되어서 오티에 가기를 참 잘한 것 같습니다.

LG CNS 2026!!

채용이 진행된 두 달 동안 여러 우여곡절도 있었고 준비하며 스트레스도 받았지만, 좋은 결과와 함께 내년부터는 새 출발을 하게 되었네요. 요즘 청년들이 왜 다들 취업 난이라고 하는지, 취준이 정말 쉽지 않다는 것을 다시 한번 느낄 수 있었습니다. 취업을 준비하시는 모든 분들께 조금이나마 도움이 되었으면 좋겠습니다!

AI 시대의 개발자

토로토 — Fri, 11 Jul 2025 11:26:55 +0900

얼마 전, 학교 프로그램을 통해 미국 실리콘밸리에 다녀올 기회가 있었습니다. 구글, 메타 등 빅테크 캠퍼스를 투어 하고, 여러 개발자 분들을 만나며 커피챗을 진행했습니다. 많은 이야기를 나누었는데, 그중에서 가장 인상 깊게 들었던 AI 시대에 개발자의 미래에 대해서 나누어 보려고 합니다. 미국 실리콘밸리에서 일하는 개발자들의 관점에서 AI는 어떤지, 개발자의 미래는 어떤지 이야기해 보도록 하겠습니다.

Homebrew를 사용한 맥북 플러터 설치하기

플러터로 개발을 하기 위해서는 가장 먼저 플러터를 설치해야겠죠? 플러터를 설치하는 방법엔 여러 가지가 있겠지만, 저는 homebrew를 사용해서 설치하는 방법에 대해서 알려드리려 합니다. Homebre

torotoblog.tistory.com

백준으로 배우는 파이썬 01. ??!

baekjoon/10926.py at main · wonhj12/baekjoon백준 문제 풀이. Contribute to wonhj12/baekjoon development by creating an account on GitHub.github.com 백준으로 배우는 C 언어 20. 별 찍기 - 2이번 문제는 18. 별 찍기 - 1 문제와 비

torotoblog.tistory.com

인공지능의 시대의 시작

지난 3~4년간 인공지능이 무서운 속도로 발전해 왔습니다. Chat GPT가 처음 나왔을 때에는 그냥 '신기하네' 정도의 수준이였지만, 불과 1~2년 만에 꽤 쓸만해지면서 의존도가 조금씩 올라가기 시작했고, 지금은 복잡하지 않은 로직 정도는 질문 한 번 하면 완벽에 가까운 코드를 만들어 주는 정도로 발전했습니다. 덩달아 수많은 기업에서 너도 나도 인공지능을 개발하면서 다양한 선택지의 인공지능 서비스들이 많이 생겨났지요.

이러한 인공지능의 발전은 확실히 개발을 편하게 만들어 준 것 같습니다. 저도 요즘 구글 재미나이(Google Gemini)를 활용하며 예전 보다 몇 배는 빠르게 개발을 하고 있습니다. 아직 사용해보지는 않았지만, 커서(Cursor)나 클라우드 코드(Claude Code) 같은 툴을 잘 활용한다면 지금 보다도 더 빠르고 편하게 개발이 가능할 것이라 생각합니다. 하지만 인공지능의 발전이 꼭 좋은 것 많은 아닙니다. 인공지능이 발전하는 만큼 주니어 개발자의 입지가 줄어들고 있고, 실제로도 근 1~2년간 신입 개발자를 뽑는 회사가 눈에 띄게 줄어들었죠. 안 그래도 취업 난이라고 하는 대한민국에서 더더욱 취업하기가 힘들어지게 되었습니다.

이런 현상은 미국에서도 동일하다고 합니다. 메타에 다니는 한 개발자 분과 커피챗을 하며 들은 이야기인데요, 메타 내부에서는 이미 시중에 나와있는 Llama 모델 보다도 2년 이상 앞선 모델을 사용 중이라고 합니다. 그러다 보니 수십만 줄에 달하는 코드들을 유출의 걱정 없이 학습시킬 수 있고, 질문 한 번으로 내가 필요한 부분을 빠르고 정확하게 찾아 수정할 수 있다고 합니다. 이걸 할 수 있는 시니어 급 개발자 몇 명 외에는 굳이 개발자를 새로 고용할 필요가 없어지는 것이죠. 지금 공개된 모델만 해도 이미 넘치도록 성능이 충분한데, 2년 앞선 모델을 사용하는 개발자들은 얼마나 더 큰 시너지를 낼 수 있는 건지 도저히 감이 잡히질 않네요...

실리콘밸리 구글 캠퍼스

개발자로 살아남기 위해서는? AI 마스터하기

이러한 AI 시대에 개발자들은 어떤 방향성을 가지고 나아가야 할까요? 사실 뻔한 정답은 이미 모두 알고 계시리라 생각합니다. AI를 잘 활용할 줄 아는 개발자가 되는 것이죠. 수십 수백명이 해야 할 일들을 AI를 활용해서 혼자 처리하는 그런 개발자가 되어야 한다고 미국에서 만난 대부분의 개발자 분들이 말씀하시더라고요. 너무나도 당연한 이야기죠. 지금 당장만 해도 AI를 활용하니 개발 시간이 몇 배나 단축됐는데, 앞으로 계속해서 발전할 AI들은 얼마나 더 대단할까요? 아직까지는 그래도 실수가 많고 오류도 많지만, 어느 시점부터는 오류도 없이 복잡한 프로그램도 수 초 내로 만들어 낼 수 있을 겁니다.

지금 당장 우리가 할 수 있는 것은 AI를 활용하는데에 익숙해지는 것입니다. 커서와 클라우드 코드 같은 툴(Tool)을 적극적으로 활용함과 동시에 이런 툴들이 생성해 낸 코드에서 무엇이 좋은 코드이고 어디가 나쁜 코드인지를 빠르게 파악할 수 있는 눈을 키워야 합니다. 문제없이 잘 돌아가는 것처럼 보이더라도 어딘가 한 곳에는 문제가 있을 것입니다. '왜 이렇게 코드가 짜였지?', '이렇게 코드를 짜면 어떤 이점이 있지?' 같은 보다 근본적인 질문을 던지며 문제를 파악하고 보완하는 능력을 기르다 보면 AI가 판치는 세상에서 살아남을 수 있는 개발자가 될 수 있으리라 생각합니다.

앞으로 일어날 개발자의 변화

Coinbase에서 프론트엔드로 일하고 계시는 한 개발자 분은 앞으로 개발자들이 크게 세 분류로 나누어질 것이라 예상합니다. 순수 인공지능을 연구하는 연구 개발자, 인공지능을 프로덕트에 연결하는 ML-Ops 개발자, 그리고 서비스를 전반적으로 개발, 관리하는 (Project가 아니라) Product Manager입니다. 기획을 담당하던 기존의 Project Manager를 넘어서 프런트엔드는 물론이고 백엔드, 데이터베이스 및 API 등 전체적인 프로젝트 설계, UX/UI에 대한 높은 이해도를 바탕으로 서비스를 개발할 수 있는 포지션이죠. AI가 나오기 전에는 이런 포지션에 도달하기가 정말 쉽지 않았을 것입니다. 풀스택 개발자가 되는 것조차 쉽지 않은데, 거기에 더해 기획과 UI/UX 까지 처리하기는 한 사람이 하기엔 너무 많은 일이죠. 하지만 지금은 AI라는 도구를 활용하면 충분히 감당 가능한 수준이 되었습니다. 그러다 보니 기초 지식에 대한 이해도가 더더욱 중요해진 것 같습니다. AI가 올바르게 구조를 설계했는지, 사람이 사용할 때 편리하다 느끼는 UX가 제대로 적용이 됐는지, 근거 있는 코드를 제대로 짰는지를 검증하는 것은 오로지 프로덕트 매니저의 몫이니까요.

실리콘밸리 메타 캠퍼스 광장

마무리하며..

엔비디아는 알고 있었을까요, AI 시대가 오면서 그래픽 카드의 수요가 이렇게 높아질 것을? 게임용 데스크톱 시장에서 조용히 놀고 있던 기업이 갑자기 세계 최초로 시가 총액 4조 달러를 돌파하는 1등 기업이 될 줄은 생각도 하지 못했을 것입니다. 미래는 아무도 알 수 없습니다. 산업 혁명이 일어났을 때에도, 컴퓨터가 보편화되기 시작할 때에도 수많은 직업들이 사라진다고 했지만, 또 그만큼의 새로운 직업들이 생겨났습니다. AI의 발전으로 인해 수많은 직업이 사라질 것이고, 개발자라는 직업도 그중 하나가 될 수도 있지만, 이를 대체할 수 있는 직업들이 계속해서 생겨나게 될 것이고 그 안에 새로운 흥미를 불러일으키는 직업도 분명 있을 것입니다. 지금 하고 있는 일을 묵묵히, 하지만 새로운 기술에 뒤처지지 않으면서 꾸준히 공부하다 보면 이 모든 경험들이 앞으로 도래할 새 시대에서 빛을 발할 기회가 있을 것입니다.

Git 사용자 정보 수정하기: user name, user email 변경하기

토로토 — Sat, 24 May 2025 09:23:49 +0900

깃을 사용할 때에는 사용자 이름과 이메일을 등록하는 것이 권장됩니다. 이름과 이메일을 통해서 누가 커밋을 했는지 파악하기 위함인데요, 등록이 되어있지 않으면 코드 리뷰를 하거나 커밋 로그를 볼 때 누가 작성한 코드인지 파악하기 어려울 수 있겠죠. 특히 깃허브 등에서 볼 수 있는 contributors 탭은 사용자 이름과 이메일을 기준으로 통계를 집계하기 때문에 동일한 이름으로 설정해두는 것이 중요합니다. 만약 깃허브에 등록된 이름과 로컬에서 등록된 이름이 다르다면 커밋을 한 사람과 머지 하는 사람이 다르게 등록될 수 있죠. 로컬에서 사용자 정보를 등록하기 위해서는 user.name과 user.email을 직접 설정하면 됩니다. 또한 깃은 편리하게도 다양한 프로젝트에서 사용하는 경우를 위해 저장소마다 사용자 정보를 다르게 설정할 수 있도록 기능을 제공하고 있습니다.

초보자를 위한 깃허브 사용법 및 커밋 관리 방법

개발자가 되면 깃(Git)을 많이 사용하게 됩니다. 깃은 버전 관리를 도와주는 툴인데요, 업데이트된 내용들을 기록하고 언제든지 과거 버전으로 되돌릴 수 있도록 하는 기능을 제공합니다. 버전

torotoblog.tistory.com

깃허브 Pull Request Template 만들기

깃허브에서 팀원들과 함께 협업을 하다 보면 풀 리퀘스트(Pull Request)를 만들게 됩니다. 상위 브랜치에 코드를 적용시키기 전에 서로 수정한 코드를 확인하며 문제가 없는지, 더 좋은 방법으로 코

torotoblog.tistory.com

전역 정보 설정하기

먼저 전역으로 사용자 정보를 등록할 수 있는 방법을 알아보도록 하겠습니다. 전역으로 설정해둔 사용자 정보는 새로운 깃 저장소에서 기본으로 사용됩니다. 만약 하나의 이름과 이메일만 사용하신다면 전역으로 설정해두면 편리하겠죠. --global 옵션을 사용해서 전역으로 설정이 가능합니다.

git config --global user.name [사용자 이름]
git config --global user.email [사용자 이메일]

특정 저장소의 정보 설정하기

만약 여러 개의 프로젝트를 동시에 진행하는데, 저장소마다 사용자 이름을 다르게 하고 싶은 경우에는 별도로 관리가 가능합니다. 전역 설정에서 --global 옵션만 제거하면 되는데요, 원하는 저장소 위치로 들어간 후 이름과 이메일을 설정하면 됩니다.

git config user.name [사용자 이름]
git config user.email [사용자 이메일]

사용자 정보 확인하기

저장한 사용자 이름과 이메일을 확인하는 방법도 간단합니다.

git config user.name
git config user.email

사용자 정보를 등록하고 나서 커밋을 하면 등록한 사용자 정보로 저자가 설정되는 것을 보실 수 있을 겁니다.

깃허브 Pull Request Template 만들기

토로토 — Mon, 19 May 2025 13:55:45 +0900

깃허브에서 팀원들과 함께 협업을 하다 보면 풀 리퀘스트(Pull Request)를 만들게 됩니다. 상위 브랜치에 코드를 적용시키기 전에 서로 수정한 코드를 확인하며 문제가 없는지, 더 좋은 방법으로 코드를 짤 수 있는지 확인하는 과정이죠. 정해진 양식이 있지는 않지만, 통상적으로 pull request에는 어떤 작업을 했는지, 어떤 부분을 봐줬으면 좋겠는지, 등에 대한 설명을 적습니다. 그래야 팀원들이 내용을 빠르게 파악하고 코드 리뷰를 할 수 있기 때문이죠. 그러다 보니 pull request를 작성할 때도 정용화 된 양식이 있으면 좋겠죠. 깃허브에서는 이런 경우를 위해 pull request template을 만들 수 있도록 기능을 제공하고 있습니다.

초보자를 위한 깃허브 사용법 및 커밋 관리 방법

torotoblog.tistory.com

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

pull_request_template.md 만들기

템플릿을 만드는 방법은 어렵지 않습니다. .gitignore 등과 동일하게 프로젝트 디렉터리에 pull_request_template.md 파일을 하나 만든 후 메인 브랜치에 적용시켜 주면 됩니다. 그러면 깃허브가 자동으로 이 파일을 인식해서 pull request를 만들 때 템플릿을 적용시켜 줍니다. 저는 아래와 같이 템플릿을 만들어서 사용하고 있습니다.

##   작업 내용

##   스크린샷
<img src="" width="20%" />

##   리뷰 요구사항

##   메모

## ✅ PR Checklist
PR이 다음 요구 사항을 충족하는지 확인하세요.
- [ ] 커밋 메시지 컨벤션에 맞게 작성했습니다.
- [ ] 변경 사항에 대한 테스트를 했습니다. (버그 수정/기능에 대한 테스트)

pull_request_template.md가 잘 적용된 것을 볼 수 있습니다.

파일 하나를 수정한 후 pull request를 만들어보면 잘 적용이 돼있는 것을 볼 수 있습니다. 이제 pull request를 만들 때 양식에 맞춰서 작성을 하면 됩니다. 작업 내용을 설명하고, 필요하다면 스크린샷도 함께 첨부하면 좋겠죠. 특별한 요구사항이나 메모가 있다면 해당 내용도 함께 적어주면 좋습니다. 마지막으로는 커밋을 잘 했는지, 테스트를 진행했는지 체크리스트를 통해 마지막 점검을 합니다. 체크리스트의 경우에는 [x]로 표시를 하면 체크 표시가 됩니다.

Pull request template는 팀원들과 상의해서 필요한 내용들을 더 추가할 수도, 불필요한 내용들을 뺄 수도 있습니다. 정해진 틀이 없죠. 검색을 해보면 다양한 템플릿들이 존재하니 어떤 내용들이 들어가야 하는지 고민해 보고 템플릿을 만들어 보시면 되겠습니다.

백준으로 배우는 파이썬 02. 1998년생인 내가 태국에서는 2541년생?!

토로토 — Mon, 16 Sep 2024 12:48:04 +0900

baekjoon/18108.py at main · wonhj12/baekjoon

백준 문제 풀이. Contribute to wonhj12/baekjoon development by creating an account on GitHub.

github.com

백준으로 배우는 파이썬 01. ??!

torotoblog.tistory.com

문제

ICPC Bangkok Regional에 참가하기 위해 수완나품 국제공항에 막 도착한 팀 레드시프트 일행은 눈을 믿을 수 없었다. 공항의 대형 스크린에 올해가 2562년이라고 적혀 있던 것이었다.
불교 국가인 태국은 불멸기원(佛滅紀元), 즉 석가모니가 열반한 해를 기준으로 연도를 세는 불기를 사용한다. 반면, 우리나라는 서기 연도를 사용하고 있다. 불기 연도가 주어질 때 이를 서기 연도로 바꿔 주는 프로그램을 작성하시오.

입출력과 사칙연산 시르즈의 8단계 문제는 1998년생인 내가 태국에서는 2541년생?!(18108)입니다. 이번 문제의 핵심은 입력 값을 정수로 변환해 주는 건데요, int() 함수를 사용해서 간단하게 정수로 변환이 가능합니다.

입력

서기 연도를 알아보고 싶은 불기 연도 y가 주어진다. (1000 ≤ y ≤ 3000)

입력으로는 1000 ~ 3000 사이의 숫자가 주어집니다. 숫자라고 해서 정수 타입으로 들어오는게 아니라는 것을 잘 기억해야 합니다.

출력

불기 연도를 서기 연도로 변환한 결과를 출력한다.

코드

year = int(input())
print(year - 543)

input() 함수는 문자열 타입으로 입력을 받아옵니다. 그렇기 때문에 int() 함수를 사용해서 문자열을 정수로 변환해 주어야 합니다. 그러면 이제 뺄셈 연산이 가능해집니다. 불멸기원과 서기 연도의 차이가 543년이기 때문에 그만큼 뺀 연도를 출력해주면 되겠죠.

코드를 실행해 보면 입력 뒤에 성공적으로 ??!를 붙여서 출력하는 것을 볼 수 있습니다.

백준으로 배우는 파이썬 01. ??!

토로토 — Mon, 16 Sep 2024 09:39:50 +0900

baekjoon/10926.py at main · wonhj12/baekjoon

백준 문제 풀이. Contribute to wonhj12/baekjoon development by creating an account on GitHub.

github.com

백준으로 배우는 C 언어 20. 별 찍기 - 2

이번 문제는 18. 별 찍기 - 1 문제와 비슷한데요, 별을 오른쪽 정렬로 해야 하기 때문에 조금 까다로운 부분이 있습니다. 프로그래밍을 처음 접하시는 분들은 조금 어렵게 느끼실 수도 있는데요,

torotoblog.tistory.com

문제

준하는 사이트에 회원가입을 하다가 joonas라는 아이디가 이미 존재하는 것을 보고 놀랐다. 준하는 놀람을 ??!로 표현한다. 준하가 가입하려고 하는 사이트에 이미 존재하는 아이디가 주어졌을 때, 놀람을 표현하는 프로그램을 작성하시오.

입출력과 사칙연산 시리즈의 7단계 문제 ??!(10926)는 주어진 입력 뒤에 ??!를 붙여서 출력해야 하는 문제입니다. 어렵지 않은 문제니까 바로 풀어 보도록 하죠.

입력

첫째 줄에 준하가 가입하려고 하는 사이트에 이미 존재하는 아이디가 주어진다. 아이디는 알파벳 소문자로만 이루어져 있으며, 길이는 50자를 넘지 않는다.

입력으로는 50자 미만의 문자열이 주어집니다. 파이썬에서는 길이는 크게 의미가 없기 때문에 문자열인 것만 알고 넘어가면 되겠네요.

출력

첫째 줄에 준하의 놀람을 출력한다. 놀람은 아이디 뒤에 ??!를 붙여서 나타낸다.

코드

id = input()
print(id + '??!')

먼저 input() 함수를 사용해서 입력을 id 변수에 저장해 줍니다. 그다음 print() 함수를 사용해서 출력을 해주면 되는데요, 파이썬에서는 문자열을 합치는 여러 방법들이 있지만 이번 경우에는 +를 사용해서 문자열을 합쳐주면 됩니다. ,를 사용하면 두 문자열 사이에 공백이 생기기 때문에 사용하려면 추가적인 공정이 필요하죠.

코드를 실행해 보면 입력 뒤에 성공적으로 ??!를 붙여서 출력하는 것을 볼 수 있습니다.

백준으로 배우는 파이썬 02. 1998년생인 내가 태국에서는 2541년생?!

baekjoon/18108.py at main · wonhj12/baekjoon백준 문제 풀이. Contribute to wonhj12/baekjoon development by creating an account on GitHub.github.com 백준으로 배우는 파이썬 01. ??!baekjoon/10926.py at main · wonhj12/baekjoon백준 문제

torotoblog.tistory.com

플러터 GoRouter를 사용한 MVVM 아키텍처 적용

토로토 — Sun, 15 Sep 2024 11:08:10 +0900

프로젝트 디자인 패턴에는 여러 가지가 있지만, 저는 그중에서 MVVM(Model, View, View Model) 아키텍처를 가장 선호합니다. MVVM 아키텍처는 화면과 로직이 분리되어 더욱 직관적으로 파일 관리가 가능합니다. View에는 UI와 관련된 내용만, View Model에는 동작 로직과 관련된 내용만 작성해서 보다 직관적으로 파일 내용을 유추할 수 있도록 하는 것이죠.

GoRouter은 플러터에서 제공하는 공식 패키지 중 하나인데요, 라우팅 기능을 통해 편리하게 페이지 이동이 가능하도록 돕는 패키지입니다. GoRouter를 사용하면 에러, 리디렉팅 등 여러 라우팅 관련 기능들을 적용할 수 있습니다. 이번 포스트에서는 GoRouter를 사용하면서 MVVM 아키텍처를 적용하는 방법에 대해서 알려드리려 합니다.

flutter_examples/mvvm_go_router/lib at main · wonhj12/flutter_examples

Flutter examples for blog. Contribute to wonhj12/flutter_examples development by creating an account on GitHub.

github.com

플러터 다크모드 설정 페이지 만들기

앱 개발을 하다 보면 설정 페이지를 만들게 되는 시점이 옵니다. 알림, 소리, 진동 등 설정부터 개인 정보 처리 등 간단한 앱이어도 최소한의 설정 관리가 필요한 법이죠. 많은 앱들이 가지고 있

torotoblog.tistory.com

우선, 라우팅 관리를 위한 go_router와 데이터 관리를 위한 provider 패키지를 설치해 주도록 하겠습니다. 터미널에서 아래 명령어를 입력해 패키지를 설치해 주세요.

flutter pub add go_router
flutter pub add provider

UserModel 생성

MVVM 아키텍처의 첫 구성 요소인 모델(Model)을 먼저 만들어 보겠습니다. 모델에는 전역적으로 관리되어야 하는 변수들이 저장됩니다. 예를 들어, 사용자 모델에는 이름, 아이디, 나이 등의 정보들을 저장하게 되죠. 이번 포스트에서는 간단하게 nickName 하나의 데이터만 다루는 모델을 만들어 보겠습니다.

import 'package:flutter/material.dart';

class UserModel with ChangeNotifier {
  String? nickName;
  UserModel({this.nickName});
}

Home View Model 생성

모델을 만들었다면, 이제는 모델에 저장된 데이터를 활용해야겠죠. HomeView에서 사용할 HomeViewModel을 만들어 보겠습니다. 우선은 UserModel과 BuildContext를 매개 변수로 받아주어야 합니다. UserModel은 사용자의 데이터를 저장하고 있는 모델이고요, BuildContext는 위젯 조작을 위해 필요한 객체인데, 특히 페이지 라우팅 등에서 사용됩니다. 마지막으로, 뷰모델이 생성되면 resetNickname() 함수를 통해서 닉네임을 초기화해 주도록 하겠습니다.

UserModel userModel;
BuildContext context;
HomeViewModel({required this.userModel, required this.context}) {
  // 닉네임 초기화
  resetNickname();
}

resetNickname() 함수는 랜덤 닉네임을 생성하고 모델에 저장하는 함수입니다. 0~99 사이의 랜덤 숫자를 선택해 닉네임을 모델에 저장합니다. 모델에 데이터를 저장하는 방법은 간단합니다. 6번 줄처럼 변수에 바로 접근하면 되는데요, 중요한 점은 닉네임을 변경한 후 notifyListeners() 함수를 사용해 화면을 새롭게 그려주어야 한다는 것입니다.

/// 닉네임을 랜덤하게 변경하는 함수
///
/// 0 ~ 99 사이 랜덤한 숫자 생성 후 `닉네임 00` 형식으로 닉네임 지정
void resetNickname() {
  int num = Random().nextInt(100);
  userModel.nickName = '닉네임 $num';

  notifyListeners();
}

onPressedNicknameBtn() 함수는 페이지 이동 버튼을 클릭했을 때 NicknameView로 화면 이동을 하는 함수입니다. 처음에 매개 변수로 받았던 BuildContext를 여기서 사용하게 되는데요, GoRouter의 go() 함수와 함께 사용해서 /home/nickname 주소로 라우팅해 주겠습니다.

/// Nickname View로 이동하는 함수
void onPressedNicknameBtn() {
  context.go('/home/nickname');
}

전체 코드입니다.

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:mvvm_go_router/models/user_model.dart';

class HomeViewModel with ChangeNotifier {
  UserModel userModel;
  BuildContext context;
  HomeViewModel({required this.userModel, required this.context}) {
    // 닉네임 초기화
    resetNickname();
  }

  /// 닉네임을 랜덤하게 변경하는 함수
  ///
  /// 0 ~ 99 사이 랜덤한 숫자 생성 후 `닉네임 00` 형식으로 닉네임 지정
  void resetNickname() {
    int num = Random().nextInt(100);
    userModel.nickName = '닉네임 $num';

    notifyListeners();
  }

  /// Nickname View로 이동하는 함수
  void onPressedNicknameBtn() {
    context.go('/home/nickname');
  }
}

Home View 생성

이번에는 HomeView를 만들어 보겠습니다. 간단한 구성입니다. 화면 중앙에 닉네임을 표시하고, 그 아래로 닉네임 변경과 화면 이동 버튼을 배치했습니다.

15번 줄을 살펴보면 provider를 통해서 HomeViewModel을 받아오고 있습니다. 이 뷰모델을 사용해서 텍스트 문구를 출력하거나 버튼 클릭 이벤트 등을 처리하는 것을 보실 수 있습니다. UserModel에 접근해야 할 때도 25번 줄처럼 뷰모델을 통해서 접근하시면 됩니다. 이렇게 하면 View 파일에서는 UI를 그리는 함수들만 존재하게 됩니다. 가독성이 매우 올라가게 되죠.

import 'package:flutter/material.dart';
import 'package:mvvm_go_router/view_models/home_view_model.dart';
import 'package:provider/provider.dart';

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    HomeViewModel homeViewModel = context.watch<HomeViewModel>();

    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 닉네임 텍스트
            Text(homeViewModel.userModel.nickName ?? '-'),
            const SizedBox(height: 64),

            // 닉네임 변경 버튼
            ElevatedButton(
              onPressed: homeViewModel.resetNickname,
              child: const Text('닉네임 변경하기'),
            ),
            const SizedBox(height: 16),

            // Nickname View 이동 버튼
            ElevatedButton(
              onPressed: homeViewModel.onPressedNicknameBtn,
              child: const Text('페이지 이동'),
            )
          ],
        ),
      ),
    );
  }
}

NicknameView, NicknameViewModel 생성

이어서 Nickname View와 Nickname View Model을 만들어 보겠습니다. 우선 Nickname View에서 닉네임을 화면 중앙에 표시해 주고, Home View로 되돌아갈 수 있도록 뒤로 가기 버튼도 하나 만들어 주도록 하겠습니다.

import 'package:flutter/material.dart';
import 'package:mvvm_go_router/view_models/nickname_view_model.dart';
import 'package:provider/provider.dart';

class NicknameView extends StatelessWidget {
  const NicknameView({super.key});

  @override
  Widget build(BuildContext context) {
    NicknameViewModel nicknameViewModel = context.watch<NicknameViewModel>();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Nickname'),
        leading: IconButton(
          onPressed: nicknameViewModel.onPressedBackBtn,
          icon: const Icon(Icons.arrow_back_ios_new),
        ),
      ),
      body: Center(child: Text(nicknameViewModel.userModel.nickName ?? '-')),
    );
  }
}

NicknameViewModel에는 뒤로 가기 버튼을 눌렀을 때 HomeView로 되돌아갈 수 있도록 onPressedBackBtn() 함수를 만들어 주겠습니다. pop() 함수를 사용해서 한 화면 뒤로 이동할 수 있습니다. /home/nickname 경로를 통해 들어왔으니 /home으로 되돌아가겠죠.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:mvvm_go_router/models/user_model.dart';

class NicknameViewModel with ChangeNotifier {
  UserModel userModel;
  BuildContext context;
  NicknameViewModel({required this.userModel, required this.context});

  /// 뒤로 가기 버튼 클릭
  void onPressedBackBtn() {
    context.pop();
  }
}

AppRouter 생성

필요한 페이지를 다 만들었으니 이제 페이지간 라우팅을 구현해 보도록 하겠습니다. GoRouter() 함수의 routes 속성에 GoRoute 클래스를 사용해서 라우팅 될 페이지들을 등록해 주면 됩니다. path 속성에 uri를 입력해 주고, ChangeNotifierProvider()를 사용해서 뷰모델과 화면을 생성해 주면 됩니다. GoRoute 내에도 routes를 지정할 수 있기 때문에 하위 페이지들을 계속해서 생성할 수 있습니다.

initialLocation에는 첫 페이지 uri를 입력하면 됩니다. 대부분의 경우에는 로그인 화면 또는 홈 화면이 되겠죠.

import 'package:go_router/go_router.dart';
import 'package:mvvm_go_router/models/user_model.dart';
import 'package:mvvm_go_router/view_models/home_view_model.dart';
import 'package:mvvm_go_router/view_models/nickname_view_model.dart';
import 'package:mvvm_go_router/views/home_view.dart';
import 'package:mvvm_go_router/views/nickname_view.dart';
import 'package:provider/provider.dart';

class AppRouter {
  final UserModel userModel;
  AppRouter({required this.userModel});

  static GoRouter getRouter(UserModel userModel) {
    return GoRouter(
      initialLocation: '/home',
      routes: [
        GoRoute(
          path: '/home',
          builder: (context, state) => ChangeNotifierProvider(
            create: (context) =>
                HomeViewModel(userModel: userModel, context: context),
            child: const HomeView(),
          ),
          routes: [
            GoRoute(
              path: 'nickname',
              builder: (context, state) => ChangeNotifierProvider(
                create: (context) =>
                    NicknameViewModel(userModel: userModel, context: context),
                child: const NicknameView(),
              ),
            )
          ],
        )
      ],
    );
  }
}

MainApp 수정하기

마지막으로 MainApp 클래스만 수정하면 됩니다. 기존 MaterialApp 위젯을 통해 화면을 바로 그리던 것을 MaterialApp.router를 사용해서 라우터를 적용시켜 주면 됩니다. 우선 UserModel과 라우터를 선언하고, 이어서 MaterialApp의 routerConfig 속성으로 라우터를 입력해 주면 됩니다.

import 'package:flutter/material.dart';
import 'package:mvvm_go_router/config/app_router.dart';
import 'package:mvvm_go_router/models/user_model.dart';

void main() {
  runApp(const MainApp());
}

// Models
UserModel userModel = UserModel();

// Router
final _router = AppRouter.getRouter(userModel);

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

이제 앱을 실행하고 버튼들을 클릭해 보면 닉네임이 변경되고, 페이지 이동을 하더라도 변경된 닉네임이 그대로 유지되는 것을 보실 수 있습니다. 지금은 닉네임 하나만 사용했지만, 실제 앱에서는 더 복잡하고 많은 변수를 저장하게 되겠죠. 모델을 여러 개 만들어서 사용하는 것도 가능합니다.

초보자를 위한 깃허브 사용법 및 커밋 관리 방법

토로토 — Wed, 28 Aug 2024 20:10:36 +0900

개발자가 되면 깃(Git)을 많이 사용하게 됩니다. 깃은 버전 관리를 도와주는 툴인데요, 업데이트된 내용들을 기록하고 언제든지 과거 버전으로 되돌릴 수 있도록 하는 기능을 제공합니다. 버전 관리를 사용하게 되면 개발을 하다 코드가 꼬이게 되는 상황이 생기더라도 정상 작동하던 과거 버전으로 돌아갈 수 있죠. 또한 팀원들과 함께 프로젝트를 진행할 때도 큰 도움이 됩니다. 각자 맡은 파트를 개인 컴퓨터에서 작업하고, 추후에 하나로 합치는 것이 용이하기 때문이죠. 만약 깃을 사용하지 않는다면 코드를 일일이 대조해 가며 업데이트해야 하는데, 이러면 시간도 시간이지만 실수가 생길 확률이 올라갑니다. 깃은 이런 점들을 손쉽게 관리해 주기 때문에 개발자에게 떼려야 뗄 수가 없는 존재가 되었습니다.

Homebrew를 사용한 맥북 플러터 설치하기

torotoblog.tistory.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

깃허브(Github) 레포지토리 생성하기

깃은 개인 컴퓨터(로컬 저장소)와 서버(원격 저장소)로 분리되어 버전을 관리합니다. 개발자 개인이 로컬 저장소에서 개발과 버전 관리를 진행한 후 원격 저장소에 업데이트하여 프로젝트에 참여하는 모든 인원들이 동일한 버전을 가져올 수 있도록 하는 거죠. 깃허브(Github)는 원격 저장소를 제공해 주는 서비스입니다. 깃허브를 통해서 프로젝트를 손쉽게 만들고, 관리, 공유할 수 있기 때문에 많은 개발자들이 사용하고 있습니다.

우선은 깃허브에서 레포지토리를 생성해 주도록 하겠습니다. 레포지토리 이름은 프로젝트명을 그대로 입력하거나 알기 쉽도록 정해주면 됩니다. 프로젝트 설명이나 공개 설정은 상황에 맞게 설정해 주면 되고요. 다음으로는 README와 gitignore인데요, 저는 개인적으로 항상 포함시키는 편입니다. README 파일은 레포지토리에 대한 상세한 설명을 적는 파일이지만, 저는 커밋 컨벤션 가이드를 작성해서 사용합니다. 이렇게 하면 매번 구글링을 하지 않아도 금방 찾을 수 있어 편리하더라고요. 물론 개발이 끝난 후에는 원래의 용도대로 상세 설명을 적어두어야겠지요. gitignore 파일은 깃 버전 관리에 포함시키지 않을 파일 또는 폴더를 지정하는 파일입니다. 빌드 파일이나 환경 변수, 패키지 등 버전 관리에 포함되지 않아도 되는 파일들은 가지고 있을 필요가 없겠죠? 마지막으로 상황에 맞게 라이선스도 선택하셨다면 Create repository 버튼을 클릭해서 레포지토리를 생성할 수 있습니다.

로컬 저장소에 깃 내려받기

그럼 위 사진처럼 레포지토리가 생성된 것을 확인할 수 있습니다. 참고로 README 파일을 수정하면 이 페이지에 반영이 됩니다. 지금은 막 생성됐기 때문에 제목만 나오고 있는 상태네요. 아무튼, 우측 상단에 있는 Code 버튼을 클릭하면 레포지토리 주소가 나오는데요, 이 주소를 복사해 주겠습니다.

이제 컴퓨터에서 터미널을 실행시킨 후 cd 명령어를 사용해서 프로젝트를 저장할 위치로 이동해 줍시다. 그다음 방금 복사한 주소와 함께 아래 명령어를 입력하면 레포지토리가 다운로드됩니다. 이제 깃허브를 통해 프로젝트를 관리할 준비가 끝났습니다.

git clone [복사한 레포지토리 주소]

README, gitignore 수정하기

깃 클론을 마친 후 저는 가장 먼저 README와 gitignore 파일을 수정합니다. 아래 코드는 제가 사용하는 README 템플릿 파일입니다. 이렇게 README 파일에 저장해 두면 매번 찾아보지 않아도 프로젝트 내에서 바로 확인이 가능해서 간편하게 사용하고 있습니다. VS Code를 사용하신다면 cmd + shift + v 키를 눌러서 위 사진과 같은 프리뷰 창을 열어 더욱 편하게 볼 수도 있습니다. README 파일은 마크다운 형식으로 되어 있다는 점을 참고해서 개인 스타일에 맞게 조금씩 수정하셔도 좋을 것 같네요.

## 커밋 메시지 컨벤션

### 1. 커밋 유형 지정

커밋 유형은 영어로 작성한 후, `:` 로 제목과 분리
| 커밋 유형 | 의미 |
| ---------------- | ------------------------------------------------------------ |
| feat | 새로운 기능 추가 |
| fix | 버그 수정 |
| mod | 코드 구조 개선 & 크지 않은 수정 |
| style | 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 |
| design | CSS 등 사용자 UI 디자인 변경 |
| comment | 필요한 주석 추가 및 변경 |
| docs | 문서 수정 |
| refactor | 코드 리팩토링 |
| chore | 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore |
| test | 테스트 코드, 리팩토링 테스트 코드 추가 |
| rename | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
| remove | 파일을 삭제하는 작업만 수행한 경우 |
| !BREAKING CHANGE | 커다란 API 변경의 경우 |
| !HOTFIX | 급하게 치명적인 버그를 고쳐야 하는 경우 |

### 2. 본문 작성

커밋 유형 이후 제목과 본문은 한글로 작성하여 내용이 잘 전달될 수 있도록 할 것  
본문에는 변경한 내용과 이유 설명 (어떻게보다는 무엇 & 왜를 설명)

### 3. 마침표는 사용하지 않음

### 4. 제목은 50자 이내로 작성

### 5. 한 커밋에는 한 가지 문제만

추적 가능하게 유지해주기  
너무 많은 문제를 한 커밋에 담으면 추적하기 어려움

### 6. 여러가지 항목이 있다면 글머리 기호를 통해 가독성 높이기

```
- 변경 내용 1
- 변경 내용 2
- 변경 내용 3
```

### 7. 자신의 코드가 직관적으로 바로 파악할 수 있다고 생각하지 않기

### 바람직한 커밋

```
feat: 프로필에 모국어 설정 기능 추가
- lang 클릭 시 언어 목록 모달 띄워줌

design: 시간표 레이아웃 수정
- 요일 별 행 너비가 안 맞는 문제 해결
```

플러터 공식 gitignore

gitignore은 깃허브에서 많은 언어들에 대해 기본적으로 제공해주기는 하지만, 완벽하지는 않은 것 같더라고요. 그래서 저는 개발 스택 레포지토리에 공식적으로 배포돼 있는 gitignore을 검색해서 받아옵니다. 구글에 사용 중인 스택 gitignore(flutter gitignore 등)을 검색하면 웬만해서는 찾을 수 있습니다. 추가적으로 맥에서 사용되는 메타 파일인 .DS_Store도 gitignore에 추가해주고 있습니다. 이제 정말 초기 설정이 완료되었습니다. 다음 단계로 넘어가 보도록 하죠.

깃 커밋 유형

본격적인 깃 사용법에 앞서 깃 커밋 유형에 대해서 한 번 짚고 넘어가도록 하겠습니다. 프로젝트를 진행하다 보면 새로운 기능 개발, 디자인 수정, 코드 리팩토링, 주석 추가 등 다양한 작업을 하게 됩니다. 커밋 유형은 어떤 작업을 했는지 한눈에 알아볼 수 있도록 사전에 정의해 둔 카테고리입니다. 회사나 개인마다 조금씩의 차이는 있을 수 있지만, feat, fix, mod, style, design, comment, docs, refactor, chore, test, rename, remove, !BREAKING CHANGE, !HOTFIX 이렇게 14개의 커밋 유형을 많이 사용합니다. 저는 그중에서도 feat, fix, mod, design, chore, !HOTFIX 이렇게 6개를 가장 많이 사용합니다. 각 커밋 유형이 어떤 의미로 사용되는지는 앞서 제공해 드린 README 파일을 참조하면 좋을 것 같습니다.

커밋 유형을 잘 사용하면 한눈에 작업 내용 파악이 가능하다

커밋 유형은 커밋 제목과 함께 사용합니다. 커밋 유형을 입력한 후 세미콜론 :으로 분리해서 조금 더 상세한 제목을 달아주는 거죠. 아래와 같은 형식으로 작성하게 되면 커밋 로그를 확인할 때 한눈에 내용을 파악할 수 있습니다. 여러 사람들이 함께 작업하게 되면 더욱 정리가 잘 되겠죠?

fix: 홈 화면에서 버튼이 눌러지지 않던 오류 해결

깃 사용 방법

이제 본격적으로 깃을 사용하는 방법에 대해서 알아보도록 하겠습니다. 깃 사용은 크게 7가지 단계로 진행됩니다.

메인 브랜치(원격 저장소)에서 개인 브랜치로 분기 생성
코드 수정 등 작업 진행
스테이징 영역에 추가
로컬 저장소에 커밋
원격 저장소로 푸시
메인 브랜치에 병합
작업한 브랜치 삭제 및 메인 브랜치 내려받기

첫 단계에서는 메인 브랜치에서 새로운 분기점을 생성해야 합니다. 메인 브랜치는 일종의 원본 파일이라고 보시면 됩니다. 그렇기 때문에 메인 브랜치에서 분기를 생성한다는 것은 복사본을 만들어서 작업하는 것이라 할 수 있죠. 아래 코드를 입력하면 새로운 브랜치가 생겨나게 됩니다. 이때 브랜치명은 주로 개발자@작업명 형식으로 많이 생성합니다. 그래야 누가 어떤 작업을 하기 위해서 생성한 브랜치인지 알 수 있기 때문이죠.

git checkout -b [브랜치명]

checkout은 사실 다른 브랜치 이동하는 명령어입니다. 방금은 -b 옵션을 붙여서 브랜치를 생성하는 명령어가 됐지만, 옵션 없이 브랜치명만 입력한다면 해당 브랜치로 분기를 이동하게 되죠. 예를 들어 메인 브랜치로 이동하고 싶다면 아래 명령어를 입력하면 됩니다.

git checkout main

개인 작업 브랜치를 생성했다면 이제 작업을 진행하시면 됩니다. 코드를 마음껏 수정하셨다면 작업한 내용을 메인 브랜치로 합쳐야겠죠. 그러기 위해서는 먼저 스테이징 영역에 저장하는 과정을 거쳐야 합니다. 스테이징 영역은 커밋에 포함될 파일들을 임시로 저장하는 영역이라 생각하면 편리합니다. 예를 들어 A 파일과 B 파일을 수정했지만, A 파일의 수정 내용만 커밋하고 싶다면 A 파일만 스테이징 영역에 추가한 후 커밋을 진행하면 됩니다. 스테이징 영역에 파일을 추가하기 위해서는 아래 명령어를 입력하면 됩니다.

git add [파일명 혹은 폴더명]

보통의 경우에는 수정한 모든 파일들을 커밋하기 때문에 아래 명령어로 모든 파일을 추가하면 됩니다.

git add .

네 번째 단계는 로컬 저장소에 저장, 즉 커밋을 진행하는 단계입니다. 앞서 스테이징 영역에 파일을 추가했다면 아래 명령어를 통해서 커밋을 진행할 수 있습니다. 커밋을 할 때는 앞서 알려드린 커밋 유형을 활용해서 커밋 메시지를 작성하시면 좋습니다.

git commit -m '[커밋 메시지]'

만약 작업 내용이 많다면 부연 설명을 추가로 달아주면 나중에 이 커밋이 어떤 작업을 한 커밋인지 알아보기가 편리합니다. 작은따옴표를 닫지 않은 상태에서 엔터를 치면 다음 줄로 넘어가는데요, 여기에 부연 설명을 달아주고 따옴표를 닫으면 됩니다. 아래 예시를 보시면 조금 더 이해가 잘 되실 겁니다.

git commit -m 'fix: 홈 화면에서 버튼이 눌러지지 않던 오류 해결
- 버튼 클릭시 클릭 애니메이션 실행
- 버튼 클릭시 사용자 페이지로 이동'

커밋이 완료되었다면 원격 저장소에 푸시하는 작업을 진행해야 합니다. 그래야 다른 팀원들이 수정한 내용을 받아 볼 수 있기 때문이죠. 푸시하는 방법은 간단합니다. 아래 명령어를 입력하면 됩니다.

git push

브랜치를 생성하고 처음 푸시를 하면 위 사진처럼 upstream branch 설정이 되어있지 않다고 오류가 납니다. 그럴 때는 오류와 함께 제공되는 명령어를 복사해서 실행하면 문제가 해결됩니다. 이 오류가 생기지 않게 설정하는 방법도 있기는 하지만 저는 번거롭더라도 그냥 복사해서 실행하는 편입니다.

git push --set-upstream origin toroto@init

푸시까지 완료했다면 깃허브에서 메인 브랜치로 머지(merge)하는 작업만 남았습니다. 깃허브는 pull request라는 기능을 통해서 머지하기 전 팀원들이 다 함께 코드를 리뷰하는 과정을 가지도록 도와줍니다. 이 과정을 통해서 조금 더 안전하게 원본 파일을 유지할 수 있는 거죠.

방금 커밋을 푸시했기 때문에 깃허브 레포지토리에 들어가 보면 pull request를 생성하라는 메시지가 있습니다. Compare & pull request 버튼을 클릭해 주겠습니다.

팀원들이 변경 사항을 파악하기 쉽게 작업 내용을 적어준 후 Create pull request 버튼을 클릭하면 pull request가 열리게 됩니다. 작업 내용을 적을 때는 사진을 첨부하거나 어떤 파일을 어떻게 수정했는지 상세하게 작성하는 것이 좋습니다.

Pull request가 열리면 위 사진과 같이 팀원들이 변경 내용을 확인할 수 있습니다. 깃허브를 조금 더 활용한다면 n명의 팀원이 확인하는 등의 조건을 더 추가할 수도 있지만, 이건 다른 포스트에서 다뤄보도록 하겠습니다. 확인을 마쳤다면 Merge pull request 버튼을 클릭해서 머지를 진행해 줍니다.

커멧 메시지를 한 번 더 확인하고 Confirm merge 버튼을 클릭하면 머지가 완료됩니다. 브랜치가 머지되면 더 이상 pull request를 열 수 없기 때문에 저는 머지를 한 후 브랜치를 삭제하는 편입니다. 하지만 브랜치를 남겨두고 싶다면 굳이 삭제하지 않아도 문제는 없습니다.

레포지토리를 확인해 보면 커밋이 정상적으로 메인 브랜치에 머지된 것을 확인할 수 있습니다. 이제 다시 프로젝트로 돌아가서 방금 머지한 내용을 받아오겠습니다. 우선 메인 브랜치로 이동해 주도록 하겠습니다.

git checkout main

그다음 pull 명령어를 사용하면 최신 내역을 받아올 수 있습니다. 참고로 새로운 브랜치를 생성하기 전에는 항상 최신 내역을 받아온 후 진행하는 것을 추천드립니다.

git pull

마지막으로 이전에 작업한 브랜치를 삭제하면 깃을 사용한 버전 관리의 한 사이클이 완료됩니다. 이제 새로운 브랜치를 생성해서 다음 작업을 이어나가면 됩니다.

git branch -d [브랜치명]

깃 사용 팁

마지막으로 몇 가지 팁을 알려드리도록 하겠습니다.

하나의 커밋에는 하나의 작업만 포함하기. 한 커밋에 너무 많은 작업이 포함되면 작업 내용 추적과 버전 관리가 어려워집니다. 커밋을 많이 할수록 버전 관리가 용이해집니다.
푸시는 메인 작업이 끝난 시점에만 하기. 브랜치를 생성할 때 작업명을 명시하라고 했었는데요, 이 메인 작업이 끝나는 시점에 한 번만 푸시를 하는 것이 좋습니다. 그 과정에서 생기는 여러 소작업들은 1번에서도 얘기했듯이 커밋을 여러 번 하면서 관리하시는 게 좋습니다.
Pull request는 최대한 상세하기 작성하기. Pull request를 열면 팀원들이 내가 작업한 내용을 확인하게 됩니다. 팀원들도 물론 코딩을 잘하겠지만, 자신이 작업한 것이 아니기 때문에 어떤 문맥에서 코드를 수정했는지 파악하려면 시간이 걸립니다. 그렇기 때문에 상세하게 작업 내용을 적어두면 팀원들이 조금 더 편하고 빠르게 코드를 리뷰할 수 있습니다.

깃과 깃허브에 익숙해질수록 이걸 처음 생각한 사람은 어떤 사람일지 놀랍습니다. 깃허브가 없었다면 팀 프로젝트를 진행하기가 얼마나 어려웠을지.. 상상만 해도 끔찍하네요. 깃이 처음에는 조금 생소하고 어렵지만, 알게 될수록 사용하기도 편리하고 특히 버전 관리의 도움을 많이 받게 되는 것 같습니다. 언제든지 되돌릴 수 있으니 오류가 생길 걱정 없이 개발에만 집중할 수 있어 좋은 것 같네요.

Homebrew를 사용한 맥북 플러터 설치하기

토로토 — Fri, 9 Aug 2024 18:15:13 +0900

플러터로 개발을 하기 위해서는 가장 먼저 플러터를 설치해야겠죠? 플러터를 설치하는 방법엔 여러 가지가 있겠지만, 저는 homebrew를 사용해서 설치하는 방법에 대해서 알려드리려 합니다. Homebrew를 미리 깔아야 하기는 하지만 가장 깔끔하게 설치할 수 있어서 저는 이 방법을 제일 선호합니다. 이 포스트는 맥북 에어 m2 모델을 기반으로 작성되었다는 점을 알려드리며, 바로 시작해 보도록 하죠.

플러터 시작하기 01 : Scaffold

Scaffold는 플러터에서 사용되는 가장 기본적인 디자인 레이아웃입니다. 앱의 뼈대라고도 할 수 있죠. 이번 포스트에서는 Scaffold에서 주로 사용되는 속성(property) 몇 가지를 소개해 드리려고 합니

torotoblog.tistory.com

필요한 프로그램 설치하기

우선 플러터를 설치하기 앞서 미리 설치해야 하는 프로그램들이 있습니다. 안드로이드 스튜디오, Xcode, 구글 크롬이 바로 그 주인공입니다. 정확하게 말씀드리자면 이 프로그램들이 필수는 아니지만, 안드로이드, iOS, 웹 개발을 하다 보면 어차피 필요하게 되는 프로그램이죠.

Xcode는 앱스토어에서 받으실 수 있습니다.

안드로이드 스튜디오는 Android Developers 홈페이지에서 받으실 수 있습니다.

구글 크롬은 구글 홈페이지에서 받으실 수 있습니다.

추가로 Apple Silicon 칩, 즉 m1, m2, m3 맥북에 플러터를 설치하기 위해서는 우선 Rosetta Translation을 설치해 주어야 합니다. Rosetta Translation은 인텔 아키텍처를 arm 아키텍처로 변환해 주는 프로그램입니다. 터미널에서 다음 명령어를 입력하면 간단하게 설치가 완료됩니다. 이후에 비밀번호를 입력하라고 나오면 맥북 비밀번호를 입력하시면 됩니다.

sudo softwareupdate --install-rosetta --agree-to-license

플러터 설치하기

사전 준비가 끝났으니 이제 플러터를 설치해 보죠. 터미널에서 다음 명령어를 입력해서 homebrew를 통해 설치를 진행해 보겠습니다.

brew install --cask flutter

잠시 기다리면 설치가 완료됩니다. Homebrew를 통해서 설치하면 환경 변수를 설정할 필요가 없어서 매우 편리하네요. 그럼 이제 플러터가 정상적으로 설치됐는지 알아보기 위해 플러터 닥터를 실행해 봅시다. 터미널에 다음 명령어를 입력하면 설치 현황을 볼 수 있습니다.

flutter doctor

잠시 기다리면 위 사진처럼 리포트가 나오는데요, 어디에서 설치가 완료되지 않았는지 쉽게 확인할 수 있어서 매우 편리합니다. 저는 Android toolchain과 Xcode에서 오류가 났네요. 플러터를 처음 설치할 때 가장 흔하게 나는 오류이기도 하죠. 하나씩 해결해 보도록 하겠습니다.

Android toolchain 오류 해결하기

Android toolchain 오류 내역을 보면 두 가지 오류가 있는 것을 볼 수 있습니다. 첫 번째는 cmdline-tools를 찾을 수 없어서 나는 문제고요, 두 번째는 Android license를 아직 확인하지 않아서 나는 오류입니다. 우선 첫 번째 문제부터 해결해 보겠습니다.

안드로이드 스튜디오를 실행한 후 More Actions > SDK Manager로 들어가 줍시다.

SDK Tools 탭으로 들어간 후 Android SDK Command-line tools (latest)를 찾아 체크하고 우측 하단에 OK 버튼을 클릭해 줍시다. 이어서 나오는 라이선스에 동의하고 설치를 진행하시면 됩니다. 이로써 첫 번째 문제는 해결됐습니다.

두 번째 문제는 간단하게 해결할 수 있습니다. 터미널에서 다음 명령어를 입력한 후 나오는 라이선스에 동의하며 진행하기만 하면 됩니다. y를 입력하면서 진행하시면 됩니다.

flutter doctor --android-licenses

Xcode 오류 해결하기

이번에는 Xcode에서 난 오류들을 해결해 보도록 하겠습니다. 첫 번째는 Xcode를 받은 후 아직 설치가 완료되지 않았기 때문에 나는 오류이고요, 두 번째는 iOS 개발에 필요한 CocoaPods가 설치되지 않아서 나는 오류입니다. 두 오류 모두 간단하게 해결이 가능합니다.

우선 첫 번째 오류는 다음 두 개의 명령어를 실행하면 간단하게 해결이 됩니다. 비밀번호를 입력하라고 나오면 이번에도 역시 맥북 비밀번호를 입력하시면 됩니다.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

CocoaPods는 homebrew를 통해서 설치가 가능합니다. 터미널에서 다음 명령어를 입력한 후 잠시 기다리면 설치가 완료됩니다.

brew install cocoapods

마무리

이제 마지막으로 한번 더 플러터 닥터를 실행한 후 위 사진처럼 문제가 없다고 나오면 성공적으로 설치가 완료된 것입니다. 이제 안드로이드 스튜디오나 VS Code 등을 사용해서 플러터 개발을 시작하시면 됩니다.

플러터 커스텀 카메라 만들기

토로토 — Fri, 19 Jul 2024 00:36:04 +0900

플러터에서 카메라를 사용해야 할 때 어떻게 하시나요? image_picker 같이 쉽게 사용할 수 있는 패키지를 많이들 사용하리라 생각합니다. 저도 과거엔 image_picker를 많이 사용했었는데요, 최근에 프로젝트를 진행하다가 카메라 UI를 수정해야 할 일이 생겨서 알아보던 중 camera 패키지가 있다는 것을 알게 되었습니다. 이 패키지를 사용하면 UI를 마음대로 커스텀해서 그릴 수도 있는 것과 동시에 카메라에 있는 기능들도 정상적으로 사용이 가능합니다.

flutter_examples/custom_camera/lib at main · wonhj12/flutter_examples

Flutter examples for blog. Contribute to wonhj12/flutter_examples development by creating an account on GitHub.

github.com

플러터 다크모드 설정 페이지 만들기

torotoblog.tistory.com

커스텀 카메라를 만들기 위해서는 일단 3개의 패키지를 설치해야 합니다. 카메라 모듈인 camera, 촬영한 사진을 임시로 저장해 줄 path_provider, 그리고 데이터 관리를 위한 provider가 필요합니다. 터미널에 다음 코드를 입력해서 프로젝트에 필요한 패키지들을 설치해 줍시다.

flutter pub add camera
flutter pub add path_provider
flutter pub add provider

카메라 권한 설정하기

요즘에는 앱을 만들 때 신경 써야 할 보안 가이드라인이 많습니다. 카메라 역시 사용자에게 권한을 요청해야 하죠. 아이폰은 info.plist 파일을, 안드로이드는 AndroidManifest.xml 파일을 수정하면 됩니다. 우선은 아이폰을 먼저 설정해 보겠습니다. 프로젝트 폴더에서 ios/Runner/Info.plist 파일 가장 하단에 다음 코드를 입력해 주세요. </dict> 직전에 추가하시면 됩니다.

<key>NSMicrophoneUsageDescription</key>
<string>Microphone access for video recording</string>
<key>NSCameraUsageDescription</key>
<string>Camera access for camera app</string>

안드로이드는 설정할게 많습니다. 우선 android/app/build.gradle 파일에서 minSdk 값을 수정해야 합니다. flutter.minSdkVersion으로 되어있던 것을 21로 수정해 주세요.

minSdk = 21

다음은 android/app/src/main/AndroidManifest.xml 파일에 다음과 같이 6줄을 추가하시면 됩니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
    <uses-feature android:name="android.hardware.camera" android:required="true"/>
    <application
        ...
        android:requestLegacyExternalStorage="true"
        android:preserveLegacyExternalStorage="true">
        <activity
        ...

이제 에뮬레이터 또는 실제 기기에서 앱을 실행하면 카메라 권한을 묻는 창이 뜹니다. 다만 iOS 에뮬레이터의 경우에는 카메라 사용 자체가 막혀있기 때문에 실제 기기에서 테스트해야 합니다.

MainApp 구성

MainApp은 크게 수정할 내용은 없지만, ChangeNotifierProvider를 통해서 HomeViewModel과 HomeView를 생성해 주면 됩니다.

import 'package:custom_camera/view_models/home_view_model.dart';
import 'package:custom_camera/views/home_view.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ChangeNotifierProvider<HomeViewModel>(
          create: (context) => HomeViewModel(),
          child: const HomeView(),
        ),
      ),
    );
  }
}

Home View 구성

이제 카메라를 만들기 위해 필요한 페이지들을 하나씩 만들어 가보죠. 우선 홈 화면부터 만들어 보겠습니다. 홈 화면은 두 가지 위젯으로 구성했습니다. 촬영한 사진을 보여줄 컨테이너 아래에 카메라를 실행시키는 버튼을 배치했습니다. 사진 컨테이너는 homeViewModel에 저장된 imgPath가 있는지 확인한 후 빈 컨테이너 또는 사진을 보여주게 됩니다. 사진 촬영 버튼을 클릭하면 openCamera 함수를 통해서 카메라를 실행시킵니다.

import 'dart:io';
import 'package:custom_camera/view_models/home_view_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('홈'), centerTitle: true),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            // 촬영한 이미지가 있는지 확인
            SizedBox(
              width: 300,
              height: 400,
              child: context.watch<HomeViewModel>().imgPath != null
                  ? Image.file(
                      File(context.read<HomeViewModel>().imgPath!),
                      fit: BoxFit.cover,
                    )
                  : Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius:
                            const BorderRadius.all(Radius.circular(16)),
                      ),
                      child: const Icon(Icons.camera_alt,
                          size: 48, color: Colors.grey),
                    ),
            ),
            const SizedBox(height: 16),

            // 사진 촬영 버튼
            SizedBox(
              width: 300,
              height: 48,
              child: ElevatedButton(
                onPressed: () {
                  context.read<HomeViewModel>().openCamera(context);
                },
                child: const Text(
                  '사진 촬영',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

HomeViewModel 생성

뷰모델을 만들어 보겠습니다. 촬영한 사진의 저장 경로를 저장할 imgPath 변수와 openCamera 함수로 구성되어 있습니다. openCamera 함수를 살펴보면 Navigator.push를 통해 카메라 화면을 실행시키고, 화면이 닫혔을 때 반환된 값을 받아오는 것을 보실 수 있습니다. 반환된 값을 imgPath에 저장하고 NotifyListeners를 통해 뷰를 재구성합니다.

import 'package:custom_camera/view_models/camera_view_model.dart';
import 'package:custom_camera/views/camera_view.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomeViewModel with ChangeNotifier {
  String? imgPath;

  void openCamera(BuildContext context) async {
    // CameraView가 닫힐 때 반환된 값을 저장
    String? tempImg = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ChangeNotifierProvider(
          create: (context) => CameraViewModel(),
          child: const CameraView(),
        ),
      ),
    );

    if (tempImg != null) {
      imgPath = tempImg;
    } else {
      debugPrint('Image path error');
    }

    notifyListeners();
  }
}

CameraView 구성

카메라 화면을 만들어 보겠습니다. 카메라 화면은 가장 아래에 카메라로 촬영 중인 화면을 띄우고, 그 위에 스택으로 촬영 버튼이나 플래시, 전환 등의 버튼을 배치하는 형식으로 구성되어 있습니다. camera 패키지에서 제공하는 CameraPreview를 사용해서 가장 하단에 촬영 화면을 띄울 수 있습니다. 삼항 연산자를 사용해서 카메라가 로딩 중일 때는 로딩 창을 그리고, 로딩이 완료됐을 때 CameraPreview가 뜨도록 하면 됩니다. 나머지 버튼들은 IconButton과 GestureDetector을 사용해서 처리했습니다.

import 'package:camera/camera.dart';
import 'package:custom_camera/view_models/camera_view_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CameraView extends StatefulWidget {
  const CameraView({super.key});

  @override
  State<CameraView> createState() => _CameraViewState();
}

class _CameraViewState extends State<CameraView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          context.watch<CameraViewModel>().isLoaded
              ? Positioned.fill(
                  child: CameraPreview(
                      context.watch<CameraViewModel>().controller),
                )
              : const Center(child: CircularProgressIndicator()),

          // 상단 메뉴 버튼
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(0, 16, 0, 0),
              child: Align(
                alignment: Alignment.topCenter,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    // 플래시 토글 버튼
                    IconButton(
                      onPressed: () {
                        context.read<CameraViewModel>().toggleFlash();
                      },
                      icon: Icon(
                        context.read<CameraViewModel>().isFlashOn
                            ? Icons.flash_on_outlined
                            : Icons.flash_off_outlined,
                        size: 24,
                        color: Colors.black,
                      ),
                    ),

                    // 카메라 전환 버튼
                    IconButton(
                      onPressed: () {
                        context.read<CameraViewModel>().changeCameraDirection();
                      },
                      icon: const Icon(
                        Icons.cameraswitch_outlined,
                        size: 24,
                        color: Colors.black,
                      ),
                    ),

                    // 닫기 버튼
                    IconButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      icon: const Icon(
                        Icons.close,
                        size: 24,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

          // 하단 촬영 버튼
          SafeArea(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                padding: const EdgeInsets.only(bottom: 64),
                child: GestureDetector(
                  onTap: () {
                    // 사진 촬영 함수 호출
                    context.read<CameraViewModel>().takePicture(context);
                  },
                  child: Icon(
                    Icons.circle,
                    size: 64,
                    color: context.read<CameraViewModel>().canTakePicture
                        ? Colors.white
                        : Colors.grey,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

CameraViewModel 생성

카메라를 사용하기 위해서는 여러 준비 과정을 거쳐야 합니다. 우선 _initialize() 함수를 정의하고 초기 설정을 해보겠습니다. availableCameras() 함수는 기기에서 사용 가능한 카메라들의 리스트를 반환합니다. 그중 첫 번째 카메라를 사용해서 CameraController를 정의할 겁니다. ResolutionPreset은 사진의 화질을 설정하고 imageFormatGroup는 이미지 저장 형식, enableAudio는 오디오 녹음 여부를 결정합니다. 카메라 컨트롤러를 정의했다면 controller.initialize를 통해 컨트롤러를 초기화해 줍니다.

/// 초기 설정
Future<void> _initialize() async {
  // 사용 가능한 카메라 불러오기
  _cameras = await availableCameras();

  // 카메라 기본 설정
  controller = CameraController(_cameras[0], ResolutionPreset.max,
      imageFormatGroup: ImageFormatGroup.jpeg, enableAudio: false);

  await controller.initialize().catchError((e) {
    if (e is CameraException && e.code == 'CameraAccessDenied') {
      // 카메라 권한 설정
      debugPrint('Camera access denied');
    } else {
      // 카메라 오류
      debugPrint('Camera error: $e');
    }
  });

  // 카메라 설정 완료
  isLoaded = controller.value.isInitialized;
  canTakePicture = isLoaded;
  notifyListeners();
}

dispose 함수를 사용해서 카메라 사용이 끝나면 컨트롤러를 자동으로 삭제하도록 설정해 주도록 하겠습니다.

@override
void dispose() {
  // 카메라 controller 해제
  controller.dispose();
  super.dispose();
}

사진을 찍는 함수를 만들어 보겠습니다. 컨트롤러가 초기화되지 않았거나 사진을 이미 찍고 있는 중이라면 더 이상 진행이 되면 안 되겠죠. 오류 상황이 아니라면 제일 먼저 사진이 임시로 저장될 경로를 생성해야 합니다. path_provider 패키지의 getTemporaryDirectory() 함수를 사용해서 임시 경로를 받아와 주세요. 그다음 사진의 이름도 지정해서 최종 경로를 만들면 됩니다. 저는 사진이 찍히는 시간을 가지고 이름을 만들었습니다. 사진을 찍는 방법은 간단합니다. controller.takePicture() 함수를 사용하면 사진이 찍히게 되고요, 이렇게 찍힌 사진을 경로에 저장해 주면 됩니다. 사진 촬영이 끝났다면 Navigator.pop()을 통해 카메라 화면을 닫아주는데요, 이때 사진 경로를 반환해 주어야 합니다.

/// 사진 촬영
/// 촬영한 사진을 임시 저장 디렉토리에 저장 후 주소 반환
Future<void> takePicture(BuildContext context) async {
  // 카메라 init 오류 또는 사진 찍는 중
  if (!controller.value.isInitialized || controller.value.isTakingPicture) {
    return;
  }

  try {
    // 임시 저장 장소와 이름 생성
    Directory directory = await getTemporaryDirectory();
    final imgPath = '${directory.path}/${DateTime.now()}.jpeg';
    // 사진 촬영
    final XFile file = await controller.takePicture();
    await file.saveTo(imgPath);
    if (context.mounted) Navigator.pop(context, imgPath);
  } catch (e) {
    // 사진 촬영 오류
    debugPrint('Error taking picture');
  }
}

플래시는 FlashMode를 통해서 설정할 수 있습니다. off, always, auto 이렇게 세 가지 모드가 있으니 잘 활용해 보시면 좋겠네요. 카메라 전환은 controller.setDescription을 통해서 사용할 카메라를 변경하면 됩니다. 초기화할 때 불러온 카메라 리스트에서 선택하면 되겠죠.

/// 플래시 토글
void toggleFlash() {
  if (isFlashOn) {
    controller.setFlashMode(FlashMode.off);
    isFlashOn = false;
  } else {
    controller.setFlashMode(FlashMode.always);
    isFlashOn = true;
  }

  notifyListeners();
}

/// 카메라 전환
void changeCameraDirection() {
  if (controller.description.lensDirection == CameraLensDirection.back) {
    controller.setDescription(_cameras[0]);
  } else {
    controller.setDescription(_cameras[1]);
  }
}

아래 전체 코드를 보시면 조금 더 이해가 쉽게 되실 겁니다.

import 'dart:io';

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class CameraViewModel with ChangeNotifier {
  CameraViewModel() {
    _initialize();
  }

  late List<CameraDescription> _cameras;
  late CameraController controller;

  bool isLoaded = false; // 카메라 준비 완료 여부
  bool canTakePicture = false; // 사진 촬영 가능 여부
  bool isFlashOn = false; // 플래시 on/off 여부

  /// 초기 설정
  Future<void> _initialize() async {
    // 사용 가능한 카메라 불러오기
    _cameras = await availableCameras();

    // 카메라 기본 설정
    controller = CameraController(_cameras[0], ResolutionPreset.max,
        imageFormatGroup: ImageFormatGroup.jpeg, enableAudio: false);

    await controller.initialize().catchError((e) {
      if (e is CameraException && e.code == 'CameraAccessDenied') {
        // 카메라 권한 설정
        debugPrint('Camera access denied');
      } else {
        // 카메라 오류
        debugPrint('Camera error: $e');
      }
    });

    // 카메라 설정 완료
    isLoaded = controller.value.isInitialized;
    canTakePicture = isLoaded;
    notifyListeners();
  }

  @override
  void dispose() {
    // 카메라 controller 해제
    controller.dispose();
    super.dispose();
  }

  /// 사진 촬영
  /// 촬영한 사진을 임시 저장 디렉토리에 저장 후 주소 반환
  Future<void> takePicture(BuildContext context) async {
    // 카메라 init 오류 또는 사진 찍는 중
    if (!controller.value.isInitialized || controller.value.isTakingPicture) {
      return;
    }

    try {
      // 임시 저장 장소와 이름 생성
      Directory directory = await getTemporaryDirectory();
      final imgPath = '${directory.path}/${DateTime.now()}.jpeg';
      // 사진 촬영
      final XFile file = await controller.takePicture();
      await file.saveTo(imgPath);
      if (context.mounted) Navigator.pop(context, imgPath);
    } catch (e) {
      // 사진 촬영 오류
      debugPrint('Error taking picture');
    }
  }

  /// 플래시 토글
  void toggleFlash() {
    if (isFlashOn) {
      controller.setFlashMode(FlashMode.off);
      isFlashOn = false;
    } else {
      controller.setFlashMode(FlashMode.always);
      isFlashOn = true;
    }

    notifyListeners();
  }

  /// 카메라 전환
  void changeCameraDirection() {
    if (controller.description.lensDirection == CameraLensDirection.back) {
      controller.setDescription(_cameras[0]);
    } else {
      controller.setDescription(_cameras[1]);
    }
  }
}

이제 앱을 실행하고 카메라를 실행해 보도록 하겠습니다. 사진을 찍어 보면 홈 화면에 사진이 업데이트되는 것을 볼 수 있을 겁니다.

camera 패키지를 잘 활용하면 다양한 기능들을 추가할 수 있습니다. 줌 기능뿐 아니라 인스타처럼 필터 기능을 추가하는 것도 가능합니다. 다음에 기회가 된다면 필터와 관련된 포스트도 작성해 보겠습니다.

플러터 다크모드 설정 페이지 만들기

토로토 — Wed, 10 Jul 2024 21:24:54 +0900

앱 개발을 하다 보면 설정 페이지를 만들게 되는 시점이 옵니다. 알림, 소리, 진동 등 설정부터 개인 정보 처리 등 간단한 앱이어도 최소한의 설정 관리가 필요한 법이죠. 많은 앱들이 가지고 있는 설정이 하나 있습니다. 바로 다크 모드인데요, 앱마다 부르는 명칭은 다르지만 저는 테마 설정이라고 부릅니다. 밝은 화면을 설정하는 라이트 모드, 어두운 화면을 설정하는 다크 모드, 그리고 시스템 설정에 맞게 따라가는 시스템 설정 중에서 원하는 테마로 설정하는 페이지를 만들어 보도록 하겠습니다.

flutter_examples/settings_dark_mode/lib at main · wonhj12/flutter_examples

Flutter examples for blog. Contribute to wonhj12/flutter_examples development by creating an account on GitHub.

github.com

Color – Material Design 3

Create accessible, personal color schemes communicating your product's hierarchy, state, and brand

m3.material.io

설정 데이터를 관리하는 방법은 여러 가지가 있겠지만, MVVM(Model, View, ViewModel) 구조의 프로젝트에서는 provider를 활용한 데이터 관리가 가장 좋은 것 같습니다. Provider를 사용하면 간단하게 데이터 변경 사용해서 진행하도록 하겠습니다. 우선 터미널에 다음 코드를 입력해서 프로젝트에 필요한 provider 패키지를 설치해 줍시다.

flutter pub add provider

Palette와 ColorScheme

가장 먼저 만들 것은 앱의 색상 테마입니다. primary, secondary, tertiary 등 디자인에 사용되는 명칭들을 들어보신 적이 있을 겁니다. 색과 관련된 부분은 디자이너의 영역이라 많은 개발자들은 잘 알지 못하는 영역이죠. 저 역시 모든 용어들을 다 알지는 못합니다. 하지만 primary, secondary, tertiary 까지만 알면 1인 개발을 하기엔 큰 문제가 없는 것 같습니다.

ColorScheme은 테마 색상들을 앱에 적용시켜 주는 클래스입니다. 위젯을 만들면서 바로 색을 지정하는 것이 가능하기는 하지만, 다크 모드와 라이트 모드를 전환하기 위해서는 color scheme을 통해 색을 지정하는 것이 필요합니다. 플러터에서는 material 시스템에 기반한 5개의 키 색상과 26개의 color role을 지정할 수 있습니다. 더 자세한 내용은 게시글 상단에 링크한 material.io 페이지를 읽어보시면 좋을 것 같습니다.

Material system의 26가지 color roles

Primary 색은 앱의 브랜드 컬러를 나타냅니다. Appbar, 주 버튼 등 주요 컴포넌트에 많이 사용되는 색상입니다. Primary 색을 어떻게 활용하는지에 따라 앱의 분위기가 달라지기 때문에 가장 중요한 색상입니다. Primary 안에도 크게 4가지 속성으로 나눠집니다. Primary는 방금 설명한 대로 앱의 주요 컴포넌트에 사용되는 색상이고요, on primary는 primary 색으로 채워진 컴포넌트 위에 텍스트나 아이콘 등을 추가할 때 사용하는 색상입니다. Primary container는 primary 색의 주변 영역에 칠할 수 있는 색상입니다. 예를 들어 토글 버튼의 배경 색을 primary container 색으로 맞춰 주면 좋겠죠. 마지막 on primary container는 primary container 위에 사용되는 텍스트나 아이콘 등의 색으로 사용되는 색상입니다.

Primary key color

Secondary 색은 앱의 보조 색상을 주로 다룹니다. 덜 중요한 컴포넌트들의 색상을 주로 담당하죠. 예를 들어 선택된 리스트 아이템이 primary 색으로 칠해졌다면 나머지 아이템들은 secondary 색으로 칠함으로써 선택된 아이템을 더 강조할 수 있겠죠. Secondary 색은 primary 색과 비슷하지만 확연히 차이나는 그런 색상을 사용하면 좋습니다.

Secondary key color

Tertiary 색은 primary와 secondary와는 대비되는 제3의 색상입니다. Primary와 secondary 사이의 밸런스를 맞춰 줌과 동시에 눈에 띄게 만들어 하이라이트를 줄 수 있는 그런 색이죠. 아래 이미지처럼 tertiary 색을 넣게 되면 사용자의 시선을 사로잡을 수 있습니다.

Tertiary key color

Palette와 ColorScheme 생성하기

이제 본격적으로 컬러 팔레트를 만들어 보겠습니다. 우선 두 개의 클래스를 생성할 건데요, LightPalette와 DarkPalette는 이름에서도 알 수 있듯이 라이트 모드와 다크 모드에서 사용되는 색상 데이터입니다. 저는 편의상 primary 색의 서브 컴포넌트 4가지만 지정했지만, 실제 프로젝트에서는 훨씬 더 많은 색상을 사용합니다.

class LightPalette {
  static const Color primary = Color(0xffD0BCFF);
  static const Color onPrimary = Color(0xff381E72);
  static const Color primaryContainer = Color(0xff4F378B);
  static const Color onPrimaryContainer = Color(0xffEADDFF);
}

class DarkPalette {
  static const Color primary = Color(0xff6750A4);
  static const Color onPrimary = Colors.white;
  static const Color primaryContainer = Color(0xffEADDFF);
  static const Color onPrimaryContainer = Color(0xff21005D);
}

ColorScheme 클래스를 통해서 방금 생성한 팔레트를 앱에 적용시킬 수 있습니다. Color scheme은 light와 dark 속성을 지정할 수 있는데요. 이렇게 하면 모든 속성에 대해서 색상을 지정하지 않더라도 기본 테마에 적용돼 있는 색을 자동으로 사용하게 됩니다. 필요한 색상만 적용시키려 할 때는 이렇게 간편하게 사용할 수 있습니다. 라이트 모드에 적용시킬 lightScheme과 다크 모드에 적용시킬 darkScheme을 만들어 보겠습니다.

class CustomColorScheme {
  static const ColorScheme lightScheme = ColorScheme.light(
    primary: LightPalette.primary,
    onPrimary: LightPalette.onPrimary,
    primaryContainer: LightPalette.primaryContainer,
    onPrimaryContainer: LightPalette.onPrimaryContainer,
  );

  static const ColorScheme darkScheme = ColorScheme.dark(
    primary: DarkPalette.primary,
    onPrimary: DarkPalette.onPrimary,
    primaryContainer: DarkPalette.primaryContainer,
    onPrimaryContainer: DarkPalette.onPrimaryContainer,
  );
}

ThemeData 생성하기

플러터에서는 ThemeData를 통해서 많은 위젯에 테마를 바로 적용시킬 수 있습니다. 앱 전반적으로 많이 사용되는 컴포넌트라면 생성할 때마다 색상 값을 입력하기보다는 theme data를 통해 지정하는 것이 더 편리할 수 있습니다. 예를 들어 app bar의 경우 대부분의 페이지에서 동일한 배경 색과 텍스트, 아이콘 색상을 가지고 있습니다. 그럴 때 theme data에서 app bar의 색을 지정해 주면 모든 생성된 모든 app bar의 색을 고정시킬 수 있습니다. 가장 중요한 건 역시나 color scheme이겠죠. 방금 생성했던 라이트, 다크 color scheme을 지정해 주면 앱 전체에 반영이 됩니다. 라이트 모드와 다크 모드에서 사용될 두 개의 테마를 만들어 주겠습니다.

class CustomThemeData {
  static ThemeData lightTheme = ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: LightPalette.primary,
      titleTextStyle: TextStyle(fontSize: 18, color: LightPalette.onPrimary),
      iconTheme: IconThemeData(color: LightPalette.onPrimary),
    ),
    scaffoldBackgroundColor: LightPalette.primary,
    colorScheme: CustomColorScheme.lightScheme,
  );

  static ThemeData darkTheme = ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: DarkPalette.primary,
      titleTextStyle: TextStyle(fontSize: 18, color: DarkPalette.onPrimary),
      iconTheme: IconThemeData(color: DarkPalette.onPrimary),
    ),
    scaffoldBackgroundColor: DarkPalette.primary,
    colorScheme: CustomColorScheme.darkScheme,
  );
}

저는 지금까지 만든 팔레트와 테마 관련 클래스들을 palette.dart 한 파일에 저장했습니다. 모두 색과 테마에 관련된 클래스다 보니 관리와 정리가 용이하도록 한 파일로 묶었지만, 개인의 개발 스타일에 따라 여려 파일로 나눠서 저장해도 무방하다는 것을 알려드립니다.

import 'package:flutter/material.dart';

class LightPalette {
  static const Color primary = Color(0xffD0BCFF);
  static const Color onPrimary = Color(0xff381E72);
  static const Color primaryContainer = Color(0xff4F378B);
  static const Color onPrimaryContainer = Color(0xffEADDFF);
}

class DarkPalette {
  static const Color primary = Color(0xff6750A4);
  static const Color onPrimary = Colors.white;
  static const Color primaryContainer = Color(0xffEADDFF);
  static const Color onPrimaryContainer = Color(0xff21005D);
}

class CustomColorScheme {
  static const ColorScheme lightScheme = ColorScheme.light(
    primary: LightPalette.primary,
    onPrimary: LightPalette.onPrimary,
    primaryContainer: LightPalette.primaryContainer,
    onPrimaryContainer: LightPalette.onPrimaryContainer,
  );

  static const ColorScheme darkScheme = ColorScheme.dark(
    primary: DarkPalette.primary,
    onPrimary: DarkPalette.onPrimary,
    primaryContainer: DarkPalette.primaryContainer,
    onPrimaryContainer: DarkPalette.onPrimaryContainer,
  );
}

class CustomThemeData {
  static ThemeData lightTheme = ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: LightPalette.primary,
      titleTextStyle: TextStyle(fontSize: 18, color: LightPalette.onPrimary),
      iconTheme: IconThemeData(color: LightPalette.onPrimary),
    ),
    scaffoldBackgroundColor: LightPalette.primary,
    colorScheme: CustomColorScheme.lightScheme,
  );

  static ThemeData darkTheme = ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: DarkPalette.primary,
      titleTextStyle: TextStyle(fontSize: 18, color: DarkPalette.onPrimary),
      iconTheme: IconThemeData(color: DarkPalette.onPrimary),
    ),
    scaffoldBackgroundColor: DarkPalette.primary,
    colorScheme: CustomColorScheme.darkScheme,
  );
}

Setting provider 생성하기

이제 본격적으로 앱 구현에 들어가 보도록 하겠습니다. 우선은 설정 데이터, 특히 테마에 대한 데이터를 담고 있을 provider를 생성할 건데요, ChangeNotifier 클래스를 통해서 위젯이 데이터의 변화를 손쉽게 감지할 수 있도록 해주겠습니다. SettingViewModel을 생성하고 필요한 내용들을 추가해 보도록 하겠습니다. themeMode 변수는 앱의 테마 정 값을 가지고 있는 변수입니다. ThemeMode.light, ThemeMode.dark, ThemeMode.system을 통해서 세 가지 테마를 지정할 수 있습니다. 저는 기본 값으로 시스템 설정을 지정했지만 원하시는 스타일에 맞게 지정하는 것도 가능합니다.

테마를 변경하는 changeTheme() 함수는 입력받은 테마로 themeMode 변수를 변경하는 함수입니다. 데이터를 변경한 후에는 notifyListeners() 함수를 호출해서 데이터에 변화가 있다고 알리게 됩니다. 그러면 위젯이 새로 그려지면서 색도 함께 변하는 원리입니다.

마지막으로 getThemeName() 함수는 지금 적용되어 있는 테마를 한글로 반환해 주는 함수입니다. 위젯을 그릴 때 사용하기 위한 도우미 함수로 보면 되겠습니다.

import 'package:flutter/material.dart';

class SettingViewModel with ChangeNotifier {
  ThemeMode themeMode = ThemeMode.system;

  /// 테마 변경
  void changeTheme(ThemeMode mode) {
    themeMode = mode;
    notifyListeners();
  }

  /// 설정 화면에 표시할 테마 이름 값 return
  String getThemeName() {
    switch (themeMode) {
      case ThemeMode.light:
        return '라이트 모드';
      case ThemeMode.dark:
        return '다크 모드';
      case ThemeMode.system:
      default:
        return '시스템 설정';
    }
  }
}

Main.dart 구성하기

설정 화면을 구성하기 전에 main 함수를 먼저 수정해 보겠습니다. MainApp을 실행할 때 ChangeNotifierProvider를 적용시켜서 앱 전체에서 방금 생성한 뷰모델을 감지할 수 있도록 해주겠습니다.

Material app에는 아까 생성했던 ThemeData를 지정해서 우리가 원하는 테마를 적용시킬 수 있도록 해주겠습니다. theme 속성에는 라이트 모드 테마를, darkTheme 속성에는 다크 모드 테마를 적용해 주면 됩니다. themeMode 속성에는 뷰모델에 저장된 themeMode 변수를 지정하면 됩니다. 이제 테마가 변경되면 자동으로 color scheme에 맞춰 색이 변하게 될 것입니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:settings_dark_mode/constants/palette.dart';
import 'package:settings_dark_mode/view_models/setting_view_model.dart';
import 'package:settings_dark_mode/views/home_view.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => SettingViewModel(),
      child: const MainApp(),
    ),
  );
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: CustomThemeData.lightTheme,
      darkTheme: CustomThemeData.darkTheme,
      themeMode: Provider.of<SettingViewModel>(context).themeMode,
      home: const Scaffold(
        body: Center(
          child: HomeView(),
        ),
      ),
    );
  }
}

Setting View 구성

대망의 설정 페이지를 만들어 보겠습니다. 화면 구성은 간단합니다. InkWell 위젯을 사용해서 테마 설정 버튼을 하나 만들어주고, 버튼을 탭 했을 때 showModalBottomSheet를 통해 테마를 선택할 수 있는 하단 모달이 뜨도록 구현했습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:settings_dark_mode/view_models/setting_view_model.dart';

class SettingView extends StatefulWidget {
  const SettingView({super.key});

  @override
  State<SettingView> createState() => _SettingViewState();
}

class _SettingViewState extends State<SettingView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('설정'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 16),
          InkWell(
            onTap: () {
              showModalBottomSheet(
                backgroundColor: Colors.transparent,
                context: (context),
                builder: (BuildContext context) {
                  return themeModal();
                },
              );
            },
            child: Container(
              margin: const EdgeInsets.all(16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '테마',
                    style: TextStyle(
                        color: Theme.of(context).colorScheme.onPrimary),
                  ),
                  Text(
                    Provider.of<SettingViewModel>(context).getThemeName(),
                    style: TextStyle(
                        color: Theme.of(context).colorScheme.onPrimary),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

모달은 iOS의 디자인을 참고해서 제일 아래에 취소 버튼이 있고, 그 위에 세 개의 테마를 선택할 수 있도록 만들어 보았습니다. 테마 버튼 사이에는 divider 위젯을 추가해서 구분이 가능하도록 해 주었습니다. 각 테마를 선택했을 때는 뷰모델에 있는 changeTheme 함수를 호출해서 선택한 테마로 변경을 해주도록 하겠습니다.

// 테마 선택 모달
Widget themeModal() {
  return SafeArea(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: Ink(
            height: 168,
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.primaryContainer,
              borderRadius: const BorderRadius.all(Radius.circular(10)),
            ),
            child: Column(children: [
              // 라이트 모드 버튼
              InkWell(
                onTap: () {
                  Provider.of<SettingViewModel>(context, listen: false)
                      .changeTheme(ThemeMode.light);
                  Navigator.pop(context);
                },
                borderRadius:
                    const BorderRadius.vertical(top: Radius.circular(10)),
                child: Container(
                  height: 56,
                  alignment: Alignment.center,
                  child: Text(
                    '라이트 모드',
                    style: TextStyle(
                        color:
                            Theme.of(context).colorScheme.onPrimaryContainer),
                  ),
                ),
              ),
              Divider(
                height: 0,
                color: Theme.of(context).colorScheme.onPrimaryContainer,
              ),

              // 다크 모드 버튼
              InkWell(
                onTap: () {
                  Provider.of<SettingViewModel>(context, listen: false)
                      .changeTheme(ThemeMode.dark);
                  Navigator.pop(context);
                },
                child: Container(
                  height: 56,
                  alignment: Alignment.center,
                  child: Text(
                    '다크 모드',
                    style: TextStyle(
                        color:
                            Theme.of(context).colorScheme.onPrimaryContainer),
                  ),
                ),
              ),
              Divider(
                height: 0,
                color: Theme.of(context).colorScheme.onPrimaryContainer,
              ),

              // 시스템 설정 버튼
              InkWell(
                onTap: () {
                  Provider.of<SettingViewModel>(context, listen: false)
                      .changeTheme(ThemeMode.system);
                  Navigator.pop(context);
                },
                borderRadius:
                    const BorderRadius.vertical(bottom: Radius.circular(10)),
                child: Container(
                  height: 56,
                  alignment: Alignment.center,
                  child: Text(
                    '시스템 설정',
                    style: TextStyle(
                        color:
                            Theme.of(context).colorScheme.onPrimaryContainer),
                  ),
                ),
              ),
            ]),
          ),
        ),
        const SizedBox(height: 8),

        // 취소 버튼
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: Ink(
            height: 56,
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.primaryContainer,
              borderRadius: const BorderRadius.all(Radius.circular(10)),
            ),
            child: InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              borderRadius: const BorderRadius.all(Radius.circular(10)),
              child: Container(
                height: 56,
                alignment: Alignment.center,
                child: Text(
                  '취소',
                  style: TextStyle(
                      color:
                          Theme.of(context).colorScheme.onPrimaryContainer),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

Home View 구성

이제 마지막으로 변화를 확인할 홈 화면을 만들어 보도록 하겠습니다. 간단하게 중앙에 컨테이너 하나와 텍스트를 그려주었습니다. Theme.of(context).colorScheme을 사용해서 색을 지정해 주면 테마가 변경될 때 컨테이너와 텍스트 색상도 함께 변경되는 것을 확인할 수 있습니다. App bar의 우측에는 설정 페이지로 이동할 수 있는 버튼을 하나 달아주도록 하겠습니다.

import 'package:flutter/material.dart';
import 'package:settings_dark_mode/views/setting_view.dart';

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('홈'),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const SettingView()));
            },
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Theme.of(context).colorScheme.primaryContainer,
          child: Center(
            child: Text(
              '텍스트입니다.',
              style: TextStyle(
                  color: Theme.of(context).colorScheme.onPrimaryContainer),
            ),
          ),
        ),
      ),
    );
  }
}

이제 앱을 실행한 후 설정에서 테마를 변경해 보도록 하겠습니다. 설정한 테마에 맞춰서 배경, 컨테이너, 텍스트, 버튼 등 컴포넌트들이 바뀌는 것을 확인할 수 있을 겁니다.

팔레트와 color scheme을 한 번 설정해 두면 색을 변경할 때도 모든 컴포넌트들에 대해서 일일이 수정할 필요 없이 팔레트만 수정하면 된다는 장점이 있습니다. 프로젝트 초기에는 조금 귀찮은 작업일 수 있지만 앱의 유지 보수 등 여러 측면들을 고려해 볼 때 꼭 필요한 작업이라 생각됩니다.

플러터 시작하기 05. 버튼 종류를 알아보자!

토로토 — Thu, 16 May 2024 22:11:58 +0900

버튼이 없는 앱을 찾는 것은 사막에서 바늘 찾기나 다름없습니다. 어떤 액션을 취하기 위해서는 버튼을 클릭하는 행동이 필요합니다. 버튼은 어떤 용도로 사용되는지에 따라서 디자인도 다양하게 있죠. 플러터에는 자주 사용하는 5 가지의 버튼 스타일이 있습니다. 이번 포스트에서는 TextButton OutlinedButton FilledButton ElevatedButton 그리고 IconButton에 대해서 알아보도록 하겠습니다.

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

많은 앱들이 하단 메뉴를 통해 탭 전환을 하는 형태로 디자인되어 있습니다. Scaffold의 여러 속성 중 bottomNavigationBar 속성이 바로 이 기능을 담당합니다. 이번 포스트에서는 bottomNavigationBar 속성을

torotoblog.tistory.com

플러터 시작하기 04. FloatingActionButton 꾸미기

Scaffold의 마지막 속성, floatingActionButton입니다! 글 쓰기, 메뉴 보기 등으로 많이 사용하는 버튼이죠. 이번 포스트에서는 이 버튼을 한번 꾸며보도록 하겠습니다. 플러터 시작하기 02. Appbar 꾸미기

torotoblog.tistory.com

TextButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: TextButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

첫 번째 버튼 스타일은 TextButton 스타일입니다. 아래 이미지처럼 테두리나 배경 색 없이 텍스트로만 이루어진 버튼입니다. 텍스트를 클릭했을 때 버튼을 클릭한 효과를 줍니다.

OutlinedButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: OutlinedButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

두 번째 버튼 스타일은 OutlinedButton 스타일입니다. 텍스트 버튼에서 테두리가 추가된 버튼이라고 보시면 됩니다.

FilledButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: FilledButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

세 번째 버튼 스타일은 FilledButton 스타일입니다. 배경 색을 입힌 버튼이라고 보시면 됩니다.

ElevatedButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: ElevatedButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

네 번째 버튼 스타일은 ElevatedButton 버튼 스타일입니다. Scaffold를 배울 때도 elevation 속성이 자주 등장했었는데요, 그림자를 입혀서 공중에 떠 있는 효과를 내는 속성입니다. ElevatedButton도 마찬가지로 그림자 효과를 통해 화면에서 떠 있는 효과를 가진 버튼이라고 보시면 됩니다.

IconButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: IconButton(
            onPressed: _add,
            icon: const Icon(Icons.add_circle),
        ),
    ),
);

마지막 버튼 스타일은 아이콘을 사용하는 IconButton 스타일입니다. 기존의 버튼과는 달리 child로 위젯을 받는 것이 아니라 icon 속성을 통해 아이콘을 바로 입력받습니다.

버튼 클릭 구현하기

class ButtonExamples extends StatefulWidget {
  const ButtonExamples({super.key});

  @override
  State<ButtonExamples> createState() => _ButtonExamplesState();
}

class _ButtonExamplesState extends State<ButtonExamples> {
  int _count = 0; // 증가하는 값을 저장하는 변수

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Button Examples')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_count', style: const TextStyle(fontSize: 24)),
            OutlinedButton(
              onPressed: _add,
              child: const Text('Click me!'),
            ),
          ],
        ),
      ),
    );
  }

  /// _count를 1씩 증가시키는 함수
  void _add() {
    setState(() {
      _count += 1;
    });
  }
}

버튼을 만들었으면 버튼 클릭도 구현해 봐야겠죠! 간단하게 버튼을 클릭할 때마다 값을 1씩 증가시키도록 만들어 봅시다. 우선 값을 저장할 _count 변수를 하나 만들어 주고요, 1씩 증가시키는 함수 _add()도 만들어 주겠습니다. _counter 값이 증가할 때마다 화면에 출력되기 위해서는 변수가 변경됐으니 화면을 재구성하라는 신호가 필요합니다. 이 신호를 보내주는 역할을 setState가 담당합니다.

이번 포스트에서는 플러터에서 제공하는 기본적인 버튼 5가지를 소개해드렸습니다. 버튼들은 style 속성으로 색이나 그림자 등을 꾸밀 수 있는데요, 다음 포스트에서 더 자세하게 알려드리도록 하겠습니다.

플러터 시작하기 02. Appbar 꾸미기

토로토 — Tue, 14 May 2024 15:39:51 +0900

지난 포스트에서 Scaffold에 대해서 알아보았습니다. 앱 디자인에 사용되는 가장 기본적인 디자인 레이아웃이죠. 이번에는 scaffold에서 사용되는 여러 속성 중 앱 상단에 위치하는 AppBar에 대해서 알아보도록 하겠습니다. 앱의 제목과 뒤로 가기, 메뉴 등의 버튼들이 위치하는 부분이죠.

플러터 시작하기 01 : Scaffold

torotoblog.tistory.com

Appbar 만들기

Scaffold(
    appBar: AppBar(title: const Text('Appbar Example')),
    body: const Center(child: Text('Hello World!')),
);

우선은 기본적인 AppBar를 만들어 보겠습니다. Title 속성은 앱의 제목 등을 표시하는 속성입니다. Text 위젯을 입력해서 문구를 출력할 수도 있고, Icon, 이미지 등도 입력할 수 있습니다.

버튼 추가하기

AppBar(
    ...
    leading: IconButton(
        icon: const Icon(Icons.arrow_back_ios_new),
        onPressed: () {},
    ),
)

Leading 속성을 활용하면 타이틀 왼쪽에 버튼과 같은 요소들을 추가할 수 있습니다. 위 예제 코드를 참조해서 간단한 뒤로 가기 버튼을 만들어 보겠습니다.

AppBar(
    ...
    actions: [
        IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {},
        ),
        IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {},
        ),
    ],
)

Actions 속성을 사용하면 타이틀의 오른쪽에 버튼들을 추가할 수 있습니다. Actions는 leading과 달리 위젯의 리스트를 입력으로 받기 때문에 한 개 이상의 버튼을 추가할 수 있습니다.

타이틀 중앙 정렬하기

AppBar(
    ...
    centerTitle: true,
)

Actions 속성에 여러 위젯을 입력하면 타이틀이 왼쪽으로 쏠리는 현상이 발생합니다. 이럴 때는 centerTile 속성을 참으로 설정하면 간단하게 문제를 해결할 수 있습니다.

그림자 효과 추가하기

AppBar(
    ...
    elevation: 10,
    shadowColor: Colors.grey,
)

Elevation과 shadowColor 속성을 사용하면 앱바 하단에 그림자 효과를 줄 수 있습니다. 이 효과를 사용해서 앱바가 화면보다 더 위에 떠있는 느낌을 줄 수 있죠.

이렇게 간단하게 AppBar를 꾸미는 여러 속성들에 대해서 알아보았습니다. 더 많은 기능들이 숨어있지만 자주 쓰이는 기능은 아니기 때문에 다른 포스트에서 더욱 심화적인 내용들을 다뤄보도록 하겠습니다.

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

torotoblog.tistory.com

플러터 시작하기 04. FloatingActionButton 꾸미기

토로토 — Tue, 14 May 2024 14:45:41 +0900

Scaffold의 마지막 속성, floatingActionButton입니다! 글 쓰기, 메뉴 보기 등으로 많이 사용하는 버튼이죠. 이번 포스트에서는 이 버튼을 한번 꾸며보도록 하겠습니다.

플러터 시작하기 02. Appbar 꾸미기

지난 포스트에서 Scaffold에 대해서 알아보았습니다. 앱 디자인에 사용되는 가장 기본적인 디자인 레이아웃이죠. 이번에는 scaffold에서 사용되는 여러 속성 중 앱 상단에 위치하는 AppBar에 대해서

torotoblog.tistory.com

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

torotoblog.tistory.com

FloatingActionButton 만들기

Scaffold(
    body: const Center(child: Text('Action Button Example')),
    floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
    ),
);

우선은 floatingActionButton을 하나 생성해 보겠습니다. FloatingActionButton은 버튼이기 때문에 버튼을 클릭했을 때 수행할 작업, onPressed가 필수로 필요하지만 지금은 그냥 빈 함수로 놔두고 진행하겠습니다. 자식으로 아이콘 하나를 입력해 주겠습니다. 저는 더하기 아이콘을 선택했어요.

색상 변경하기

FloatingActionButton(
    ...
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
)

색상을 변경하는 건 다른 위젯과 동일합니다. BackgroundColor 속성을 변경해서 배경 색을, foregroundColor 속성을 변경해서 아이콘 및 레이블 등의 색상을 변경할 수 있습니다.

그림자 효과 주기

FloatingActionButton(
    ...
    elevation: 0,
)

Elevation 속성을 활용하면 버튼이 공중에 떠있는 듯한 느낌을 줄 수 있습니다. 조금 더 쉽게 이야기하자면 그림자 효과를 얼마나 줄 것인지 정하는 속성이죠. 0으로 설정하면 아래 이미지처럼 바닥에 딱 붙어있는 듯한 느낌을 줄 수 있습니다. 기본값은 6입니다.

버튼 위치 설정하기

Scaffold(
    ...
    floatingActionButton: FloatingActionButton(
        ...
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);

Scaffold의 속성 중 floatingActionButtonLocation 속성을 활용하면 버튼의 위치를 원하는 곳으로 변경할 수 있습니다. start center end 키워드로 왼쪽, 중앙, 오른쪽 정렬이 가능하고 top float docked 키워드로 상단, 하단, 또는 내비게이션 바에 도킹된 상태로 정렬할 수 있습니다. 이 두 키워드들을 합쳐서 위치를 손쉽게 지정이 가능합니다. 위 예제 코드는 중앙 하단으로 정렬해 보았습니다.

버튼 모양 바꾸기

FloatingActionButton(
    ...
    shape: const CircleBorder(),
)

Shape 속성을 활용하면 버튼의 모양을 바꿀 수 있습니다. ShapeBorder 클래스를 가지는 위젯을 입력해 주면 되는데요, CircleBorder OvalBorder StarBorder RoundedRectangleBorder 등이 있습니다. CircleBorder을 사용해서 동그라미 버튼으로 만들어 보도록 하겠습니다.

레이블 추가하기

Scaffold(
    ...
    floatingActionButton: FloatingActionButton.extended(
        ...
        icon: const Icon(Icons.add),
        label: const Text('더하기'),
    ),
)

FloatingActionButton.extended를 활용하면 아이콘만이 아니라 레이블까지 함께 표시할 수 있습니다. 단 기존의 child 속성 대신 icon과 label 속성을 사용하기 때문에 이 부분만 수정해 주면 됩니다. 나머지 속성들은 그대로 사용이 가능합니다. 이렇게 아이콘과 레이블을 입력하면 길이에 맞춰 자동으로 버튼 크기가 조절이 됩니다.

이번 포스트에서는 FloatingActionButton에 대해서 알아보았습니다. 이제 scaffold의 기본적인 요소들에 대한 소개가 모두 끝났으니 다른 위젯들에 대해서도 차차 알아가 보도록 하겠습니다.

플러터 시작하기 05. 버튼 종류를 알아보자!

버튼이 없는 앱을 찾는 것은 사막에서 바늘 찾기나 다름없습니다. 어떤 액션을 취하기 위해서는 버튼을 클릭하는 행동이 필요합니다. 버튼은 어떤 용도로 사용되는지에 따라서 디자인도 다양하

torotoblog.tistory.com

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

토로토 — Mon, 13 May 2024 23:41:43 +0900

많은 앱들이 하단 메뉴를 통해 탭 전환을 하는 형태로 디자인되어 있습니다. Scaffold의 여러 속성 중 bottomNavigationBar 속성이 바로 이 기능을 담당합니다. 이번 포스트에서는 bottomNavigationBar 속성을 소개해 드리면서 탭 전환을 어떻게 해야 하는지 함께 알려드리도록 하겠습니다.

플러터 시작하기 01 : Scaffold

torotoblog.tistory.com

플러터 시작하기 02. Appbar 꾸미기

torotoblog.tistory.com

Items 속성

Scaffold(
    body: SafeArea(child: _views.elementAt(_currentIdx)),
    bottomNavigationBar: BottomNavigationBar(
        items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle), label: 'account'),
            BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
        ],
    ),
)

BottomNavigationBar 속성에는 두 가지 위젯을 사용할 수 있습니다. BottomAppBar과 이번에 배울 BottomNavigationBar 위젯입니다. Scaffold를 소개해 드리면서도 간단하게 알려드렸지만, BottomAppBar 위젯은 웹사이트의 푸터처럼 앱 하단을 꾸밀 때 많이 사용하고요, BottomNavigationBar은 앱 하단에 탭 메뉴를 구현할 때 많이 사용합니다. BottomNavigationBar 위젯은 item 속성이 필수로 입력돼야 합니다. BottomNavigationBarItem의 리스트로 구성되어 있고, 각 아이템에는 아이콘과 이름 등을 설정할 수 있습니다. 우선 가볍게 세 개의 아이템을 추가해 보도록 하겠습니다.

탭 전환하기

class BottomNavigationBarExample extends StatefulWidget {
  const BottomNavigationBarExample({super.key});

  @override
  State<BottomNavigationBarExample> createState() =>
      _BottomNavigationBarExampleState();
}

class _BottomNavigationBarExampleState extends State<BottomNavigationBarExample> {
  int _currentIdx = 0;

  final List<Widget> _views = [
    const HomeView(),
    const AccountView(),
    const MenuView()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: _views.elementAt(_currentIdx)),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIdx,
        onTap: _tabTapped,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), label: 'account'),
          BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
        ],
      ),
    );
  }

  void _tabTapped(int idx) {
    setState(() {
      _currentIdx = idx;
    });
  }
}

탭 전환이 가능하도록 구현하기 위해서는 우선 stateful widget 클래스에 속해있어야 합니다. Stateful widget은 다른 포스트에서 상세하게 설명드리겠지만 간단하게 알려드리자면 화면이 업데이트되어 새로 그려질 수 있도록 해주는 클래스입니다. 화면이 전환된 탭에 맞춰 새로 그려져야 하기 때문에 stateful widget 클래스를 사용한다고 생각하시면 되겠습니다.

우선은 선택된 탭을 저장할 변수 _currentIdx와 각 탭을 선택했을 때 보여줄 페이지의 리스트 _views를 생성해 줍시다. BottomNavigationBar는 각 탭이 인덱스 값으로 지정이 되기 때문에 이렇게 리스트로 만들면 간단하게 각 페이지를 불러올 수 있습니다. 그리고 마지막으로 각 탭을 선택했을 때 _currentIdx가 바뀔 수 있도록 해주는 _tabTapped 함수를 만들어 주겠습니다. 여기서 사용된 setState 함수는 어떤 변수의 값이 바뀌었고, 따라서 화면을 재구성하라는 신호를 주는 함수입니다. 이제 모든 준비가 끝났습니다.

이제 위 예제 코드를 참조해 BottomNavigationBar의 속성 중 currentIndex 속성과 onTap 속성에 방금 생성한 변수와 함수를 입력해 주면 됩니다. 그리고 scaffold의 body 속성에는 _view에서 현재 선택된 탭의 인덱스 위치에 있는 페이지를 반환해 주도록 해주면 됩니다. 이제 탭을 한 번 터치해 보세요. 선택된 탭이 변하면서 body에도 각 페이지가 그려지는 것을 볼 수 있습니다.

탭 색상 변경하기

BottomNavigationBar(
    ...
    selectedItemColor: Colors.black,
    unselectedItemColor: Colors.grey,
    backgroundColor: Colors.white,
),

탭의 색상을 담당하는 세 가지 속성들이 있습니다. SelectedItemColor는 선택된 탭의 아이콘과 레이블 색을, unselectedItemColor는 선택되지 않은 나머지 탭의 아이콘과 레이블 색을, 그리고 backgroundColor는 내비게이션 바의 색 자체를 담당합니다. 위 예제 코드를 참조해서 원하는 색으로 변경해 보세요.

크기 조정하기

BottomNavigationBar(
    ...
    selectedFontSize: 14,
    unselectedFontSize: 12,
    iconSize: 24,
),

레이블의 크기도 조절이 가능합니다. SelectedFontSize는 선택된 탭의 레이블 크기를, unselectedFontSize는 선택되지 않은 탭의 레이블 크기를 설정합니다. 기본값으로는 각 14, 12 포인트가 설정돼 있습니다. 아이콘 크기를 설정하기 위해서는 iconSize 속성에 값을 입력해 주면 됩니다. 기본값은 24입니다.

햅틱 설정하기

BottomNavigationBar(
    ...
    enableFeedback: true,
),

EnableFeedback 속성을 참으로 설정하면 탭을 선택할 때 햅틱 반응을 받을 수 있습니다. 하지만 UI/UX 측면에서 햅틱이 많이 들어간다고 좋은 것은 아니기 때문에 필요한 기능인지 잘 고민해 보시고 사용하시면 좋을 것 같네요.

이번 포스트에서는 BottomNavigationBar에서 탭을 전환하는 방법과 디자인 속성들에 대해서 알려드렸습니다. 테마 설정과 같은 기능들도 있는데, 다른 포스트에서 심화적으로 다뤄보도록 하겠습니다.

플러터 시작하기 04. FloatingActionButton 꾸미기

Scaffold의 마지막 속성, floatingActionButton입니다! 글 쓰기, 메뉴 보기 등으로 많이 사용하는 버튼이죠. 이번 포스트에서는 이 버튼을 한번 꾸며보도록 하겠습니다. 플러터 시작하기 02. AppBar 꾸미기

torotoblog.tistory.com

플러터 시작하기 01 : Scaffold

토로토 — Sat, 11 May 2024 15:56:04 +0900

Scaffold는 플러터에서 사용되는 가장 기본적인 디자인 레이아웃입니다. 앱의 뼈대라고도 할 수 있죠. 이번 포스트에서는 Scaffold에서 주로 사용되는 속성(property) 몇 가지를 소개해 드리려고 합니다. Appbar, Body, BottomNavigationBar, 그리고 FloatingActionButton입니다.

Body 속성

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

먼저 플러터 프로젝트를 하나 생성하고 화면을 출력하기 위한 최소한의 요소만 추가해 보겠습니다. Scaffold가 가진 여러 속성 중 body는 필수 값입니다. 본문에 들어갈 다양한 위젯들을 처리하는 부분이죠. 화면에서 가장 많은 영역을 차지하는 필드이기도 합니다. 우선은 간단하게 텍스트를 출력해 보도록 하겠습니다. 중앙 정렬을 위해 Center 위젯의 자식으로 Text 위젯을 추가해 주겠습니다.

중앙에 Hello World! 문구가 잘 출력되네요. 하지만 너무 휑하죠. 나머지 속성도 하나씩 추가해 보며 앱을 꾸며 보도록 하겠습니다.

Appbar 속성

Scaffold(
    // App bar
    appBar: AppBar(
        title: const Text('Scaffold Example'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
    ),

    // Body
    body: const Center(
        child: Text('Hello World!'),
    ),
)

Appbar는 앱의 상단 바를 꾸며주는 속성입니다. 보통 제목이나 뒤로 가기 등의 버튼들이 위치하는 부분이죠. Appbar 속성에는 AppBar 위젯을 입력으로 주어야 합니다. 위 코드처럼 제목 텍스트와 색을 지정해 봅시다. Title 속성에는 제목을 입력해 주면 되는데요, 꼭 텍스트가 아니라 아이콘 등으로 꾸밀 수도 있습니다. BackgroundColor는 배경 색을, foregroundColor는 앱바에 추가되는 요소들의 색상, 즉 텍스트나 아이콘 등의 색상을 지정합니다.

BottomNavigationBar 속성

Scaffold(
    body: ...

    // Navigation bar
    bottomNavigationBar: BottomNavigationBar(
        items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle), label: 'account'),
            BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
        ],
    ),
)

BottomNavigatioBar는 앱의 하단을 꾸며주는 속성입니다. 상황에 따라서 BottomNavigationBar 위젯 또는 BottomAppBar 위젯을 사용하는데요, 보통 탭 메뉴를 추가할 때는 BottomNavigationBar을, 푸터처럼 자유롭게 꾸밀 때는 BottomAppBar을 사용합니다. 위 예제 코드에서는 탭 메뉴를 추가해 보도록 하겠습니다.

FloatingActionButton 속성

Scaffold(
    body: ...

    // Action button
    floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
    ),
)

FloatingActionButton은 화면에 버튼을 배치하는 속성입니다. 추가적인 메뉴 등을 수행하는 버튼으로 많이 사용하죠. 위치, 애니메이션 등 다양한 속성도 설정이 가능합니다. 이번 포스트는 scaffold에 대한 내용이기 때문에 세부적인 내용들은 다른 포스트에서 다루고 이번에는 간단하게 버튼만 추가해 보도록 하겠습니다. FloatingActionButton 위젯을 입력으로 주어 간단하게 버튼을 생성할 수 있습니다. 자식 값으로 아이콘을 하나 추가해서 버튼을 꾸며보도록 하겠습니다.

우리가 사용하는 대부분의 앱들은 scaffold와 유사한 레이아웃을 가지고 있습니다. 저도 지금까지 개발을 하면서 scaffold를 사용하지 않은 적이 없는 것 같네요. 이번 포스트에서는 scaffold에서 주로 사용되는 네 가지 속성들을 소개해 드렸습니다. 이 네 가지 외에도 더 많은 속성들이 있는데요, 다른 포스트에서 심화 내용을 다뤄보도록 하겠습니다.

QR 코드는 어떻게 작동할까? QR 코드 작동 원리 총정리

토로토 — Wed, 4 Jan 2023 22:31:31 +0900

어느 순간부터 우리 일상 속에 QR 코드가 자리 잡기 시작했습니다. 그 전까지는 마트에서 물건들을 계산할 때 바코드를 사용하는 것이 전부였던 것 같은데, 이제는 카카오 페이, 네이버 페이, 물건 정보 확인, 웹사이트 이동, 본인 확인 등 수 많은 분야에서 QR 코드가 사용됩니다. 간편하게 핸드폰 카메라를 열어서 비추기만 하면 바로 링크로 이동할 수 있다 보니 이 간편함에 더 많은 사람들이 사용하고 있는 것 같습니다. 신기하지 않나요? 얼핏 보면 다 똑같아 보이는 네모들인데, 카메라를 가져다 대면 숨겨져 있던 정보들이 튀어나오는 것을 보며 어떤 원리로 작동하는 것인지 궁금해졌습니다. 함께 그 원리를 알아보러 가시죠.

카세트 테이프를 아시나요? LTO 카트리지에 대하여

카세트테이프 또는 비디오테이프를 아시나요? 90년도 말~20년도 초반까지만 해도 많은 가정집에서 음악이나 비디오를 보기 위해 사용했었죠. 카세트테이프에 연필이나 볼펜을 꽂아서 테이프를

torotoblog.tistory.com

QR 코드는 물류 관리를 위해 개발되었다.

QR 코드는 생각보다 오래 전부터 개발됐습니다. 1994년에 도요타의 자회사인 덴소 웨이브(Denso Wave)라는 회사에서 부품 관리를 위해 만들었습니다. 기존에 사용하던 바코드는 담을 수 있는 정보도 너무 적었고, 정확하게 가로 방향으로 찍어야만 인식이 되었기 때문에 공장 입장에서는 너무 비효율적이었죠. 그래서 더 많은 데이터를 저장할 수 있고 어느 방향에서도 빠르게 인식이 가능하도록 개선하다가 2차원 형식의 QR 코드를 만들게 된 것이죠.

스마트폰이 보급되면서 QR 코드의 활용도도 높아졌다.

QR 코드의 등장은 말 그대로 혁신이었습니다. 최대 20자 밖에 담을 수 없었던 바코드와는 달리 QR 코드에는 4000자가 넘는 정보를 담을 수 있고, 담을 수 있는 정보가 많아진 만큼 훼손이 되더라도 필요한 정보를 읽을 수 있었습니다. 하지만 혁신적인 기술임에도 불구하고 최근까지는 큰 주목을 받지 못했습니다. 과거에는 스마트폰 보급률이 높지 않았을 뿐만 아니라 스마트폰이 있더라도 QR 코드를 읽을 수 있는 앱을 따로 설치했어야 했기 때문이죠. Quick Response라는 이름을 갖고 있는 것과는 다르게 일반인이 사용하기에는 그다지 빠르지 않았던 것이죠. 하지만 이제는 누구나 스마트폰을 사용하는 시대가 되었고, 성능도 좋아지면서 기본 카메라를 통해 QR 코드를 읽을 수 있다 보니 여러 분야들에서 사용되고 있습니다.

그럼 과연 QR 코드는 어떤 원리로 작동하는 걸까요? QR 코드는 크게 6가지 요소로 구성되어 있습니다. 파인더(Finder), 얼라인먼트(Allignment), 타이밍 패턴(Timing Pattern), 버전 정보(Version Information), 포맷 정보(Format Information), 그리고실제 데이터(Data)가 있습니다. 각 요소들은 다음과 같은 역할을 맡고 있죠.

파인더 : 꼭짓점에 있는 3개의 네모를 통해 사용자가 똑바로 스캔하지 않아도 QR 코드를 인식이 가능하도록 하는 요소
얼라인먼트 : QR 코드가 구부러진 표면 위에 있어도 바르게 인식이 가능하도록 하는 요소
타이밍 패턴 : QR 코드의 데이터 영역이 얼마나 큰지 파악이 가능하게 하는 요소
버전 정보 : 40개의 QR 코드 버전 중 어떤 버전을 사용 중인지 파악이 가능하게 하는 요소
포맷 정보 : 에러 오차와 데이터 마스크 패턴 정보를 통해 QR 코드를 더 쉽게 스캔할 수 있도록 도와주는 요소
데이터 : 사용자가 보게 될 실제 데이터

과연 QR 코드는 어디까지 발전할까?

몇 센티 되지도 않는 작은 네모 속에 이 많은 정보들이 들어가 있다는 게 놀랍지 않은가요? QR 코드는 더 이상 우리 일상에서 떼놓을 수 없는 물건이 되었습니다. 이미 수 많은 분야에서 활용되고 있고, 앞으로도 더 많은 분야에서 다양한 방법으로 사용될 것이라고 합니다. QR 코드가 어떤 모습으로 더 발전하게 될지 궁금하네요.

매직 트랙패드 2세대 개봉기

토로토 — Mon, 2 Jan 2023 21:34:49 +0900

맥북을 사용하면서 많은 것들에 감탄하지만, 그 중 최고를 뽑으라 하면 저는 트랙패드를 뽑을 겁니다. 저도 맥을 사용하기 전까지는 삼성 노트북을 사용했었는데요, 그 때는 정말 마우스 없이는 노트북을 사용하기가 너무 힘들었습니다. 하지만 맥북으로 넘어오고 나서 트랙패드를 처음 사용했을 때 느꼈던 그 편리함은 아직도 잊을 수 없네요. 손이 움직이고 의도하는 그대로 커서가 움직여지고, 사진이나 동영상을 편집할 때도 너무나 편리하더라고요. 최근에 모니터를 구입한 후 부터는 맥을 모니터에 연결하고 사용하다 보니 어쩔 수 없이 마우스를 연결해서 사용 중입니다. 맥은 마우스를 사용하기가 너무 불편하더라고요. 그래서 트랙패드를 구매할까 고민하던 중 여자친구가 크리스마스 선물로 사줬습니다! 그래서 써보는 매직 트랙패드 개봉기, 시작합니다!

Apple 2021년 Magic Trackpad 터치패드 MK2D3KH/A

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

www.coupang.com

뒤늦은 에어팟 3 개봉기

에어팟 3세대가 출시한 지 1년이 지난 지금 뒤늦게 에어팟을 구매했습니다. 크리스마스 선물로 여자친구에게 선물해 주기 위해 하나 구매하게 됐네요. 애플 제품은 하나 사고 나면 그 매력에 빠

torotoblog.tistory.com

생각보다 커서 놀란 매직 트랙패드.

박스를 열면 종이 비닐에 싸여있는 매직 트랙패드가 보입니다! 크기가 생각보다 커서 좀 놀랬습니다. 저는 맥북 프로 13인치를 사용 중인데, 제 맥북의 트랙패드 보다는 크기가 크더라고요. 맥북 트랙패드가 쓰기에 불편하진 않았지만 가끔씩 살짝만 더 컸으면 좋겠다는 생각이 있었는데, 매직 트랙패드는 정말 만족하는 사이즈로 나온 것 같습니다.

트랙패드 본체와 충전 케이블, 사용 설명서가 들어있다.

구성품은 역시나 다른 애플 제품들처럼 매우 심플합니다. 트랙패드 본체와 충전 케이블, 사용 설명서가 들어있네요. 사과 로고 스티커는 따로 안 들어가 있습니다.

너무 예쁘게 잘 만들어진 것 같다.

화이트 생상의 트랙패드인데 진짜 너무 예쁘네요. 상판은 유리 재질로 되어 있어서 부드럽습니다. 최근 아이폰 프로 모델의 후면처럼 사포질(?) 한 유리의 느낌입니다. 옆면은 알루미늄으로 되어있고, 하단은 플라스틱 재질인 것 같네요. 미끄럼 방지를 위해 고무도 각 모서리마다 붙어 있습니다. 색상은 아이폰의 실버 색상보다 밝은 화이트 색으로 돼있어서 책상에 올려두고 사용하기에 아주 예쁩니다. 또한 맥북에서 사용되는 Force Touch가 적용됐기 때문에 실제 물리적인 클릭이 아니라 압력을 감지하고 햅틱 엔진으로 진동을 줘서 클릭을 하는 듯한 느낌을 줍니다. 전 맥북도 그렇고 이 포스 터치가 정말로 마음에 듭니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

후면에 충전 단자와 전원 버튼이 있다.

건전지를 넣어서 사용하던 매직 트랙패드 1세대와는 달리 2세대는 충전 식으로 바뀌었습니다. 그래서 후면을 보면 중앙에 라이트닝 충전 포트가 달려 있죠. 아직까지도 C 타입이 적용되지 않은 것이 아쉽긴 한데, 또 한편으로는 폰을 충전하던 케이블을 그대로 사용하면 돼서 책상 위에 새로운 케이블을 둘 필요가 없는 것이 좋다고 해야 할까요..? 충전 포트 옆에는 작게 전원 버튼이 달려 있습니다. 덕분에 트랙패드가 켜져 있는지 꺼져있는지 쉽게 확인할 수가 있습니다.

트랙패드를 개봉하면서 놀랐던 또 다른 부분이 바로 케이블입니다. 특이하게도 매직 트랙패드의 충전 케이블은 고무 소재가 아니라 패브릭 소재로 되어 있더라고요. 백만 원이 넘는 아이폰을 살 때도 주지 않는 패브릭 케이블을 트랙패드에서 받다니! 아이폰에도 패브릭 케이블이 제공되면 정말 좋겠지만 쉽게 넣어 줄 애플이 아니죠 ㅠㅠ 이 케이블을 트랙패드 충전용으로 사용하기 너무 아까워서 폰 충전할 때 사용 중입니다 ㅋㅋㅋㅋㅋ 아주 마음에 들어요.

제 책상 위에 트랙패드가 하나 새롭게 추가됐는데 작업 효율이 어마어마하게 달라졌네요. 맥북을 모니터에 연결해서 사용하시는 분들이 계시다면 매직 트랙패드를 구매하시길 정말 추천드립니다.

스팀에 사용한 금액이 얼마나 되는지 알아보기

토로토 — Sun, 1 Jan 2023 21:41:20 +0900

스팀에는 많은 게임들이 있습니다. 배틀그라운드, 시티즈: 스카이라인, 위쳐 3, GTA V, 테라리아, 레드 데드 리뎀션, 몬스터 헌터 월드 등 정말 수 많은 인기 게임들이 있고, 또 각 게임마다 확장팩이나 아이템 등 돈을 쓸 수 있는 요소들도 다양하게 있습니다. 그래서 스팀에서는 지금까지 사용한 금액이 얼마인지 알 수 있도록 내역을 알려주고 있습니다.

사용 금액을 확인하는 방법은 간단합니다. 메뉴를 통해서 들어가는 방법도 있지만 귀찮으니 아래 링크를 통해서 한 번에 들어가 보도록 하죠. 아직 로그인이 안돼있다면 링크로 접속하신 후 로그인하시면 됩니다. 혹시라도 메뉴를 통해 찾아 들어가실 분은 Support > My Account > Data Related to Your Steam Account > External Funds Used를 찾아서 들어가시면 됩니다.

External Funds Used

help.steampowered.com/en/accountdata/AccountSpend

그러면 위 사진과 같은 페이지가 나옵니다. 4 가지 항목들이 있는데요, Total Spend를 확인하면 지금까지 사용한 총 금액을 확인 할 수 있습니다. 아쉽게도 금액은 한화로 결제를 했더라도 미국 달러 기준으로 나옵니다. 저는 지금까지 150.09 USD를 사용했다고 나오네요. 나머지 항목들에 대해서도 설명드리자면 Old Spend는 2015년 4월 17일 이전에 사용했던 금액들을 보여주고, Perfect World를 통해서 구매한 내역이 있다면 PWSped 항목에 표시됩니다. 마지막으로 중국에서 결제한 내역이 있다면 ChinaSped 항목에 중국 위안화(RMB)로 표시됩니다.

더 자세한 내역들을 보고 싶다면 아래 링크를 통해서 구매 히스토리로 들어가시면 됩니다. 구매와 판매 내역 모두 나타나기 때문에 만약 아이템을 판매했었다면 해당 내역도 모두 확인하실 수 있습니다. 구매/판매를 한 후 잔액도 함께 표시되네요.

Purchase History

store.steampowered.com/account/history

유니티 이론 01. GetAxis와 GetAxisRaw 차이점

토로토 — Sat, 31 Dec 2022 21:14:11 +0900

유니티에는 Input Manager라는 키보드, 마우스, 조이스틱 등의 입력을 담당하는 기능이 있습니다. 이 Input Manager을 통해서 보다 간편하게 입력 데이터를 받아 올 수 있죠. 이전 강좌에서도(자세하게 설명드리지는 않았지만) Input Manager을 사용해서 플레이어의 이동을 구현했습니다. Input Manager에 등록된 데이터를 사용하기 위해서는 GetAxis 또는 GetAxisRaw 함수를 사용해야 하는데요, 이번 포스트에서는 이 두 함수의 차이에 대해서 알려드리도록 하겠습니다.

유니티 강좌 02. 2D 플레이어 이동

지난 강좌에서 유니티의 기본 인터페이스에 대해서 배웠습니다. 그럼 이제 본격적으로 유니티를 사용해 봐야겠죠. 게임에서 가장 기본적인 요소 중 하나가 바로 플레이어입니다. 그중에서도 제

torotoblog.tistory.com

유니티 강좌 05. 2D 플랫포머 이동

저번에는 탑뷰 형식의 게임에 사용될 플레이어 상하좌우 이동에 대해서 알려드렸습니다. 하지만 마리오, 소닉, 테라리아 같은 플랫포머 게임을 만들 때는 중력이 적용된 좌우 이동이 필요합니

torotoblog.tistory.com

상단 메뉴에서 Edit > Project Settings로 들어가시면 여러 설정 메뉴 중 Input Manager가 있습니다. 저희가 사용해 본 Horizontal, Vertical부터 시작해서 여러 종류의 인풋들이 있는 걸 볼 수 있네요. GetAxis 또는 GetAxisRaw 함수를 사용하면 여기에 있는 인풋들을 불러오는 것이기 때문에 이름을 정확하게 적어주는 것이 매우 중요합니다. 대소문자 하나라도 틀리면 어떤 인풋을 의미하는지 유니티가 알지 못하기 때문이죠.

그렇다면 GetAxis와 GetAxisRaw의 차이점은 무엇일까요? 둘 다 모두 같은 기능을 수행하는 것 같은데 말이죠. 한번 실험을 해보도록 하겠습니다.

using UnityEngine;

public class PlayerMovement : MonoBehaviour
{
    public float speed;
    private float moveInput;

    private Rigidbody2D rb;

    private void Start()
    {
        rb = GetComponent<Rigidbody2D>();
    }

    private void FixedUpdate()
    {
        moveInput = Input.GetAxisRaw("Horizontal");
        Debug.Log(moveInput);
        rb.velocity = new Vector2(moveInput * speed, rb.velocity.y);
    }
}

간단하게 플레이어 좌우 이동을 구현해 봤습니다. 인풋은 지금까지 저희가 사용해왔던 GetAxisRaw() 함수를 사용했는데요, 인풋을 받은 후 Debug.Log() 함수를 통해서 moveInput 값이 어떻게 나오는지 확인해 보도록 하죠. Debug.Log() 함수는 원하는 데이터를 유니티의 Console 창에 프린트해 주는 함수입니다. 이걸 사용해서 간단하게 원하는 결과가 나오고 있는지 테스트할 수 있습니다. 게임을 실행하고 플레이어를 이동해 봅시다.

Console 창을 보시면 moveInput 값들이 보입니다. 저는 좌우 모두 움직였기 때문에 -1, 0, 1 이렇게 세 가지 값이 나타납니다. 가만히 있을 때는 0, 오른쪽으로 움직일 때는 1, 왼쪽으로 움직일 때는 -1의 값이 나오죠.

using UnityEngine;

public class PlayerMovement : MonoBehaviour
{
    public float speed;
    private float moveInput;

    private Rigidbody2D rb;

    private void Start()
    {
        rb = GetComponent<Rigidbody2D>();
    }

    private void FixedUpdate()
    {
        moveInput = Input.GetAxis("Horizontal");
        Debug.Log(moveInput);
        rb.velocity = new Vector2(moveInput * speed, rb.velocity.y);
    }
}

이번에는 코드를 조금 수정해 보겠습니다. GetAxisRaw()를 GetAxis()로 바꿨습니다. 나머지는 그대로 두고 다시 한번 테스트를 해봅시다. 게임을 실행하고 플레이어를 이동해 보도록 하죠.

마찬가지로 Console 창을 보시면 이번에는 뭔가 많이 있는 것을 볼 수 있습니다. 플레이어를 이동하는 동안에도 느끼신 분들이 있었겠지만, 이번에는 0에서부터 -1 또는 1까지 서서히 올라가게 됩니다. 그래서 그 사이 값들이 Console에 찍힌 거죠. 사람이 실제로 달리다가 멈추게 되면 바로 속도 때문에 바로 멈추지 못하고 몇 발자국 더 나아가는 것과 비슷합니다. 이제 차이점이 좀 보이시나요? 하지만 이러한 차이가 있다고 해서, 이 차이를 어떻게 활용해야 하는 걸까요?

이 두 함수는 플레이어가 이동하다 멈출 때 가장 크게 체감됩니다. 발로란트 같은 게임들을 보면 키보드에서 손을 뗀다고 바로 플레이어가 멈추지 않고 서서히 속도를 줄이다 멈추죠. 그렇다 보니 스톱 무빙이 게임에 영향을 미치는 요소 중 하나죠. 반면 키보드에서 손을 떼면 바로 멈춰버리는 게임들도 있습니다. 이렇듯 지금 내가 어떤 게임을 만들고 있는지, 게임에서 요구하는 요소가 어떤 것들이 있는지를 생각해 보고 그에 적절한 함수를 사용하는 것이 중요합니다.