The Compass 더컴퍼스

미쳐버린 웹플로우 컴포넌트, 신규 기능 알아보기 - Webflow Conf 2024: 컴포넌트 스타일 변형 기능 알아보기

2024-12-03T07:28:32Z

올해 10월에 Webflow Conf 2024가 진행되었습니다. 특히 keynote에서 AI Assistant (Design), New navigation 등 다양한 기능추가와 변경사항들이 있었는데, 그 중에서 Component style variants(컴포넌트 스타일 변형)이 유용해 보여 소개해 드리려고 합니다. 웹플로우 컴포넌트 웹플로우에서 컴포넌트

웹플로우 SEO 최적화 방법

2024-10-29T07:34:52Z

여러분들이 웹사이트를 만드려고 하시는 이유는 무엇인가요? 아마도 자사의 서비스를 더 많은 사람들에게 알리고, 판매를 증진시키기 위함일 것입니다. 하지만 웹사이트를 만든다고 해서 여러분들이 원하는 바를 이루긴 힘드실 수도 있습니다. 왜냐면 구글이나 네이버에 검색했을때 여러분의 웹사이트가 상위에 노출되긴 힘들테니까요. 아무리 잘만들고 좋은 웹사이트 여도 사람

왜 내 CSS 스타일은 제대로 적용되지 않을까? - CSS 명시도(Specificity)에 대해서 알고 계신가요?

2024-10-25T07:03:25Z

혹시 CSS 스타일을 적용하려고 했는데 마음대로 적용이 되지 않은 적이 있으신가요? 이번 글은 이런 분들을 위해서 CSS 캐스케이딩(Cascading) 조건중 하나인 CSS 명시도(Specificity)에 대해서 알려 드리려고 합니다. 웹 개발자라면 반드시 알고 있어야 하는 개념이지만 기초적인 지식이다 보니 오히려 간과하게 되는 경우가 있는 것 같은데요

웹플로우 에디터 알아보기 #3 - 오른쪽 패널 편

2025-05-17T11:14:21Z

웹플로우에는 웹사이트를 제작하기 위한 수많은 기능들이 존재합니다. 웹플로우로 웹페이지를 제작하기 위해선 기본적으로 에디터에 있는 각 패널들에 대한 이해가 필요한데요. 이번 글에서는 에디터 오른쪽 패널의 자주 사용되는 기능들에 대해서 알아보도록 하겠습니다. 오른쪽 패널 웹플로우 에디터는 중앙의 에디터 화면을 제외하면 크게 3가지의 패널로 이루어져 있습니다

사수한테 칭찬받는 읽기 좋은 함수, 변수명 잘 짓는 법

2024-12-22T06:31:56Z

혹시 코드를 작성하다가 변수명을 어떻게 지을지 고민해 본 적이 있으신가요?코드의 기능 구현만큼이나 중요한 것이 바로 명확하고 읽기 쉬운 네이밍을 하는 것이라고 생각합니다. 국내뿐만 아니라 해외에서도 네이밍에 대한 어려움은 똑같은 것 같은데요, 이런 밈이 있을 정도로 많은 프로그래머들이 골치 아파하는 부분인 것 같습니다. 잘 지은 함수명이나 변수명은 코드의

웹플로우 에디터 알아보기 #2 - 상단 패널 편

2024-10-21T01:19:06Z

웹플로우에는 웹사이트를 제작하기 위한 수많은 기능들이 존재 합니다. 웹플로우로 웹페이지를 제작하기 위해선 기본적으로 에디터에 있는 각 패널들에 대한 이해가 필요한데요. 이번 글에서는 에디터 상단 패널의 자주 사용되는 기능들에 대해서 알아보도록 하겠습니다. 상단 패널 웹플로우 에디터는 중앙의 에디터 화면을 제외하면 크게 3가지의 패널로 이루어져 있습니다.

웹플로우 에디터 알아보기 #1 - 왼쪽 패널 편

2024-10-21T01:19:42Z

웹플로우에는 웹사이트를 제작하기 위한 수많은 기능들이 존재 합니다. 웹플로우로 웹페이지를 제작하기 위해선 기본적으로 에디터에 있는 각 패널들에 대한 이해가 필요한데요. 이번 글에서는 에디터 왼쪽 패널의 자주 사용되는 기능들에 대해서 알아보도록 하겠습니다. 왼쪽 패널 웹플로우 에디터는 중앙의 에디터 화면을 제외하면 크게 3가지의 패널로 이루어져 있습니다.

PWA with Nuxt3 - 프로그레시브 웹 앱 이란?

2023-08-09T07:02:03Z

웹에서 채팅과 같은 알림을 보내는 방법이 무엇이 있을까요? 이를 설계하기 위해서 더컴퍼스는 PWA를 적용하였습니다. PWA란? PWA : Progressive Web Apps모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱 입니다.네이티브 앱과 달리 브라우저에 실행되지만 보안상의 이유로 브라우저가 접근하지 못하는 시스템 하드웨어와 소프트

DevOps 그리고 애자일 - 애자일과 DevOps의 차이점 그리고 유사점에 대해서

2023-08-09T02:54:01Z

비즈니스 민첩성이 강조되어지고 있습니다. 비즈니스의 핵심에 큰 리스크가 없으면서 조직을 새로운 방향으로 신속하게 바뀌어 나가는 것을 의미합니다. 발생할 수 있는 모든 위기에 대응이 가능해야하며, 이를 통해 빠른 변화에 적응할 수 있는 비즈니스 팀 빌딩을 하는 것이 매우 중요합니다. 이제 이는 선택이 아니라 필수 불가결한 조건입니다. 신속한 변화를 위한

감사히 잘 먹겠습니다 :) - 에이전시와 클라이언트의 관계성에 관하여

2023-07-30T14:26:25Z

Grrrrrrrrr- "사이트를 너무 훌륭하게 만들어주셔서 감사 인사로 피자라도 쏘고 싶은데혹시 팀원분들이 몇 명이나 될까요?" 함께 프로젝트를 진행 중이며 마무리를 향해 달려가고 있는 '메센 아트' 대표님께서 감사하게도 피자와 치킨을 점심으로 보내 주셨습니다. 저희는 당연히 해야 할 일을 했을 뿐인데 말이죠. 인정을 받으며 일 하는 것은 매우 행복

[Vue3]provide 와 inject - 여전히 좋은 선택이지만, props가...

2023-07-25T07:07:11Z

Vue같은 SPA 프레임워크에서의 데이터는 부모에서 자식으로 이동하는 것을 원칙으로 합니다. 그러다 보니 프로젝트를 진행하다 보면 컴포넌트들 간에 계층 구조가 생기기 마련입니다. 이러한 계층 구조에서 컴포넌트 간에 정보를 주고 받을 때, 보통 부모 컴포넌트에서 자식 컴포넌트로 props를 내려주는 방식을 사용합니다. Props property의 약자로, 부

[Nuxt3]"Window is not Defined" - 우리 금쪽같은 윈도우가요?

2023-08-04T06:23:50Z

안녕하세요 Heegun입니다. 윈도우 객체 사용 시에 마주칠 수 있는 당황스러운 화면이 있습니다. Nuxt에서 Window 객체를 사용하다가 마주칠 수 있는 에러입니다. 아주 단순한 코드임에도 발생하여서 뒷 목에 식은땀을 흐르게 할 수 있습니다. Window 객체에서 not defined 에러를 보는 것이 흔치는 않기 때문이죠.. Window 우선

[Nuxt.js] 알아보자 - 더컴퍼스가 사용하고 있는 프레임워크

2023-07-24T09:30:24Z

더컴퍼스는 Nuxt.js라는 프레임워크를 사용하고 있습니다. Nuxt.js를 처음 접하는 개발자들을 위해 이에대해 설명하고, 셋업하는 과정에 있어 도움이 되고자 이 글을 작성하게되었습니다. Nuxt.js란? Vue.js 프레임워크 기반의 개발 환경 구축에 도움을 주는 프레임워크로, SSR Vue.js 어플리케이션을 위해 개발되어, 비동기데이터, 미들웨어

2023 최신 웹사이트 트렌드 5가지 - 트렌드에 따라가는 디자이너가 되어보자

2023-09-28T00:02:34Z

트렌드를 쫒고 예상하여 디자인을 해 내는 것이 크리에이티브 한 디자이너의 필수 요건이라고 생각합니다. 웹 디자인은 끊임없이 진화하고 변화하고있으며 새로운 트렌드가 계속 등장하고 있습니다. 이 글에서는 올해 주목해야 할 최신 웹사이트 트렌드 5가지를 소개해드리고자 합니다. 다크모드 다크 모드는 눈의 피로를 줄이고 디바이스 배터리 수명을 연장하는 데 도움이

[Vue3]안드로이드 키보드 스크롤 관련 이슈 2부 - 주니어 개발자의 고분분투기(2)

2023-07-24T09:30:40Z

지난번 글에 이어 안드로이드에서 발생된 스크롤 이슈를 어떻게 접근하여 해결하였는지 소개해드리겠습니다. 해결방안 앞서 말씀드린 것 처럼 document 객체의 높이를 직접 줄이는 방법을 시도해보았습니다. 키보드가 열렸을 때의 document 객체의 높이에서 viewport의 높이를 빼서 키보드의 높이를 계산했습니다. (+1을 한 것은 단위의 문제 때문에

[Vue3]안드로이드 키보드 스크롤 관련 이슈 1부 - 주니어 개발자의 고분분투기(1)

2023-07-24T09:30:45Z

안녕하세요 Heegun입니다. 금번 글은 안드로이드에서 발생된 이슈와 이를 분석 및 해결하는 과정을 담은 글입니다. 안드로이드 환경에서 채팅 기능을 구현하기 위한 과정에서 postion:fixed로 하단에 고정해 둔 Input이 스크롤 시 같이 올라오지 않는 현상이 발생했습니다. 구현 코드입니다. 스크롤 기능 구현은 아래 포스트를 참고하여 작업하였습니

웹 디자인 규칙 - 웹 디자이너가 필수로 알고있어야 할 디자인 규칙

2023-12-03T22:49:25Z

안녕하세요, JEFF입니다 지난번 글에 대해 많은 관심을 주셔서 너무 감사드립니다. 덕분에 글 쓰는 재미와 용기가 조금 붙었습니다!ㅎ 앞으로도 많은 글로 보답하겠습니다. 지난번 시리즈에 이어 이번에는 컴포넌트화를 위해 더컴퍼스에서 사용하는 규칙에 대해 말씀드리겠습니다. 반응형 웹 : Break Point 하나의 사이트를 만들더라도 요즘은 당연하게 타블

아이콘 디자인 규칙 - 웹 디자이너가 필수로 알고있어야 할 디자인 규칙

2024-10-29T04:54:35Z

UI 디자인에서 일관성은 매우 중요한 영역입니다. 일관성 없는 UI는 유저들을 혼란스럽게 하며, 서비스의 브랜딩과 성공 여부에 큰 영향을 미칩니다. 여기서 일관성이란, 인터페이스의 구성요소들이 통일되어있는 상태를 말합니다. 구성요소들은 같은 외양을 가지고 같은 방식으로 작동해야 합니다. 일관성 있는 UI는 사용자들이 서비스를 편리하게 이용하게 하며, 이를

프로덕트의 탄생과 운영 - 디자이너님 이거 만들어주세요. 일단 만들어주세요.

2023-09-20T07:10:30Z

하루아침에 뚝--딱! 하고 만들어지는 것은 없습니다. 모든 일에는 순서가 있고, 우리가 평상시에 사용하는 모든 서비스 또한 그러하죠. 하나의 서비스 혹은 프로덕트가 탄생하고 운영되는 데에는 일반적으로 다음과 같은 9개의 프로세스로 이어지고, 이 프로세스가 계속적으로 순환하게 됩니다. 그리고 이러한 프로세스가 '순항' 할수록, 서비스는 견고해지고 발전

초심자를 위한 Webflow, 일단 시작하기 - 나는 웹개발하는 UI 디자이너 할래

2024-10-18T03:09:52Z

클라우드 기반 웹사이트 제작 도구는 웹사이트를 만들기 위한 강력한 도구입니다. 웹 개발자 지식이 없어도 웹사이트를 만들 수 있으며, 다양한 템플릿과 기능을 제공하여 사용자의 요구에 맞는 웹사이트를 쉽게 만들 수 있습니다. 국내에는 카페 24, 식스샵, 아임웹 등이 있고, 해외엔 Unbounce, Wix, Squarespace, Weebly, Jimdo