Chat GPT, Claude 등 수많은 개발 모델이 등장하고 있고 IDE에도 AI가 탑재되어 코딩에 도움을 주는 시대에 살고 있어요. 누가 이길지 모르겠으나 마치 춘추전국시대 같아요. 기존에 VS Code를 계속 쓰고 있다가 AI 비서가 붙어있는 Cursor를 한번 써봤는데 굉장히 개발 경험이 좋아서 여러분도 한번 써보셨으면 좋겠어요. 그런데 지금 당장은 돈을 내지 않고도 개발하는 방법을 찾아서 이를 공유하려고 해요. 자린고비 같은 방법이라고 생각해주시면 돼요. IDE를 여러개 쓰는 이유 각 IDE마다 무료 계정이 AI 기능을 무료로 쓸 수 있는 한도가 있어요. 이 한도를 다 사용하면 다른 IDE를 사용해서 한도까지 쓰고 다른 IDE로 바꾸는 과정을 한달마다 하는 거예요. 이 정책이 바뀔 수도 있지만 사용법도 비슷하고 아직 유효하다고 생각해 공유하려고 해요. 여러분은 Cursor 같은 IDE가 몇개나 된다고 생각하시나요? 저는 약 3~4개 정도를 찾았어요. VS Code Cursor Windsurf Aide 이거 말고도 몇개가 더 있을 수 있지만 저는 2~3개의 IDE만 써도 한 달 정도를 쓸 수 있어서 4개면 충분하다고 생각해요. 각 사이트나 IDE에서 계정 가입은 GitHub 계정으로 가입했어요. Cursor 사용량 Windsurf 사용량 Aide 사용량 GitHub Copilot 사용량 (얘네는 어디서 보여주는지 모르겠어요 😓) VS Code를 제외하고는 다들 VS Code를 포크해서 만들어낸 IDE이기 때문에 Profile을 활용하면 환경 구성을 더 간편하게 할 수 있어서 이것만 알려드릴게요. Profiles 기능을 사용해서 개발 환경 구성하기 먼저 위에서 원하는 제품들을 다운받아서 개발하는 컴퓨터에 설치해 주세요. 제 기준으로 말씀드리면 VS Code를 제외하고 나머지는 최근에 설치했기 때문에 Profile의 기본이 될 contents를 가진 VS Code로 정했어요. 아마 대부분이 이에 해당하실 거라 생각해요. Contents가 무엇이냐 하면 VS Code에 설정하고 설치했던 settings, keyboard shortcuts, tasks, snippets, extensions을 말하는 거예요. 여기서 다른 곳으로 옮길 필요가 있는 것들을 골라 프로필로 만들 거예요. 이렇게 하는 이유는 다른 IDE를 처음 키면 동일한 세팅을 구성하는 게 번거로우실 거예요. 어떤 IDE는 VS Code에서 설정을 가져올 수 있게 지원하지만 하지 않는 IDE도 있어서 동일한 환경을 모두 적용하기 위해 프로필을 만들려고 해요. 더 정확한 설명은 Profiles in Visual Studio Code을 참고해 주세요. Profile 저장하기 VS Code에서 하단에 환경설정(톱니바퀴 모양) 버튼을 선택해 주세요 Profiles 버튼을 선택해 주세요 저장하고자 하는 프로필 옆 더보기 버튼을 선택해 주세요 Export를 눌러주세요 원하는 이름을 입력해 주세요 원하는 위치에 저장해 주세요 (저는 Local file로 저장) 이렇게 되면 저장은 완료되었어요. Profile 불러오기 이제 각 IDE를 킨 다음 Profile 메뉴를 찾아 Import Profile을 눌러 파일을 선택해 주세요. 어떤 IDE는 메뉴에서 안보이는 경우가 있어서 cmd + shift + p로 커맨드 팔렛트를 열고 Profile: New Profile을 선택한 다음 해당 프로필을 Cancel한 다음 Import Profile을 해주세요. 그리고 여러 설정과 extensions을 다운로드하면 프로필이 생성돼요. 그런 다음 편의를 위해서 Use for New Windows에 Use this profile as the default for new windows를 체크해 주세요. 이제 거의 동일한 환경으로 각 IDE에서 AI와 함께 개발할 수 있으실 거예요! AI와 개발하는 방법 Chat GPT 같은 걸 사용해 봤다면 방법은 쉬워요. Chat GPT를 쓰듯이 IDE에서 채팅하면 돼요. 대신 IDE와 결합되어 있어서 도움이 되는 몇 가지 기능이 더 있어요. 크게 AI가 직접 작성해 주는 Write 모드와 대화만 해서 제가 직접 작성하는 Chat 모드가 있어요. 그리고 코딩하면서 제가 쓰고자 하는 걸 제안하는 자동 완성(completion) 모드가 있어요. 저는 이런 IDE를 쓰는 가장 큰 이유로 대화를 통해 코드 개선점과 문제 찾기, 단순 반복 업무 대신하는 역할이 크다고 생각해요. Rules 세팅하기 내 프로젝트에 맞는 개발을 하기 위해서 AI에게 사전 지시 사항을 설정하는 방법이에요. 저는 다 똑같은 내용을 각 파일에 지정해 줬어요. 하나의 파일을 바라보게 하는 방법도 있겠지만 일단은 이렇게 하고 있어요. 어떤 내용을 넣어야 하냐는 고민을 하실 수 있는데 저는 Cursor Rules라는 사이트에서 프로젝트에서 맞는 rule을 찾아 넣어주세요. 저는 프로젝트에서 사용하는 Flutter 프레임워크를 찾아서 복사 + 제가 추가한 내용(Clean architecture와 한국어 사용)을 넣었어요. Rules 세팅을 위한 경로 GitHub Copilot: 프로젝트루트/.github/copilot-instructions.md 만들고 내용 작성 Cursor: 프로젝트루트/.cursorrules 만들고 내용 작성 Windsurf: 프로젝트루트/.windsurfrules 만들고 내용 작성 Aide: docs를 찾아봤지만, 없는 것 같아요 😓 대화창 여는 단축키 VS Code에서 대화창 열기: ctrl + cmd + I Cursor에서 대화창 열기: cmd + shift + l Windsurf에서 대화창 열기: cmd + shift + l, 모드 전환: cmd + . Aide에서 대화창 열기: 항상 열려있어요 이 밖에도 파일 참고해서 질문하기, 코드 라인 참고해서 질문하기 등 다양한 방법으로 AI와 대화하는 법이 있지만 이건 docs와 다른 글이나 영상을 참고해 주세요! 각 IDE의 문서는 아래에 링크해 둘게요. GitHub Copilot docs Cursor docs Windsurf docs Aide docs 유용한 링크 GitHub Copilot in VS Code cheat sheet Transformation doesn't take place with a vacuum; instead, it occurs when we are indirectly and directly connected to all those around us.— Byron Pulsifer

제가 만들고 싶은 앱을 피그마로 디자인하고 싶어서 배워봤지만, 뭔가 제가 만들었던 건 잘 디자인된 느낌은 아니었어요. ㅜㅜ 그래서 피그마를 잘 쓰기 위해선 UI 디자인에 대해 이해하고 있어야 할 것 같은 생각이 들었어요. 피그마 사용법보다는 디자인을 어떤 의도로 해야할지 정리한 글로 생각해 주세요! 해상도와 단위의 이해 물리적 픽셀(PX)과 논리적 픽셀(DP)의 차이가 있어요. 웹에서는 CSS가 px를 논리적 픽셀로 인식하며, em과 rem 같은 상대적 단위도 사용돼요. 해상도와 화면 크기 해상도: 화면의 총 픽셀 수 (가로 x 세로) ex) 1920x1080 1280x1024 인치: 화면 대각선 길이 (1인치 = 2.54cm) ex) 24, 27, 32인치 모니터 픽셀 밀도 PPI (Pixels Per Inch): 인치당 픽셀 수 DPI (Dots Per Inch): 실제 화면 영역의 픽셀 수 디자인 단위 DP(Density-independent Pixels): Android의 크기 단위 SP(Scale-independent Pixels): Android의 텍스트 단위 PT(Point): iOS의 크기 단위 DPI는 1x가 흐릿하게 보일 때가 많아 2x로 PNG로 Export하는 것이 나아요. 일러스트레이션이나 아이콘 같은 경우 벡터인 SVG 파일을 사용하면 깨지지 않아요. 8px 그리드 시스템 8px 그리드 시스템은 디자인의 일관성과 개발 친화성을 높이는 방법이에요. 모든 요소의 크기와 간격을 8의 배수로 설정하는 걸 말해요. ex) 아이콘 기본 사이즈: 16, 24, 32, 64px 등 디자인 에셋의 사이즈와 간격 및 모든 수치를 8단위로 맞추면 모든 디바이스에서 픽셀이 깨지지 않고 개발 친화적인 디자인을 할 수 있어요. 스크린 사이즈가 8bit(1byte)를 기준으로 발전했기에 8을 기본으로 해야 이미지가 깔끔하게 렌더링돼요. 꼭 8의 배수만을 고집하지 않고 필요에 따라 4px이나 2px 단위도 사용해요. 8px 그리드 시스템을 UI에 적용할 수 있는 영역 예시: 폰트 크기(Font size), 행간(Line height), 패딩(Padding), 마진(Margin), 모서리 반경(Radius), 고정 너비/넓이(Fixed width/height) 등 모든 환경을 신경 쓰는 경우가 아니라면 8px 그리드를 꼭 지키지 않아도 되긴 해요. 피그마에서는 Preferences > Nudge amount를 8px로 설정하여 쉽게 적용할 수 있어요. 박스 모델 이해 모든 요소는 박스 영역 안에 들어 있어요. 모든 UI 요소는 박스 모델을 따르게 할 수 있어요. 콘텐츠: 실제 내용 패딩: 콘텐츠와 테두리 사이의 공간 테두리: 요소의 경계 마진: 요소 간의 간격 콘텐츠와 패딩은 테두리 안에 존재하고 테두리 바깥 영역은 마진이 있어요. 콘텐츠와 테두리 사이에 간격은 패딩이 담당하고, 테두리와 박스 영역 사이는 마진이 담당해요. 터치 영역은 일반적으로 44 x 44px 이상을 권장하지만, 상황에 따라 작아지는 경우도 있어요. 폰트 운영체제별로 기본 폰트는 다를 수 있어요. 일관된 폰트 경험을 주고 싶다면 디자인/앱에도 미리 폰트를 설정하는게 좋아요. Android: Noto Sans CJK KR (한글), Roboto (영어) iOS: Apple SD Gothic Neo (한글), SF Pro Display (영어) 폰트 선택 시 가독성과 브랜드 일관성을 고려해야 해요. 디자인 시스템 활용 이미 잘 만들어진 일관된 디자인을 위해 디자인 시스템을 활용하는 걸 추천해요! Material Design System Apple Human Interface Guidelines 새로 컴포넌트를 만들어야 한다면 이미 잘 만들어진 디자인에서 조금씩 바꿔가며 만들어 나가는 게 좋아요. 이러한 가이드라인을 참고하면 플랫폼별 특성을 고려한 디자인이 가능해요. 반응형 디자인 다양한 디바이스에 대응하기 위한 반응형 디자인도 고려하시면 좋아요. 컴포넌트에 반응형 속성 적용 디바이스별 최소/최대 크기 설정 모바일: 최소, 최대 태블릿: 최소, 최대 데스크톱: FHD, QHD, 4K 등 반응형 디자인 고려해 볼 수 있는 다양한 기기들: Mobile, Tablet, Desktop, Watch, Car, VR 에셋 관리 피그마에서는 sRGB 색 공간으로만 에셋 내보내기 가능 벡터 형식(SVG)을 사용하여 해상도 독립적인 아이콘과 일러스트레이션 제작 래스터 이미지의 경우, 2x DPI로 PNG 내보내기 권장 추가로 생각해 볼만한 것 컴포넌트와 스타일을 활용하여 디자인 일관성 유지하기. 반응형 디자인을 위해 Auto Layout을 사용하여 유연한 레이아웃 구성하기. 프로토타입 기능을 활용하여 개발 전에 상호작용 디자인 테스트해보기. 개발에선 버전 관리와 협업 기능을 활용하여 팀 작업 효율성 향상하기. A man is great by deeds, not by birth.— Chanakya

42서울 개포 클러스터에서 문득 Linux, Dart, Flutter 등 많은 프로젝트를 오픈소스라고 말하는데 그러면 C 언어도 오픈소스인가 하는 의문이 생겼어요. 찾아보니 C 언어는 소프트웨어가 아니였어요. 그래서 오픈소스라기 보다는 정의된 표준이였어요. 그래서 제각기 다양한 컴파일러를 구체적으로 구현하면서 정의된 표준을 준수하면서 C 컴파일러 오픈소스가 많아지게 되었어요. 예) GCC, MSVC C 언어는 언어를 위한 '표준'만을 말하는 거였어요. 누군가 소유할 수 있는 것이 아니고 모두가 사용할 수 있는 언어였어요. 이 표준을 사용해서 컴파일러나 인터프리터를 개발하는 건 누구나 가능했어요. 그렇지만 컴퓨터를 모르는 사람과 적은 인원으로는 언어를 만드는 게 쉬운 일이 아니였을 거예요. C 언어란 무엇인가? C 언어는 프로그램이 실행되기 위해 따라야 할 규칙들을 기준으로 .c 파일 형식으로 작성돼요. 작성된 소스 코드는 사람만 이해할 수 있으며, 컴퓨터가 직접 이해할 수 있는 것은 아니에요. 컴퓨터가 이해할 수 있도록 소스 코드를 기계어로 변환하는 과정이 필요한데, 이 과정에서 컴파일러라는 도구가 필수적이에요. 컴파일 과정에서는 소스 코드의 문법 오류를 검사하고, 해당 파일이 컴퓨터에서 실행 가능한 상태로 변환돼요. 전처리기를 통해 코드 전처리를 수행 컴파일러가 전처리된 파일을 기계어로 변환하여 개체 파일을 생성 링커가 개체 파일과 필요한 스타트업 코드 등을 결합해 최종 실행 파일을 생성 C 언어 컴파일러는 왜 다양할까요? C 언어는 다양한 운영 체제와 하드웨어에서 사용되기 때문에, 각 환경에 최적화된 컴파일러들이 필요했어요. 다양한 요구와 성능, 기능에 맞추어 다른 컴파일러가 개발되었고 오픈소스 컴파일러는 커뮤니티에서 자유롭게 수정되고 배포되어 특정 기능이나 환경에 맞춘 다양한 버전들이 파생되었어요. 컴파일 과정 컴파일 과정은 여러 단계로 이루어집니다. 이를 gcc 명령을 통해 단계별로 확인할 수 있어요. 전처리: gcc -E main.c -o main.i 전처리기는 include, define 등의 전처리 명령을 해석하고, 코드에서 필요한 외부 파일과 매크로를 처리하여 전처리된 파일을 생성해요 컴파일: gcc -S main.i -o main.s 전처리된 파일을 어셈블리 언어로 변환돼요. 어셈블리 언어는 특정 하드웨어에서 실행될 수 있도록 변환된 코드의 중간 형태예요 어셈블: gcc -c main.s -o main.o 어셈블리 코드를 기계어로 변환하여 개체 파일(.o)을 생성해요 링크: gcc main.o -o main.exe 링커는 개체 파일을 Startup 코드 등과 결합해 실행 파일을 만들어요. Startup 코드는 프로그램 실행 전 필요한 준비 작업을 수행하며, main() 함수를 호출하는 역할을 해요. Where focus goes, energy flows.— Tony Robbins